前端开发之CSS基础知识04

标签：ie浏览器   前端开发   检测   absolute   添加   一个   开发   dex   重点   

清除盒子浮动的4种方式：

需要清除的例子，一个父盒子包着两个子盒子，父盒子没有制定高，那么高度由里面的子盒子决定，如果里面多个子盒子想拍成一排，就需要加上浮动，但是加上浮动之后，会脱离文档流，父盒子检测不出来里面的子盒子后，高度就会变成0，那么父盒子下面的盒子，就会自动顶上来，占据父盒子的位子。

方式一：
在最后一个浮动元素的后面，添加一个div，样式设置为 clear:both；

方式二：
给父盒子设置样式:overflow:hidden

方式三：使用after为元素清楚浮动：
.clearfix:after{
content:"";
display:bolck;
height:0;
clear:both;
visibility:hidden;

}

IE浏览器为 .clearfix{
*zoom:1;

}

方式四：

.clearfix:before, .clearfix:after{

display:table;
content:"";

}
.clearfix{
clear:both;
}
.clearfix{
*zoom:1;
}

绝对定位和相对定位：

定位模式+边偏移(top,l,r,b)，注意！:不是margin。

定位模式->position:static 默认定位，加上就是取消定位

relative: 相对定位，相对于原文档流进行定位,浮起偏移后，原位置依然被占用

absolute：绝对定位，相对于上一个已经定位的父元素进行定位(一直往上找)，不占据文档流位置,如果父亲没有定位(默认不定位)，则依据当前document进行定位，
注意:如果子盒子是绝对定位的话，必须有一个相对定位的父盒子

fixed;固定定位，按照视口进行定位；

重点:当盒子通栏显示时(没有设置宽度)，如果此时进行浮动，或绝对、固定定位，那么会把盒子转换成行内块元素(行内块元素的宽高由内容决定)，若果恰巧此时盒子里面无内容(无文字，img，背景图不算)，那么盒子的宽就会变成0。
解决方法:width 100%;

注意:当多个决定定位或固定定位，需要定位到同一个位置时，遵循先后顺序，后浮动的会覆盖掉先浮动的.如果想指定某一个浮动元素在最上面，需要加上 z-index:1; 不需要单位，可2，3，4叠加。

注意：fixed如果想浮动到左上角，需要加上top:0;left:0;

前端开发之CSS基础知识04

标签：ie浏览器   前端开发   检测   absolute   添加   一个   开发   dex   重点   

原文地址：https://www.cnblogs.com/huasongweb/p/9630917.html