New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS 面试常问题 #46

Open

shuangmianxiaoQ opened this issue Jul 20, 2019 · 0 comments

Labels

CSS 相关

Owner

shuangmianxiaoQ commented Jul 20, 2019 •

edited

Loading

1. 盒模型

页面渲染时，DOM元素所采用的布局模型，通过box-sizing设置

content-box（W3C 标准盒模型）：width = content
border-box（IE 盒模型）：width = content + padding + border

2. BFC

块级格式化上下文，是一个独立的渲染区域，处于BFC内部的元素与外部元素相互隔离，使内外元素的定位不会相互影响

创建方式

html 根元素
绝对定位元素，position为absolute/ fixed
浮动元素，float不为none
overflow不为visible
display为inline-block/ table/ flex

BFC 特性

同一BFC的两个相邻Box垂直排列
同一BFC的两个相邻Box的margin重叠
形成了BFC的区域，不会与float元素的区域重叠
计算BFC高度时，浮动元素也会参与计算
文字层不会被浮动层覆盖，而是环绕于四周

BFC 应用

阻止margin重叠
清除浮动
自适应两栏布局
阻止元素被浮动元素覆盖

层叠上下文

选择器优先级

!important > 内联样式 > id选择器 > 类/属性/伪类 > 元素/伪元素 > 其他
相同权重，后写的生效
选择器从右往左解析

The text was updated successfully, but these errors were encountered:

shuangmianxiaoQ added the CSS 相关 label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment