面试(html&css)

行级块级元素

行级元素,不能设置宽高,水平排列
a,span,i,em,b,strong
块级元素,可以设置宽高
div p h1 ul li
行内快
img button text

常见选择器

类选择器
id选择器
标签选择器
后代
子代
兄弟 E+F
伪类选择器 nth-child
伪元素:after{}

优先级

内联 1000
id 100
class 10
标签 和伪元素 1
继承 0

清除浮动

 .clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both;
 visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

定位

static
relative
absolute
fixed
sticky 吸顶 粘性定位

盒模型

标准盒模型
宽度相当于width+padding+border
ie盒模型
宽度 = width

外边距合并

overflow:hidden
脱离标准流 浮动 定位
伪元素解决

::before {
            content: "";
            display: table;
        }

BFC块级格式化上下文

作用

规定了内部的盒子如何布局
清除浮动
防止margin重叠

布局规则

1. 内部的box会在垂直的方向,一个接着一个的放置,
2. Box的垂直方向的距离由margin决定,属于同一个BFC的相邻的Box的margin会重叠
3. 每个元素的margin box的左边和包含快的border box的左边相接触
4. 不会与浮动的盒子重叠
5. 是独立的容器,子元素不会影响到外面的元素
6. 计算高度时,浮动也参与计算

那些元素生成bfc

根元素html
设置float
绝对定位
overflow:hidden

重排 重绘 回流

重绘

元素外观被改变,但是没有改变布局(宽高)

重排

dom变化影响到了元素的几何属性,浏览器会重新计算

回流

浏览器发现某个部分的变化影响到了布局,需要倒回去重新渲染