CSS面试题（更新中）

选择器，优先级

优先级：!important > 内联样式 style > ID 选择器 > 伪类选择器 = 属性选择器 = class 选择器 > 伪元素 = 元素(类型)选择器 = 关系选择器 > 通配符选择器

5 中类型：基本选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器

1 基本选择器

选择器	示例	示例说明
.class （类选择器）	.button	匹配 class 中包含 button 类的元素
#id （Id 选择器）	#app	匹配 id 为 app 的元素
element （元素选择器）	p	选择所有 p 元素
* （通配符选择器）	*	匹配任何元素

2 组合选择器

选择器	示例	示例说明
a,b (多元素选择器)	ul,ol	匹配 ul 元素或 ol 元素
a b （后代选择器）	div p	匹配 div 元素所有后代元素中的 p 元素
a>b (子元素选择器)	div>p	匹配 div 元素所有的直接子元素中的 p 元素
a+b （直接相邻兄弟元素）	div+p	匹配 div 元素之后的相邻同级的 p 元素
a~b (普通兄弟元素)	div~p	匹配 div 元素之后的同级的 p 元素，无论是否相邻

3 属性选择器

选择器	示例	示例说明
[attribute] 简单的属性选择器	[href][title]	选择同时带有 href 和 title 属性的元素
[attribute=value] 根据具体属性值选择	[href="www.betterjiang.com"][title="刘振江博客"]	选择 href 属性值为 www.betterjiang.com,并且 title 属性值为刘振江博客的所有元素
[attribute~=value] 包含	p[class~=”warning”]	选择 class 属性值中包含 warning 的 p 元素
[attribute^=value] 开头	img[src^=”person”]	选择 src 属性值以“person”开头的 img 元素
[attribute$=value] 结尾	img[src$=”.png”]	选择 src 属性值以”.png”结尾的 img 元素
[attribute*=value] 包含	img[src*=”dog”]	选择 src 属性值中包含子串”dog”的 img 元素
[attribute | =value] 等于 或以 value- 开头	img[src | =”dog”]	选择 src 属性值等于”dog”或以”dog-“开头的 img 元素

4 伪类选择器

• 状态伪类

选择器	示例	示例说明
:link	a:link	选择未访问的链接
:visited	a:visited	选择访问过的链接
:hover	a:hover	鼠标悬浮于 a 元素的状态
:active	a:active	选择被激活的链接
:focus	input:focus	选择当前拥有输入焦点的 input 元素
:not(selector)	:not(p)	选择不是 p 元素的元素

• 结构化伪类

选择器	示例	示例说明
:first - child	p:first-child	选择 p 元素的第一个子元素
:first-of-type	p:first-of-type	选择每个父元素是 p 元素的第一个 p 子元素
:last-child	p:last-child	选择所有 p 元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个 p 元素是其母元素的最后一个 p 元素
:not(selector)	:not(p)	选择所有 p 以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有 p 元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有 p 元素倒数的第二个为 p 的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有 p 元素第二个为 p 的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为 p 的元素
:only-child	p:only-child	选择所有仅有一个子元素的 p 元素
:target	#news:target	选择当前活动#news 元素(点击 URL 包含锚的名字)

• 表单相关

选择器	示例	示例说明
:disabled	input:disabled	选择所有禁用的表单元素
:enabled	input:enabled	选择没有设置 disabled 属性的表单元素
:in-range	input:in-range	选择在指定区域内的元素
:out-of-range	input:out-of-range	选择不在指定区域内的元素
:valid	input:valid	选择条件验证正确的表单元素
:invalid	input:invalid	选择条件验证错误的表单元素
:required	input:required	选择设置 required 属性的表单元素
:optional	input:optional	选择没有 required 属性，即设置 optional 属性的表单元素
:read-only	input:read-only	选择设置 readonly 只读属性的元素
:read-write	input:read-write	选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态。
:checked	input:checked	匹配被选中的 input 元素，input 元素包括 radio 和 checkbox
:empty	p:empty	匹配所有没有子元素的 p 元素

5 伪元素选择器

选择器	示例	示例说明
::first-letter （首字母，仅用于块级元素）	p::first-letter	匹配 p 元素的首字母
::first-line （第一行，仅用于块级元素）	p::first-line	匹配 p 元素的第一行文本
::before (在元素之前插入生成内容，并设置其样式)	h2::before { content:”@”, color: black }	在每个 h2 元素前插入一个黑色的@
::after （在元素之后插入生成内容，并设置其样式）	body::after {content:’The End’}	在 body 元素最后插入”The End“

弹性盒子（Flexbox） 布局

Flexbox 布局是 CSS3 中新增的布局模块，它改进了在容器中元素的对齐、方向、顺序，即使元素的尺寸是动态的，甚至是未知的。flex 容器的只要特征就是可以修改其内子容器的高、宽度，以在不同屏幕大小使用最佳方式填充可利用的空间。

flex 布局由父容器（flex container）和它内包含的项目（flex items）组成。

flex container（父容器） 属性 (6 个)

属性	说明	属性值
flex-direction	定义 主轴（main axis）方向	row | row-reverse | column | column-reverse
flex-wrap	项目在一条轴线上排不下，如何换行？	nowrap | wrap | wrap-reverse(第一行在下方)
flex-flow	flex-direction 和 flex-wrap 简写形式	<flex-direction> || <flex-wrap>
justify-content	项目在主轴上的对齐方式	flex-start | flex-end | center | space-between | space-around | space-evenly
align-items	项目在交叉轴（cross axis）上如何对齐	flex-start | flex-end | center | baseline | stretch
align-content	多根轴线的对齐方式，如果项目只有一根轴线，该属性无效	flex-start | flex-end | center | space-between | space-around

