一、css属性
1、层叠性
css样式的叠加
2、继承性
子元素会继承父元素的某些样式
除了边框属性、外边距属性、内边距属性、背景属性,定位属性、布局属性、元素高度属性不会被继承外,其他默认属性都会继承。
div继承的是父元素body的高度,body是继承html的高度,html是继承的浏览器屏幕的高度。
3、优先级
就近原则,行内样式优先
选择器优先级:id选择器>类选择器>标记选择器
css定义了一个!important命令,该命令增大优先级
二、块级格式上下文 BFC
css定位方式有普通流、浮动和绝对定位。
BFC属于普通流,是元素的一种属性,拥有BFC的元素,相当于一块独立的渲染区域。
触发BFC:
1、根元素(<html>)
2、浮动元素(元素的float不是none)
3、绝对定位元素(元素的position为absolute或fixed)
4、display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、或inline-flex、grid、inline-grid
5、overflow值不为visible的块元素
6、contain值为layout、content或paint的元素
7、多列容器(元素的column-count或column-width不为auto,包括column-count为1)
BFC可以:
1、避免外边距重叠,一般情况下两个相邻div外边距会发生重叠现象,取最大的那个。为了避免这种情况的发生,可以将两个div放置于不同的BFC中,两个BFC的内容将不会互相干扰。
2、清除浮动
为父元素添加overflow:hidden属性
3、组织元素被浮动元素覆盖
在被覆盖的元素中添加BFC属性
三、css层叠上下文
影响z-index,z-index需要结合position属性使用,z-index的数值就是决定元素在z轴方向的层级。
如果层叠上下文元素没有设置z-index,那它也要比普通元素级别高,默认层叠等级为z-index:0。设置定位后,它默认的层级比一般元素高
层叠上下文可以嵌套。
四、盒模型
1、content-box
标准盒模型 不包含border和padding
width: 内容的宽度
height: 内容的高度
2、border-box
IE盒模型 ,包含border和padding
在ie8+浏览器中,默认标准盒模型,可以添加属性box-sizing:border-box转变为IE盒模型。
五、line-height和vertical-align
在 CSS 中有四种内联盒子,分别是:包含框containing box
,行框line boxes
,行内框inline boxes
,内容区content area。
元素默认情况下的对齐方式是通过基线baseline
对齐
line-height: 行高。只影响行内元素和其他行内内容,不会直接影响块级元素,会影响到块级元素的内联内容。在块级元素上声明line-height
会为该块级元素的内容设置一个最小行框高度。%代表当前字体尺寸的百分比行间距。
小知识:
为什么内容会将盒子撑开?
在inline box
模型中,line boxes
是看不见的,它的作用就是包裹每行文字。所以一个没有设置height
属性的div
的高度就是由一个一个line boxes
的高度堆积而成的。
vertical-align: 垂直方向布局。对块级元素无效