css进阶讲义.docx
《css进阶讲义.docx》由会员分享，可在线阅读，更多相关《css进阶讲义.docx（9页珍藏版）》请在冰豆网上搜索。
css进阶讲义
1CSS盒模型
网页中所有的元素都是矩形的，所以可以看出一个个盒子。
网页由多个盒子组成。
盒子：
边框+内边距+内容区域+外边距组成。
IE6的盒模型的bug：
背景色不能穿透边框。
而且如果不设置争取的doctype的话，ie6显示的盒子也不是标准的盒子。
1.1边框
第一种外边距合并的情况：
当两个块级元素，上面块级元素拥有下外边距，下面的块级元素拥有上外边距的时候。
两个盒子上下的距离会取两个边距的最大值，而不是把两个盒子的边距进行加和处理。
第二种外边距合并的情况：
当块级元素进行嵌套的时候，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和复盒子的上外边距会进行合并。
1.2浮动
标准流就是浏览器默认布局的方式，也就是从上往下，从左向右的默认的排班布局的方式。
浮动布局方式
浮动的本质：
就是解决图片和文字并排的格式问题。
元素浮动后，会脱离标准流，但是还会影响标准流的布局。
没有设置浮动之前：
总结一下：
浮动的元素会不占据标准流的空间。
但是会影响标准流中的文本的排版。
浮动的特性
1.浮动脱离标准流，不占位置，但会影响标准流。
浮动只有左右浮动。
2.浮动的元素A排列位置，跟上一个元素（块级）有关系。
如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。
这样才能一行对齐显示。
4.浮动根据元素书写的位置来显示相应的浮动。
5.元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。
元素的大小完全取决于定义的大小或者默认的内容多少。
也就是具有了包裹性。
6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。
注意：
如果一个标准流的父盒子，没有设置高的情况下，所有的子盒子进行了浮动，那么父盒子的高度会塌陷成0.
解决浮动破坏性造成的高度塌陷的问题
第一种解决高度塌陷的方法就是使用overflow。
在父盒子上设置overflow：
hidden；之后，父盒子具有的包裹性，就不会出现高度塌陷的问题了。
Overflow详解
当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性
属性
描述
visible
内容不会被修剪，会呈现在元素框之外（默认值）
hidden
溢出内容会被修剪，并且被修剪的内容是不可见的
auto
在需要时产生滚动条，即自适应所要显示的内容
scroll
溢出内容会被修剪，且浏览器会始终显示滚动条
Overflow可以触发元素的BFC，可以让元素具有独立的排版的空间和权限，在bfc内部所有的元素都依据父元素进清除浮动
清除浮动，就是让当前元素左右两边都不存在浮动元素的时候才把元素放到标准流汇中显示。
Clear：
left;清除左浮动，
清除右浮动:
clear:
right;
清除左右浮动：
clear:
both;
常用的几种清除浮动的方法：
第一种：
隔墙法。
第二种综合的clearfix的方法：
使用overflow进行包裹所有的浮动子元素。
有误伤。
Ckearfix的使用场景：
1、父盒子要把所有的子盒子包裹住。
2、父盒子是包裹正行的div元素，需要前后进行清除浮动。
.clearfix{
display:
table;/*触发bfc，div具有的包裹性*/
}
.clearfix:
before,.clearfix:
after{
content:
"";
display:
block;
clear:
both;
height:
0;
visibility:
hidden;
}
.clearfix{
_zoom:
1;
}
行排版和布局，所有父元素具有了包裹性，这就是解决高度塌陷问题的原理。
比如：
浮动也可以触发bfc，再有：
定位、overflow、display：
table、table-cell...
4定位
1.3定位概述
默认的文档流的布局的方式决定了元素的位置就是静态的定位方式。
Static。
可以通过positionCSS属性来改变元素的定位的方式。
1.3.1相对定位：
相对于原来的位置进行偏移。
1.3.2绝对定位：
根据父容器（必须是非static的定位的容器）进行位置定位。
一般原则：
子绝父相
1.3.3固定定位：
固定在浏览器的某个位置，浏览器scroll时不会发生变化。
1.3.4Zindex
Zindex可以改变元素层叠的位置。
Zindex越大，越靠近用户。
页面zindex规划案例：
一般的zindex都会在100区间内。
如果是页面比较顶部的用200区间的
如果是广告，那么需要最顶部，则是300区间
5三列自适应布局
DOCTYPEhtml>
26三列自适应布局sub-nav