黑马程序员技术交流社区

标题: 学习经历 [打印本页]

---

作者: 何羽    时间: 2018-9-14 00:11
标题: 学习经历

网页布局的核心——就是用 CSS 来摆放盒子。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

1.    普通流（标准流）

o   块级元素会独占一行，从上向下顺序排列；

§  常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

o   行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

§  常用元素：span、a、i、em等

在标准流中，块级元素独占一行，如果想让块级元素在一行显示，可以通过将块级元素转化为行内块元素（display：inline-block）解决这个需求，但是每个块元素之间会有白色空白间隙。原因呢是div之前是独占一行两个div之间有换行。

这时候就可以用到浮动了

浮动可以让块元素没有间隙且在一行显示，

浮动的元素有三大特性

1 会脱离标准流

  

  浮动的元素会脱离标准流。

2

不占有原来的位置，下面的标准流占有原来的的位置

3

浮动会改变元素display属性，转化成类似行内块的块级框

浮动的用法

属性：none，默认值，不浮动。

属性：left，元素向左浮动。

属性：right，元素向右浮动。

如果父盒子没有高度，而子盒子浮动了，就会引起父盒子塌陷，高度变成0.

因为子盒子浮动不占有原来的高度，相当于父盒子内没有标准流来支撑高度。

这种问题可以通过清楚浮动来让父盒子拥有高度。

1 在子盒子最后添加一个空标签

<div style=”clear:both”></div>

2给父盒子中添加

overflow为 hidden|auto| scroll

3单伪元素

.clearfix:after {  content: ""; display: block;height: 0; clear: both; visibility: hidden; }   

.clearfix {*zoom: 1;}   /* IE6、7 专有 兼容性*/

4双伪元素

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

使用伪元素清楚浮动的方法是在标签内添加一个名为clear fix的class属性来调用。实际开发多用伪元素清除浮动，不会对结构带来影响。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2