css相关笔记（四）
1.当外边距塌陷时，其实就是垂直方向上的外边距折叠导致的影响，影响有三：◆相邻外边距都是正数时会取最大数作为外边距◆相邻外边距都是负数的时候会取绝对值最大的数作为外边距◆相邻外边距一正一负时会取两个外边距之和。解决这个影响的方法有两种：★给父容器设置边框（不推荐使用）★给父容器设置overflow：hidden。原理都是创建一个bcf添加一个独立的不受外边距折叠影响的环境。★让父容器脱离标准文档流的控制，原理是也是添加了一个独立的不受外边距折叠影响的环境。
2.★行内元素可以定义左右的【内外】边距，上下会被忽略掉，行内块儿元素和块儿级元素可以定义上下左右【内外】边距。
3.网页三大布局
◆文档流布局自上而下，自左而右，块级儿标签独占一行，行级标签连在一起，当行级标签占满一行后会换行。
◆浮动布局
◆定位布局
4.浮动的盒子不占空间，会脱离标准文档流的控制，而后面没有脱离标准文档流的元素会补上来，而脱离了标准文档流的盒子就浮在后面扑上来的元素上面，就像潜水运动员不潜水了到水面上呼吸，而它后面的潜水运动员如果继续潜水就会占据这个到水面上的潜水运动员原来的位置一样，浮动就像飞起来了一样。
5.多个浮动的盒子会在一行上显示，就像多个潜水运动员都浮在水面上不潜水了，并且他们都像转换成了行内块儿元素一样，只不过飞起来了。
6.行内元素只要浮动了就会转换为行内块儿元素，并且还会飞起来不占空间。由于没有直接使用display:inline-block;灵活，★所以不推荐这么使用，如果要将行内元素转换成行内块儿元素请使用display:inline-block;
7.浮动的特点
◆浮动和浮动一起，不浮动和不浮动一起(因为浮动飞起来了只能和飞行物一起)
◆浮动只会影响后面不浮动的元素(因为不占空间了)
◆浮动会以元素顶部为基准来对齐
◆浮动可以实现【块儿级或者行内】转换成行内块儿并且就连行内元素也能设置宽高了
◆浮动让块儿级元素在一行显示
8.浮动的三大作用
◆文字绕图：因为文字和浮动元素之间不存在重叠的关系，所以浮动可以用来解决文字绕图的问题。
◆制作导航：虽然使用行内元素转行内块儿也能做导航，但是导航使用无序列表来做更有语义化，更利于seo优化搜索引擎抓取。
◆网页布局
9.当元素浮动的时候如果后面的元素没有浮动，那么就会占据浮动元素原来的位置，但是文字和浮动元素之间不存在重叠的关系，于是就无法占据浮动元素原来的位置，所以浮动才可以用来解决文字绕图的问题，文字会在图片周围而不会被图片覆盖重叠(设计时就是如此)。
10.消除浮动带来的影响就叫清除浮动，父容器不设置高度时，其内部子容器全部都浮动飞起来了，那么父容器就会无法因子容器的高宽而获取高宽了，由于高度无法继承，父容器就看不见了，如果像让父容器不设置高度，由浮动的子容器中的内容来决定，那么设置父容器的overflow:hidden;创建一个bfc添加一个不受浮动影响的环境，那么父容器就算不设置高度，也会跟着飞起来的子容器的高宽而自适应的获取高宽。
11.voerflow:hidden 和 clear:both都是创建也给bfc添加一个不受浮动影响的环境，它们的区别在于 一个是设置在父容器上，作用于整个父容器中所有的子容器，一个是作用于 父容器的顶线到<div style="clear:both"></div>盒子之间的浮动元素，然后后面的浮动影响概不负责，所以不推荐使用clear:both来消除浮动的影响。
12.使用overflow:hidden时 如果子容器超出了父容器的范围（比如子容器设置了外边距过大），那么子容器超出父容器之外的部分都会不显示被抹掉，使用clear:both时 这个问题就不会出现，子容器超出父容器之外的部分依旧显示不会被抹掉。
13.使用伪元素来消除浮动的影响，其实原理也是添加一个盒子然后给盒子设置clear:both,只不过这回不是在父容器中浮动的子容器后面添加盒子，而是给父容器添加一个类的引用，并且作用于父容器的顶线到底线之间的距离。
★
/*给类设置一个伪元素*/
.clearfix:after{
content:"使用伪元素来清除浮动";
display:block;
height:0;
line-height:0;
background: #fff;
visibility:hidden;
clear:both;
}
/*兼容IE浏览器*/
.clearfix{
zoom:1;
}
调用的时候 只需要父容器添加对这个类的引用即可，不需要真正的去添加盒子了，实际也是在父容器的底线上边添加一个伪元素盒子，给这个盒子设置clear:both,强烈推荐使用。
14.定位
◆页面布局默认是标准文档流，属于静态定位，当页面元素脱离了标准文档流之后都会变成一个行内块儿元素，无论它之前是行内元素还是行内块儿元素。
◆绝对定位会脱离标准文档流，绝对定位默认从浏览器出发，如果它的母容器是【非静态定位】，那么它会改为从母容器出发，★一般用于子绝父相中，就是子元素是绝对定位，父元素是相对定位。
★子绝父相，父容器相对定位，不脱离标准文档流，所以就不会对原来的布局产生任何影响
，子容器绝对定位，会脱离标准文档流，于是还不会占用父容器中的位置，并且还可以随意的溜达，可用于设置热点图标、新闻图标、地图定位小图标之类的小图标。
◆相对定位不会脱离标准文档流，原来的位置会依旧占用着，就像正局长升迁了当了党委书记依旧兼任着正局长一职一样，相对定位默认从自己原来位置的原点出发。
◆非静态定位元素不像浮动元素那样，浮动元素会排列的整整齐齐，而定位元素和定位元素当他们的横纵坐标相同是会发生重叠的情况，重叠是渲染引擎渲染页面元素的顺序决定的，
只能设置不同的横纵坐标来进行排列它们，可以通过设置z-index来控制谁显示在上面，默认值为0，取值1-999，可以更大。
◆固定定位会脱离标准文档流，无论父容器是什么定位它都以浏览器为出发点，并且不会随着浏览器滚动条的滚动而消失在页面中。
★子绝父固，和子绝父相差不多，只不过让子元素拥有了父元素一样的能力，都可以固定在浏览器的页面上，不随着滚动条儿而滚动消失不见。
2.★行内元素可以定义左右的【内外】边距，上下会被忽略掉，行内块儿元素和块儿级元素可以定义上下左右【内外】边距。
3.网页三大布局
◆文档流布局自上而下，自左而右，块级儿标签独占一行，行级标签连在一起，当行级标签占满一行后会换行。
◆浮动布局
◆定位布局
4.浮动的盒子不占空间，会脱离标准文档流的控制，而后面没有脱离标准文档流的元素会补上来，而脱离了标准文档流的盒子就浮在后面扑上来的元素上面，就像潜水运动员不潜水了到水面上呼吸，而它后面的潜水运动员如果继续潜水就会占据这个到水面上的潜水运动员原来的位置一样，浮动就像飞起来了一样。
5.多个浮动的盒子会在一行上显示，就像多个潜水运动员都浮在水面上不潜水了，并且他们都像转换成了行内块儿元素一样，只不过飞起来了。
6.行内元素只要浮动了就会转换为行内块儿元素，并且还会飞起来不占空间。由于没有直接使用display:inline-block;灵活，★所以不推荐这么使用，如果要将行内元素转换成行内块儿元素请使用display:inline-block;
7.浮动的特点
◆浮动和浮动一起，不浮动和不浮动一起(因为浮动飞起来了只能和飞行物一起)
◆浮动只会影响后面不浮动的元素(因为不占空间了)
◆浮动会以元素顶部为基准来对齐
◆浮动可以实现【块儿级或者行内】转换成行内块儿并且就连行内元素也能设置宽高了
◆浮动让块儿级元素在一行显示
8.浮动的三大作用
◆文字绕图：因为文字和浮动元素之间不存在重叠的关系，所以浮动可以用来解决文字绕图的问题。
◆制作导航：虽然使用行内元素转行内块儿也能做导航，但是导航使用无序列表来做更有语义化，更利于seo优化搜索引擎抓取。
◆网页布局
9.当元素浮动的时候如果后面的元素没有浮动，那么就会占据浮动元素原来的位置，但是文字和浮动元素之间不存在重叠的关系，于是就无法占据浮动元素原来的位置，所以浮动才可以用来解决文字绕图的问题，文字会在图片周围而不会被图片覆盖重叠(设计时就是如此)。
10.消除浮动带来的影响就叫清除浮动，父容器不设置高度时，其内部子容器全部都浮动飞起来了，那么父容器就会无法因子容器的高宽而获取高宽了，由于高度无法继承，父容器就看不见了，如果像让父容器不设置高度，由浮动的子容器中的内容来决定，那么设置父容器的overflow:hidden;创建一个bfc添加一个不受浮动影响的环境，那么父容器就算不设置高度，也会跟着飞起来的子容器的高宽而自适应的获取高宽。
11.voerflow:hidden 和 clear:both都是创建也给bfc添加一个不受浮动影响的环境，它们的区别在于 一个是设置在父容器上，作用于整个父容器中所有的子容器，一个是作用于 父容器的顶线到<div style="clear:both"></div>盒子之间的浮动元素，然后后面的浮动影响概不负责，所以不推荐使用clear:both来消除浮动的影响。
12.使用overflow:hidden时 如果子容器超出了父容器的范围（比如子容器设置了外边距过大），那么子容器超出父容器之外的部分都会不显示被抹掉，使用clear:both时 这个问题就不会出现，子容器超出父容器之外的部分依旧显示不会被抹掉。
13.使用伪元素来消除浮动的影响，其实原理也是添加一个盒子然后给盒子设置clear:both,只不过这回不是在父容器中浮动的子容器后面添加盒子，而是给父容器添加一个类的引用，并且作用于父容器的顶线到底线之间的距离。
★
/*给类设置一个伪元素*/
.clearfix:after{
content:"使用伪元素来清除浮动";
display:block;
height:0;
line-height:0;
background: #fff;
visibility:hidden;
clear:both;
}
/*兼容IE浏览器*/
.clearfix{
zoom:1;
}
调用的时候 只需要父容器添加对这个类的引用即可，不需要真正的去添加盒子了，实际也是在父容器的底线上边添加一个伪元素盒子，给这个盒子设置clear:both,强烈推荐使用。
14.定位
◆页面布局默认是标准文档流，属于静态定位，当页面元素脱离了标准文档流之后都会变成一个行内块儿元素，无论它之前是行内元素还是行内块儿元素。
◆绝对定位会脱离标准文档流，绝对定位默认从浏览器出发，如果它的母容器是【非静态定位】，那么它会改为从母容器出发，★一般用于子绝父相中，就是子元素是绝对定位，父元素是相对定位。
★子绝父相，父容器相对定位，不脱离标准文档流，所以就不会对原来的布局产生任何影响
，子容器绝对定位，会脱离标准文档流，于是还不会占用父容器中的位置，并且还可以随意的溜达，可用于设置热点图标、新闻图标、地图定位小图标之类的小图标。
◆相对定位不会脱离标准文档流，原来的位置会依旧占用着，就像正局长升迁了当了党委书记依旧兼任着正局长一职一样，相对定位默认从自己原来位置的原点出发。
◆非静态定位元素不像浮动元素那样，浮动元素会排列的整整齐齐，而定位元素和定位元素当他们的横纵坐标相同是会发生重叠的情况，重叠是渲染引擎渲染页面元素的顺序决定的，
只能设置不同的横纵坐标来进行排列它们，可以通过设置z-index来控制谁显示在上面，默认值为0，取值1-999，可以更大。
◆固定定位会脱离标准文档流，无论父容器是什么定位它都以浏览器为出发点，并且不会随着浏览器滚动条的滚动而消失在页面中。
★子绝父固，和子绝父相差不多，只不过让子元素拥有了父元素一样的能力，都可以固定在浏览器的页面上，不随着滚动条儿而滚动消失不见。
