CSS面试题-盒模型、BFC、选择器及优先级

1、CSS

1-1、盒模型

1、什么是盒模型？

CSS基础框盒模型是CSS规范的一个模块，它定义了一种长方形的盒子。

2、盒模型的分类有？

盒模型从标准定义上分为标准盒模型和替代（正）盒模型，从元素类型上分为块级盒子和内联盒子

3、盒模型的切换：

通过box-sizing属性进行切换：
ie盒模型：box-sizing border-box
标准盒模型：box-sizing content-boX

4、盒模型属性设置，margin和padding值的设置：

1个值的情况：如10px4个方向都为10px:
2个值的情况：如10px20px上下10px左右20px
3个值的情况：如10px20px30px上10px左右20px下30px
4个值的情况：如10px20px30px40px上10px右20px下30px左40px(顺时针)

border值：border:lpx solid red三个值分别代表border-width,border–sy,border–color…可设置一个或多个属性的值

1-2、BFC

块格式化上下文（Block FormattingContext，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC解决的其实是高度塌陷的问题，即两个盒子之间发生了margin重叠（塌陷），边距以最大的为准。

常用的创建BFC的方式有如下几种：

• display:table-cell
• display:flex
• display:inline-block
• overflow:hidden
• position:absolute
• position:fixed

BFC解决的什么问题？

1. 垂直方向margin重叠的问题。
2. 使用F1oat脱离文档流，父元素高度塌陷问题

1-3、CSS选择器

用人话来讲CSS选择器就是用来对选定的页面元素进行样式修改。

CSS选择器有哪些？

CSS选择器从种类上可以分为如下11种：

选择器	示例
标签选择器	h1 { }
通配选择器	* { }
类选择器	.box { }
ID选择器	#uname { }
标签属性选择器	a[type] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }
后代选择器	article p { }
子代选择器	article>p { }
相邻兄弟选择器	h1 + p
通用兄弟选择器	h1 ~ p

CSS选择器优先级

什么是选择器优先级：cSs选择器优先级是基于不同种类选择器组成的匹配规则。

!important > 行内样式> ID选择器> 类、伪类、属性选择器 > 标签、伪元素选择器 > 通配符、子类选择器、兄弟选择器