css第三天

时间:2023-03-10 04:29:00
css第三天

1.标准模式与怪异模式(针对盒子模型)
与边框,填充,边界,有关

标准模式(默认):
元素的总宽度 = 盒子的宽度 + 左右填充宽度 + 左右边框宽度
元素的总高度 = 盒子的高度 + 上下填充高度 + 上下边框高度
注:div盒子布局也是用标准模式

怪异模式:
元素的宽度=盒子的宽度

如何把标准模式转换成怪异模式?
box-sizing:content-box,border-box;
content-box:标准模式;
border-box:怪异模式;

2.列表list(类型,图符, 位置)

list-style-type属性指定列表项标记的类型是:
实例
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

要指定列表项标记的图像,使用列表样式图像属性:
实例
ul
{
list-style-image: url('sqpurple.gif');
}

列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性,列表样式属性设置如下:
实例
ul
{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性:
list-style-type
list-style-position (有关说明,请参见下面的CSS属性表)
list-style-image

3.浮动(float)
就是解决,盒子模型的布局问题,可以用于布局的元素应该是块级元素(如果是行内元素,要将行内转换成块级才行)

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
实例
img
{
float:right;
}

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
在这里,我们对图片廊使用 float 属性:
实例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

清除浮动 - 使用 clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊:
实例
.text_line
{
clear:both;
}

总结:学完盒子模型和浮动,对网页的布局,又有了更深层次的了解,对于网页布局的构建也有了大概的思路
,主体离不开盒子模型,要向构建一个好的网页就必须好好运用盒子模型,并用浮动解决其布局问题。