当父元素无法确定子元素的高度，盒子里面的内容浮动起来，那么他就脱离标准流了，所以这时候父元素盒子就不能精确地检测到它内部的内容有多高，父元素中就相当于没有元素（父元素成为一条线）完全没有被撑开。

2.此时设置overflow:hidden;用于触发盒子的是否是布局属性haslayout，就可以精确检测内部的高度，盒子就会被撑开。
注意：overflow可以触发除了IE6以外的haslayout属性。为了兼容IE6，在overflow下增加一句zoom:1;可触发IE6 的haslayout属性。

背景属性background

background-image:url('背景图的地址')用于设置背景图
background-repeat设置背景图是否重复，为不重复no-repeat，为延y轴重复repeat-y
background-position设置背景图的位置为右下角right bottom
background-attachment设置附加条件，将背景固定fixed
background-color设置背景颜色

最后可以将这些属性合并为background这一个属性。如下：

边界属性margin

参数规则

margin:10px;表示上下左右全是10px；
margin:10px,50px;表示第一个参数是上下，第二个参数是左右；
margin:10px,auto,50px;表示第一个参数是上，第二个参数是左右，第三个参数是下；
margin:10px,20px,30px,40px;表示第一个参数是上，第二个参数是右，第三个参数是下，第三个参数是左，即顺时针顺序；

padding属性的参数规则同理

定位属性position

position有四种，分别是绝对定位absolute，相对定位relative，固定定位fixed，静态定位static。

默认是静态定位，按标准流的额方式排列。

设置定位-取值：

距离上top
距离左left
距离右right
距离下bottom

绝对定位absolute

特点：

以页面的左上角为原点
不保留原来的位置
z-index属性用来调整图层顺序，取值数值

实现一个子级元素以父级元素的的左上角为原点。
方法：父级相对，子级绝对（即在子级绝对的情况下，将父级调成相对）。

相对定位relative

特征：

扫描二维码关注公众号，回复： 5233769 查看本文章

以原来自身的左上角为原点
保留原来的位置
z-index属性用来调整图层顺序

固定定位fixed

将盒子固定在指定位置。
一般应用在广告的显示。

静态定位static

定位的默认是静态定位，按标准流的额方式排列。

ul无序列表在CSS中的应用

导航栏

导航栏书写一般用无序列表，即ul和li标签的组合。

准备工作：设置全部边界为0；
在daohang（ul的ID）中设置，list-style-type设置为none时，去除ul前面的圆点。
设置daohang中的内容居中：margin-left，margin-right 为 auto
设置daohang下的li的float属性为left
设置daohang中overflow:hidden;撑开ul盒子
daohang下的li设置边框，注意将li的宽度减少相应值
daohang下的li下的a超链接去除下划线：text-decoration:none;
设置li中的文字水平居中：text-aligh:center;
设置li中的文字设置行高：text-align:center;，是为了将文字垂直居中
设置a:hover当鼠标移上去时的动作，背景颜色background-color发生改变，确定一个颜色；再给a超链接设置宽度，将更改超链接整块

图片拼版

将图片一个个放进同一个ul中的li中，设置图片相同高度
设置ul左浮动float:left;
将ul设置overflow:hidden;
… …
在项目中拼版用div+CSS+table的方式拼版，如果拼的是展示性页面，用div+css；如果显示的是数据，用table；后台一般用table。

圆角矩形的实现

传统方法

做一个圆角的图片，切片（上中下），最后用table（三行一列）拼版，设置为background。

CSS方法

运用border-radius
代码：

div:nth-of-type(1){
	border-radius:10px;
}

表示应用在第1个div，圆的半径是10px

border-radius后的参数规则与margin类似。

兼容性如下：
border-radius兼容性
应用：设置圆形头像border-radius:50%;

CSS入门 学习笔记3