项目（flex items）的属性 （6 个）

属性	说明	属性值
order	定义项目的排列顺序，默认为 0，数值越小，越靠前	<integer>
flex-grow	项目的放大比例，如果有剩余空间。默认为 0	<integer>
flex-shrink	项目的缩小比例，如果空间不足。默认为 1
flex-basis	在分配多余空间之前，项目占据主轴的空间大小。默认为 auto	<length> | auto
flex	flex-grow, flex-shrink, flex-basis 的简写 默认值为 0 1 auto	[<flex-grow> <flex-shrink> || <flex-basis>] | none | auto
align-self	设置单独项目的对齐方式，可与其它项目不同。覆盖 align-items 属性	auto | flex-start | flex-end | center |baseline | stretch

浮动、定位

浮动

• 所有元素都可以浮动，且浮动元素会脱离文档流，但浮动元素依然位于父元素之内。浮动元素周围的外边距不会合并
• 浮动元素会生成一个块级框，不论这个元素本身是什么。 浮动元素的包含块就是其最近的块级祖先元素。
• 浮动元素左/右外边界不能超过其包含块的左/右内边界，浮动元素不可彼此重叠
• 当行内框与浮动元素重叠时，其边框、背景、内容都会在浮动元素 之上
• 当块级框与浮动元素重叠时，其边框、背景在浮动元素之下显示，而内容在浮动元素之上显示
• clear属性会清楚浮动，h3{clear:left}，确保 h3 的左边没有浮动元素。其工作原理: **会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上 会 忽略清除元素原先设置的上外边距。 **，所有要确保一个清除元素的顶端和一个浮动元素的底端之间有一定的空间，可以为浮动元素本身设置一个下外边距。

清除浮动

为什么要清除浮动？因为 子元素浮动引起父元素的内部高度为 0（高度塌陷）。清除浮动方法：

清除浮动方法	优势	劣势
设置父元素高度	极其简单	必须要知道父元素高度
在父元素中，追加一个空元素，设置 clear:both;	简单	添加无意义的空标签，破坏文档结构
设置父元素也浮动（因为 浮动元素会延伸，从而包含其所有的后代浮动元素）	简单，代码量少，没有结构和语义化问题	对后续元素有影响
为父元素设置 overflow 属性 hidden,或 auto （因为会触发BFC，从而实现清除）	简单，代码简洁	可能会无法显示要溢出的元素
【最优解】 使用伪类，生成空内容的方式 .clearfinx:{content: ''; dislay: block; clear:both;}	不破坏文档结构，无副作用	代码量多

元素的定位 （position）

• static （默认值）：元素在文档常规流中当前的布局位置，此时 top,right,z-index等属性无效。

• relative（相对定位）：相对于自身在文档流中所处的位置进行定位，参照物为自身，且仍处于文档流中，原先占有的空间仍保留，常作为绝对定位的参照物

• absolute（绝对定位）： 元素脱离文档流，不会为元素留空间，后面的元素会其原来的位置布局。其参照物是第一个属性不是 static 的祖先元素。绝对定位之后会产生块级框，通过top,left等属性进行定位

• fixed（固定定位）： 元素脱离文档流，定位参照物为屏幕视口，元素的位置在屏幕滚动时 不会改变。

• sticky （粘性定位）： 元素根据正常文档流进行定位，然后相对它的最近滚动祖先进行偏移。一个 sticky 元素会”固定“在离它最近的一个拥有”滚动机制“的祖先上（及祖先的 overflow 是 hidden,scroll,auto,overlay）。**简单说，祖先元素在滚动时，某个元素在 距其祖先元素的距离 达到 sticky 定位的要求时， 就会固定，不在滚动了 **

BFC(块格式化上下文)

BFC（Block Formatting Context）,它是一个独立的渲染区域，是块级盒子（Block box）的布局过程发生的区域，它规定了内部的 Block Box 如何布局，并且于这个区域外部毫不相干。

盒子（Box）

Box 是 CSS 布局的对象和基本单位，即一个页面是由多个盒子组成的。元素的类型和 display 属性，决定了盒子的类型。不同的盒子，会参与不同的 Formatting Context（格式化上下文）

• block-level box (块级盒子): display 属性值为 block,list-item,table的元素，会生成块级盒子，参与 block formatting context;
• inline-level box (行内盒子)： display 属性值为 inline,inline-block,inline-table的元素，会生成行内盒子，参与 inline formatting context;

格式化上下文 （Formatting Context）

它是页面中的一块渲染区域，并且由一套渲染规则，决定了其内子元素如何定位、以及和其他元素的关系和相互作用。 最常见的 由 BFC（Block Formatting Context） 和 IFC （Inline Formatting Context）

BFC 布局规则

1. 内部的 块级盒子 会在垂直方向，一个接一个的排列
2. 同一 BFC 内的 两个相邻 的 块级盒子 的 margin 会发生重叠，取最大值
3. 每个盒子（块级或行内）的 左/右 外边届 与 其包含块 的 左/右 内边距 相接触，浮动元素也是如此。
4. BFC 区域 不会 与 浮动元素 重叠，即 浮动元素 外边距不 重叠
5. BFC 是一个独立容器，容器内的子元素不会影响到外面的元素，反之亦然
6. 计算 BFC 的高度，浮动元素也参与计算 通过 设置overflow属性，创建了 BFC，并计算高度，浮动元素参与计算，达到清除浮动的效果。

创建 BFC

1. 根元素
2. 浮动元素 （元素的 float属性值不为 none）
3. 绝对定位元素 （元素的 position 属性值 为 absolute或fixed）
4. 行内块元素 (display : inline-block)
5. overflow值不为visible的块元素
6. 弹性元素 （display:flex元素 的 直接子元素）