一、浮动

浮动的影响

父级高度塌陷

清除浮动的方法

给父元素设置宽高（不推荐，高度一般由内容撑开）
给父元素设置溢出隐藏（不推荐，如果有下拉列表的话，会看不到）
```
overflow:hidden;
```

给父元素添加一个伪类after

.clear:after{
 content:"";//内容为空
 clear:both;//清除左右两边的浮动
 height:0;//高度为0
 display:block;//块元素
 visiblity:hidden;//不可见
}

给父元素添加一个没有意义的子元素div在最后，并且给子元素添加clear:both;的属性
```
div{
    width:0;
    height:0;
    clear:both;
}
```

二、margin的一些问题

margin-top

margin-top会把父元素一起推下来，解决方案

给父元素添加内容

比如加一个空格 &nbsp；（不推荐）
给父元素加一个边框
给父元素设置溢出隐藏
```
overflow:hidden;
```

margin 上下左右

同级关系margin外边距上下取最大的值，左右取和

三、居中

水平居中

文字的水平居中
```
text-algin:center;
```
块元素的水平居中

给元素设置一个宽度，设置水平外边距自动；
```
margin:0 auto;
```

垂直居中

文字的垂直居中

如果容器中是单行文字，设置容器的高度等于行高
```
height:50px;
line-height:50px;
```
如果容器中有n行文字，那么将行高设置为容器高度的n分之一
容器的垂直居中

给父元素设置一个相对定位 position:relative;

给子元素设置绝对定位,top设置为50%并且设置margin-top为子元素高度的一半的负数

例如结构如下
```
<div id="big">
    <div id="small">
    </div>
</div>
```
设置样式
```
#big{
    position:relative;
    height:100px;
}
#small{
 width:50px;
 heigth:50px;
    position:absolute;
    top:50%;
    margin-top:-25px;
}
```

总结一下垂直居中

例如 html结构如下

<div id="div_big">
    <div id="div_small">    
    </div>
</div>

父元素高度已知

子元素高度已知且为单行文本

用line-height

#div_big{
    width:100px;
    height:100px;
    line-height:100px;
}

子元素高度已知且为多行文本

设置垂直方向的margin值设置为（父元素高度-子元素高度）/2
```
#div_big{
    width:100px;
    height:100px;
}
#div_small{
      width:50px;
    height:50px;
    margin:auto;
}
```

子元素高度未知

position+transform

css如下

#div_big{
    width:100px;
    height:100px;
    position:relative;
}
#div_small{
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%)  translateY(50%);
}

父元素高度未知

子元素高度已知

position+margin

#div_big{
    position:relative;
}
#div_small{
    height=50px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-25px;/*子元素的高度除以2*/
}

子元素高度未知

position+transform

#div_big{
    position:relative;
}
#div_small{
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%)  translateY(50%);
}

四、定位

一般情况下用父相子绝

相对定位

position:relative;

特点：

占位置
相对于自己本身的位置，他不会脱离正常文档流。

绝对定位

position：absolute；

绝对定位会相对于某个点定位，这个点是根据祖先元素，
如果祖先元素有定位属性，那么就是相对于最近的祖先位置，
如果没有，它会一级一级往上找，直到找到浏览器x0，y0，这是就是
相对于浏览器的位置
脱离文档流，不占文档流位置

固定定位

position:fixed;

相对于浏览器的位置，可做固定到浏览器
脱离文档流，不占文档流位置

默认定位

position static

给绝对定位添加一个参照物（无意义）

定位中的层级问题

z-index：用来调整元素的层级关系

注意：

结构决定层级感必须是兄弟关系，父子关系，父亲永远在底下。
默认的都是0，数字越大层级越高。
使用这个属性该元素必须有定位属性（定位属性不能改变层级结构，
父元素始终会在子元素下面）
必须有定位属性才能使用

五、图片回车解析为空格

把容器的font-size设置为0；

如果有文字，则再单独设置元素font-size的值

六、隐藏

5个隐藏：

display：none；消失（不占位置）（不能设置过度）
visibility：hidden；隐藏（占位置）（不能设置过度）
opacity：0-1；透明度，可以设置过度
overflow：hidden；溢出隐藏（要写宽度）
background-color：rgba；仅背景透明，文字不影响

color有继承，写字体颜色时注意

CSS的一些重点