08-03CSS盒子模型、浮动、定位
盒子模型
行内元素和块级元素的区别：
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
块级元素和行内元素的分类：
文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。
从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
块级元素和行内元素的相互转换：
可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
标准文档流
即：一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，就需要脱离文档流。
脱离文档流的方式：
1、浮动 2、绝对定位 3、固定定位
浮动
1、浮动的元素脱离标准流。
2、浮动的元素相互贴靠。
3、div浮动不会挡住p中的文字
4、一个浮动元素没有设置width属性，那么将自动收缩为内容的宽度。
5、div中的左浮动的子元素宽度大于其父元素的宽度，会往下掉。
清除浮动：
1）使用额外标签标签法
在需要清除浮动的地方加入一个额外的标签。然后使用clear:both清除。(不推荐使用，因为会用到大量额标签)。
<div style="clear: both;width: 600px;height: 300px;;background: deeppink"></div>
2）使用overflow:hidden
（不推荐使用，如果浮动和定位结合起来使用的话将会发现冲突。）
<div style="overflow:hidden;width: 600px;height: 300px;;background: deeppink"></div>
3)使用当前最主流的清除方式：使用为元素来清除浮动
.clearfix:after {
content:"";
height: 0;
line-height: 0;
display: block;
visibility:hidden;
clear:both;
}
.clearfix {
zoom: 1;
}/!*用来兼容ie浏览器*!/*/
4）使用双为元素清除
.clearfix:after,.clearfix:before {
content: '';
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}/!*用来兼容ie浏览器*!/*/
外边距合并、塌陷
指的是：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
两个margin之间本身存在16px的间距。
1、外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2、如果两个盒子是包含关系，如果让子盒子在父盒子之内向下平移100px。会发生margin塌陷现象。
实现：
1）给父盒子设置padding-top : 100px。如果想要保持父盒子的大小不变。还需要设置：box-sizing : border-box;(较为麻烦)
2）给子盒子设置margin-top。(这里存在一个bug，如果父盒子没有边框，父盒子会随着子盒子一起往下掉。)
==》解决：a、给父盒子设置边框。border: 1px solid blue;
b、给父盒子设置属性：overflow : hiden;
3、空标签的上下外边距也会产生外边距的合并。
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
附注：
overflow属于定位属性。规定当内容溢出元素框时发生的事情。可能取值：visible,hidden,scroll,auto,inherit
hidden:将超出的内容隐藏起来;
scroll:将超出的部分放在滚动条之内;
auto:如果超出放在滚动条之内，
如果没有超出没有滚动条。
定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS position属性：
1、静态定位 position : static
所有的元素都是这个定位，这个元素一般情况下是不会单度使用，一般情况下是通过js来动态给元素清除定位。
2、绝对定位 position : absolute
可将一个盒子移动到页面的任意位置。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
#box_relative { position: absolute; left: 30px; top: 20px; }
绝对定位的元素的位置相对于：最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(即<body>)。
注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
3、相对定位 position : relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
#box_relative { position: relative; left: 30px; top: 20px; }
#box_relative { position: relative; left: 30px; top: 20px; //此处也可以使用内外边距等来定位 }
注意：使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
相对定位绝对定位的区别：
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
总结：在页面布局定位上，使用：子绝父相==》子元素使用绝对定位，父元素使用相对定位。
附注：如何让子盒子在父盒子中居中显示
关于页面元素的显示和隐藏
overflow: hidden; //将超出部分隐藏。
dispaly :none; //将元素直接隐藏，不会在页面上占据位置。
visibility(可见性):hidden; //将元素直接隐藏，会保留元素所在的位置。
图片后元素的居中问题
如果图片和文字显示在同一行，默认情况是图片的底部和文字的基线对齐。给图片设置margin-top文字会跟随图片往下移。
HTML标签的包含关系
元素的显示方式
块级元素：h系列,p,ul,li,ol,dl,dt,dd,div
行内元素：a,span,b,u,i
包含关系：
1、行内元素只能包含行内元素，块元素可以包含所有的行内元素以及部分块级元素。
2、p,h标签不能包含div
浙公网安备 33010602011771号