7.清除浮动与定位

一.   清除浮动

浮动对页面的影响：

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

float: left;float: right;

清除浮动：clear:both;
    

１ 使用额外标签法：

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开

b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

２ 使用overflow属性来清除浮动：

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。

注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，溢出这个元素所在的区域以后会被隐藏（等我们学完overflow以后大家就明白了）。

３ 使用伪元素来清除浮动：

.clearfix:after {

              content:"";//添加内容为空

              height: 0;//内容高度为0

              line-height: 0;//内容文本的高度为0

              display: block;//将文本设置为块级元素

              clear: both;//清除浮动

              visibility:hidden;//将元素隐藏

         }

         .clearfix {

              zoom: 1;/*为了兼容ie6*/

         }

４ 伪元素：

伪元素：在页面上不存在的元素，但是可以通过css来添加上去。

种类：

:after（在。。。之后）

:before（在。。。之前）

注意：每个元素都有自己的伪元素。

二.   定位：

问题：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半。

作用：解决页面上盒子与盒子之间的层叠问题。

使用：

position:(位置)

取值：

１ static:静态的

position:static;静态定位。

所有的标准流中的元素都是静态定位。

２ relative:相对的

position：relative：相对定位。

使用的时候还要配合：top,left,right,bottom来使用。

特点：    如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。

以.two盒子原来的位置发生偏移，在水平方向向右移动了20像素，在垂直方向也向下移动 了20个像素。

1.0相对于原来的位置进行平移。

2.0设置了相对定位的元素在页面上占据了位置（没有脱离标准流）。

总结：想当年。

３ absolute:绝对的

position:absolute//绝对定位

使用的时候也要配合trbl属性来使用

特点：

 1.0如果这个元素没有父元素，那么将来trbl是相对于body来定位的

         2.0如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位的。

 3.0如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础。

 4.0绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）。

总结：看脸型。

将来在写页面的时候用的最多的既不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用：（规范）子绝父相。

子元素使用绝对定位，父元素使用相对定位。

案例：

如果小盒子在大盒子中要定位并且水平居中：

先left: 50%，将小盒子在大盒子平移大盒子的一半，再设置margin-left：-(小盒子宽度的一半),注意一定是负数，那么将来小盒子在大盒子中就可以水平居中了。

４ fixed：固定

position:fixed。

使用的时候也要配合trbl属性来使用

特点：

1）不管页面有多大，trbl永远是相对于浏览器的边框来的。

2）固定定位的元素也脱离了标准流（不在页面上占据位置）

总结：死心眼型。

三.   补充：

1.0如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。

vertical-align：设置文本与图片的对齐方式：

取值：   

middle:将中线对齐

2.0overflow:溢出

取值：

hidden：会将超出容器的部分隐藏起来

scroll：给容器加上滚动条

auto：根据具体情况判断容器是否要加上滚动条

3.0元素的隐藏：

overflow:hidden//将超出的部分裁剪掉

visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）

display: none;//可以将元素隐藏，并且在页面不占据位置。

diplay:none与display:block是一对反义词。

四.  emmet语法：

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

１ html:

１.1 生成结构的快捷键：

！+ tab,可以生成html的结构代码。

１.2 生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

１.3 生成同级元素：

标签名+标签名+标签名 “+”tab

１.4 生成子类标签

标签名>子标签名>子标签名>子标签名+tab

**生成与子类标签的同级标签

标签名>子标签名>子标签名>子标签名^^子标签名+tab

１.5 带固定数量的标签:

         ul>li*5+tab

１.6 带有序号名称    

ul>li.abc$*3 + tab

１.7 生成带有内容的标签：

ul>li>a{item}*5

１.8  生成带有属性的标签

ul>li>a[href=”#”]

２ css

          width:30px==>w30+tab