html知识点
伪类、伪元素
input、img、iframe不支持伪元素,因为伪类是要插入到容器内部一起渲染的,而这几个标签是不能包含其他元素的。
行内元素margin和padding无效问题
margin和padding对行内元素都是左右有效、上下无效,如果需要设置上下,需要把它改为非行内元素,例如inline-block
浮动
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
首先元素浮动后,产生的特性
1、块元素在一排显示
2、内联元素支持宽高
3、不设置宽度,内容撑开宽度
4、脱离文档流
5、提升层级半层
凡是float属性值不为none,元素display都被当做block(除去flex),但不是真正的块级元素,而是拥有了block元素的特性。
clear:both本质上是让自己不和浮动元素同在一行
bfc
块格式化上下文(BFC)有下面几个特点:
- BFC是就像一道屏障,隔离出了BFC内部和外部,内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则,不影响外部渲染,也不受外部渲染影响。
- BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说,外部任何浮动元素区域和BFC区域是泾渭分明的,不可能重叠。
- BFC在计算高度的时候,内部浮动元素的高度也要计算在内。也就是说,即使BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,高度是大于等于浮动元素的高度的。
- HTML结构中,当构建BFC区域的元素紧接着一个浮动盒子时,即,是该浮动盒子的兄弟节点,BFC区域会首先尝试在浮动盒子的旁边渲染,但若宽度不够,就在浮动元素的下方渲染。[看这里]