CSS2 总结

一、 设置盒子重叠的方法

1.margin的值为负

HTML相关代码：

<div class="wrap"></div>
<div class="box"></div>

css相关代码：

*{margin:0;padding:0;}
div{width:300px;height:300px;}
.wrap{ background: yellowgreen;}
.box{background: deeppink; margin-top:-300px;}

2.定位

HTML相关代码：

<div class="wrap"></div>
<div class="box"></div>

css相关代码：

*{margin:0;padding:0;}
div{width:300px;height:300px;}
.wrap{ background: yellowgreen;}
.box{background: deeppink; position:absolute; top:0; left:0;}

3.浮动

HTML相关代码：

<div class="box"></div>
<div class="wrap"></div>

css相关代码：

*{margin:0;padding:0;}
div{width:300px;height:300px;}
.wrap{ background: yellowgreen;}
.box{background: deeppink;float:left;}

二、overflow相关问题

1、属性
当父元素,子元素的高宽确定时,
overflow: auto; 父<子,出滚动条
overflow: scroll; 不管 父是不是<子,都出滚动条
overflow: hidden; 子溢出的都会被截掉

2.overflow作用在谁上面：

考虑 document html body;
1).html body中只有一个有overflow属性时,这个属性会传给document
2).html body都存在overflow属性时.body的overflow属性才能生效,
3).当html body都存在overflow属性时.body的overflow属性一直都会作用于body身上,html的overflow属性一直都会作用于document身上

3.禁止系统滚动条

html,body{
height: 100%;
overflow: hidden;
}

三、清除浮动的方法

1.方法一：给父级加高度（扩展性不好，兼容性极高）
2.方法二：给父级浮动，或者开启绝对定位，固定定位，但是左右的margin失效，（本质开启BFC），ie6 7 下，没有BFC（开启haslayout）
3. 方法三：overflow：hidden；正常浏览器底下开启BFC， 在ie7底下开启haslayout， 在ie6底下不管用
4.方法四：空标签清除浮动 clear：both；多出DOM结构，不利于后期维护
5.方法五：<br clear="all" /> 不符合 结构 样式 行为 分离的规范
6.方法六：伪元素：.clearfix:after{content:"";display:block;clear:both;}
ie6底下不认伪元素 .clearfix{zoom:1;}

四、定位

定位的偏移量
固定定位position:flex，参照浏览器窗口定位，与父元素没有任何关系

相对定位position:relative，参照自身在文档流中的位置

绝对定位position:absolute，如果有定位父级，参照定位父级定位
如果没有定位父级，参照初始包含块定位

五、文本省略号

display: block;
white-space: nowrap;/文本永不换行/
overflow: hidden;/多余部分需要被截取掉/
text-overflow: ellipsis;/文字最终以省略号形式展现/

六、行高

行高=字体的大小+行间距
默认行高：字体大小的1.2倍（不同浏览器吃力不一样）
文字垂直居中：line-height=height 20px
行高可以设置倍数，倍数*字体的大小 line-height：1；===line-height：16px;

七、垂直对齐

默认值：基线位于一行中父元素小写字母ｘ的底部
vertical-align: middle; 文字与图片的垂直居中（基线位于小写字母1/2处）
改变基线默认位置：1.font-size 字体大小改变 ，2.line-height

图片缝隙问题

方法一：父元素 font-size: 0;
方法二：<img src="img/1.jpg"><!--
--><img src="img/1.jpg"> 图片标签之间写注释符
方法三：img{float: left;}

八、元素水平对齐

块元素：margin: 0 auto;（给元素自身设置）
行内块，行内，文字：text-align: center;（注意给父元素设置）

九、元素垂直对齐

块元素：
方案一：
#box{position :absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

方案二：
#box{position:absolute;top:0;left:0;bottom:0;right:0;width:200px;height:200px;margin:auto;}

行内快：

父元素：line-height: 500px;
子元素：display: inline-block;

行内元素与文字：父元素：

line-height: 500px;