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

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

特征：

以原来自身的左上角为原点
保留原来的位置
```
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中的行间距
```
line-height
```
撑开盒子高度
设置li中的文字水平居中：
```
text-aligh:center;
```
设置li中的文字设置行高：
```
vertical-align:middle;
```
，是为了将文字垂直居中
设置
```
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:50%;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

CSS入门 学习笔记3