清除浮动
清除浮动的本质
- 在标准流的布局中,很多时候父元素是不会设置高度的,直接由子元素来撑开高度。但是当你设置浮动后,因为子元素脱标了,所以不会再撑开父元素的高度,这样下面的标准流就顶上来影响布局。
- 在之前学习的布局中我们的做法是直接给父元素写死高度,让它有一个占位,但是实际工作中有些地方是不能设置高度的,那怎么解决浮动不占位的问题呢?答案就是清除浮动。
清除浮动方法
- 清除浮动其实也可以叫做闭合浮动,它的核心原理就是,在父元素最后插入一个小盒子,在父元素里把浮动的元素闭合起来,并告诉父盒子清除浮动。这样设置了清除浮动后,父元素就会自动检测浮动子元素的高度,不用专门给父元素设置高度了。格式如下:
选择器:{clear:left|right|both}
- 对应的就是左边,右边,两边清除浮动,其中最常用的是both
额外标签法
- 就是在盒子的最后加一个空标签(div,br,p等等),并给该标签设置清除浮动。但是这种方法很早的时候会用,现在用得很少了,也不推荐使用。
overflow清除浮动
- 语法:
overflow:hidden|auto|scroll
- 给父元素设置。使用overflow会触发BFC方式(后面会讲),从而达到清除浮动的效果,三个属性值随意写一个都能达到效果。这个方法有一定的弊端,建议谨慎使用。
after伪元素清除浮动
- 语法:
.clearfix:after {
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
- 解释:clearfix是一个通用的清除浮动类名,写好之后只需要调用这个类名到标签中即可。大概原理就是:在元素内的最后插入一个元素(不用再html结构中写),放入一个最简单的内容(空也是可以的),转换为块级元素,清除浮动,高度设为0,并隐藏这个块级元素的内容。
- 下面的一个是专门给ie6和ie7用的,因为它们不认识伪元素。*是只有ie6和ie7识别。
- 这个方法是现在应用得比较多的一种方法。
after伪元素空余字符法
- 语法:
.clearfix:after {
content:'\200B|\0200';
display:block;
clear:both;
height:0;
}
.clearfix {
*zoom:1;
}
- 原理和上一个是一样的,只是写法做了一些优化。在插入元素后,不给它设置值而是放入\200B或者\0200(零宽度空格)。因为是空的内容所以就不用在设置visibility:hidden来隐藏内容了,节省了一点代码量。
双伪元素清除法
- 语法:
clearfix:before, clearfix:after {
content:"";
display:table;
}
clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 这个方法的意思,给父元素一前一后插入一个元素,完全把里面浮动的盒子闭合起来,并在设置清除浮动。至于为什么要转换为table元素,现在还不能理解。强烈推荐使用这种方法来清除浮动。
定位
什么是定位
- 定位在页面布局中常用于盒子与盒子之间的层叠关系。比如,你想一个盒子压在另一个盒子上面来做一个立体效果的展示,这种效果使用标准流和浮动几乎是不可能实现的,只有定位才能胜任,并且js也和定位配合的最多。
定位的组成
- 定位是由边偏移和定位属性来配合使用的。并且边偏移只能应用在定位中。
边偏移
- 格式:
top|bottom|left|right
- 看名字就能理解,边偏移就是与上下左右四条边的距离,可以设置数值,也可以设置百分比。
静态定位
- 格式:
position:static
- 其实静态定位就是标准流的特性,让每个元素都按照顺序从上至下从左到右依次来显示。设置了静态定位后,边偏移就没有效果了。所以一般静态定位使用取消的定位的。
相对定位
- 格式:
postition:relative
- 相对定位的两个重要特性:
- 它是基于自己本身的位置来做移动的
- 他依然属于标准流,虽然移动了位置,但是原来的占位还是会保留
- 所以,它后面的盒子不会受到影响。
绝对定位
- 格式:
position:absolute;
- 绝对定位的四个重要特性:
- 它是基于父元素的位置来进行移动的,如果父元素没有设置定位,那么会基于浏览器的可视区来移动
- 它是完全脱标的,当移动后原来的位置就不再占位了
- 它移动完毕后,会固定位置,随着页面的滚动而滚动。
- 如果设置了绝对定位却不是边偏移,那么它首先会脱标,然后以标准流的显示方式,与上一个盒子的底边线对齐。
- 一般来说想要实现一个盒子在另一个盒子上,都是用绝对定位,因为它不占位置。
子绝父相的原理
- 子绝父相是在网页布局经常用到的一种方法,就是子元素使用绝对定位,父元素使用相对定位。为什么要这么做呢?
- 首先要确定一点,如果子元素要使用绝对定位,那么父元素也是必须要使用定位的,不然子元素就会以浏览器来移动了。
然后父亲定位的方式,首先排除静态定位,因为静态定位就是不定位,根本不考虑。
其次固定定位,因为固定定位不会随着页面滚动而滚动,这不符合正常布局理念,所以也排除。
最后就剩绝对定位和相对定位了,正常情况下网页都是以标准流的方式来显示的,所以一个盒子它上下都会有盒子。当父元素也是用绝对定位,那么它也不占位置了,就会影响下面的盒子,这也是不符合要求的。
相对定位才能占位置,所以最后也是最佳的选择就是父元素使用相对定位,这也就是子绝父相的由来。
- 首先要确定一点,如果子元素要使用绝对定位,那么父元素也是必须要使用定位的,不然子元素就会以浏览器来移动了。
让绝对定位的盒子垂直水平居中
- 因为绝对定位的盒子是脱标的,所以不能使用
margin:0 auto;
来实现水平居中,更不论垂直居中了。所以要让绝对定位的盒子垂直水平居中就要使用另一种方法:- 水平居中:先给盒子设置
left:50%
的左偏移,这样盒子的左边线就对齐父盒子的水平居中线,然后再让盒子往左走自身一半的距离,就实现了水平居中。给盒子设置margin-left:自身一半的负值
,就能让盒子往左走自身的一半距离。 - 垂直居中:同理,先给盒子设置
top:50%
的上偏移,让盒子的上边框对齐垂直居中想,然后再让盒子往上走自身一半的距离,就实现了垂直居中。给盒子设置margin-top:自身一半的负值
,就能让盒子往上走自身的一半距离。
- 水平居中:先给盒子设置