一.清除浮动
主要有四种方法
1.CSS设clear:both/left/right,表示左右两边或者左边,右边不能有浮动元素
2.父元素结束标签之前,插入空白块级元素来清除浮动
3.利用伪元素,对伪元素清除浮动,达到清除浮动的目的
4.利用overflow清除浮动,属性值可以是除visible以外任意值(不推荐,有时会出现问题,如Firefox使用overflow:auto会产生focus)
二.CSS栅格系统
1.Bootstrap栅格的容器有两种,.container(固定像素值的宽度)和.container-fluid(100%的宽度),row(.row)必须位于container的内部,column(如.col-md-6)必须位于row的内部。container、row、column必须保持特定的层级关系,栅格系统才可以正常工作。
2.container和container-fluid
(1).container类出现内边距和外边距,.container-fluid类没有。
(2).container类左右内边距一直是15px,屏幕小于等于767px的时候没有margin值,屏幕大于767px开始有左右margin值,屏幕宽度为768px和1000px的时候,margin值相对最小,分别是9px和15px,其他时候margin值随着屏幕的增大而增大(containe
r容器不止有15px的padding
,还有一个会随着浏览器宽度变化而变化的margin
)。.container-fluid类宽度不管屏幕宽度大小,一直是100%。
注意事项:
1.一行中列数超过12,自动换行
2.栅格类属性可以向上兼容,但向下不兼容,栅格类适用于与屏幕宽度大于或等于分界点大小的设备。比如设小屏幕四列一个元素,中屏,大屏都为四列一个元素,超小屏幕会一个元素占满一行。有时候,会需要将多种断点类型组合使用,以实现更细致的响应式设计。设计时,断点像素值越大的,对应代码越靠后。 例:
<div class="col-sm-6 col-lg-3">1</div>
在上面这样视口宽度由小变大的过程中,首先是保持默认的竖直堆叠,然后超过了sm的断点,sm的样式生效,变为一行两列的排版,再继续超过lg的断点后,lg的样式也生效,由于lg的样式代码定义在sm之后,所以会覆盖掉sm的样式,从而得到一行四列的排版。
3.Bootstrap栅格不应过度使用。例如,需要一个占据一整行宽度的元素时,不要加入类似.col-xs-12这样的元素。而是加一个块元素。
三.z-index视轴
html -> z-index负值盒子(绝对定位) -> 块状盒子 -> float 盒子 ->inline或者inline-block盒子-> z-index auto或者0的盒子(绝对定位) -> z-index正值盒子(绝对定位),视轴越来越高。
四.像素px
设备像素是一种物理概念,是设备中的物理像素。
CSS像素是web编程中的概念,指的是CSS样式代码中使用的逻辑像素。
CSS像素是根据设备像素比换算的。