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;
}

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