前端开发面试知识汇总-css1篇

本篇博客主要介绍自己在今年秋招准备前端开发面试时遇到的css布局相关问题，也是css布局一些比较基础的知识，希望对大家在前端面试或学习前端css布局相关知识能够有所帮助。

一、CSS盒模型

1. 盒模型简介

用来封装页面元素的矩形区域，HTML元素可以看作一个盒子。CSS中的盒模型包括IE盒子模型和标准的W3C盒子模型。如下图所示，一个盒子包含content（内容区）、padding（内边距）、border（边框）、margin（外边距）
一个盒子可以定义其height、width、padding、border、margin属性

2.IE盒子模型

IE盒子模型中定义的元素的height、width属性包含border和padding的大小即：
IE盒子模型中：
height = content_height + padding_top + padding_bottom + border_top + border_bottom。
width = content_width + padding_left + padding_right + border_left + border_right。
因此，IE盒子模型中盒子占有的高、宽即为定义的元素的height、width，增大padding和border会使内容区变小。

3.标准W3C盒子模型

标准W3C中定义的元素的height、width属性只是内容（content）的高度和宽度，即：
标准W3C盒子模型中：
height = content_height
width = content-width
因此，标准W3C盒子模型中盒子占有的高度、宽度为：
盒子Height = height + border_top + border_bottom + padding_top + padding_bottom。
盒子Width = width + border_left + border_right + padding_left + padding_right。

4.box-sizing取值以及含义

CSS3新增box-sizing属性可以定义盒子类型，取值如下
box-sizing：content-box | border-box | padding-box
content-box：即标准W3C盒子模型
border-box：即IE8盒子模型
padding-box:
height = content_height + padding_top + padding_bottom。
width = content_width + padding_left + padding_right。

二、元素类型

1.元素类型简介

常见元素类型有：
块级元素、行内（内联）元素、行内块元素、置换元素

2.块级元素

2.1块状元素以块的形式显示，在页面中显示为一个矩形块的样式。
2.2块状元素一般独占一行，块状元素默认自上而下顺序排列。
2.3可以定义块状元素的宽度和高度属性。
2.4块状元素可以作为承载其他元素的容器，可以装行内元素和其他块级元素。
2.5常见块级元素：
div-------------------最常用的块级元素
h1-h6---------------标题
p---------------------段落
ul--------------------无序列表
ol--------------------有序列表
li---------------------列表项
form----------------表单
dl-------------------和dt dd搭配使用的块级元素

3.行内元素

3.1行内元素不会独占一行，即行内元素的后一个元素会紧随行内元素排列（如果一行可以放下行内元素和下一个元素）。
3.2行内元素定义的宽高属性不能正常显示，行内元素的宽高会根据其内容展开。
3.3遵循盒子模型基本规则，可以设置padding、border、margin属性但行内元素设置左右margin有效，上下margin无效；设置上下左右的padding都有效。
3.4常见行内元素：
span-------------------常用内联容器
a------------------------超链接（锚点）
img---------------------图片
input-------------------输入框
label-------------------表单标签
textarea--------------多行文本输入框
select-----------------项目选择
em---------------------强调
strong-----------------粗体强调等

4.行内块元素

4.1行内块元素综合了块级元素和行内元素的特性
4.2拥有行内元素特性：不自动换行
4.3拥有块级元素特性：能对其设置宽高属性

5.置换元素

5.1一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换（替换）元素。即浏览器根据元素的标签和属性显示元素。
5.2置换元素是特殊的行内元素，由于其本身一般拥有固有尺寸（宽度，高度，宽高比），所以对其设置宽高属性有效。（面试可能会问）
5.3常见置换元素
img-------------------图片
input-----------------输入框
textarea------------多行文本输入框
select---------------项目选择
canvas-------------画布
6. 块级元素、行内元素、行内块元素转换
6.1通过设置display属性可以进行三种类型元素的转换。
display：block显示为块级元素
display：inline显示为行内元素
display：inline-block（css2.1新增值）显示为行内块元素
display：none该dom元素会被删除
display：list-item该元素会作为列表显示
display还可以设置一些表格属性，可以自行了解下~

三、样式优先级

1. css选择器类别

1.1基本选择器：

基本选择器	含义	备注
*	通用选择器，匹配所有元素	CSS2
E	元素选择器，匹配所有E类型的元素	CSS1
.foo	类选择器，匹配元素class属性为foo的元素	CSS1
#id	id选择器，匹配元素id属性为id的元素	CSS1

1.2组合选择器：

组合选择器	含义	备注
E,F	多元素选择器，匹配E类型，F类型的元素	CSS1
E F	后代选择器，匹配所有E类型的后代F元素	CSS1
E>F	子元素选择器，匹配E元素的子代F元素	CSS2
E+F	相邻选择器，匹配紧邻E元素的同级F元素	CSS2

1.3属性选择器：

属性选择器	含义	备注
E[att]	匹配拥有 attr 属性的所有 E 元素	CSS2
E[att=val]	匹配 attr 属性等于 val 的所有 E 元素	CSS2
E[att~=val]	匹配 attr 属性包含 val 值的所有 E 元素，各个值用空格隔开	CSS2

1.4伪类选择器：

伪类选择器	含义	备注
E:active	匹配处于活动状态的所有 E 元素	CSS1
E:link	匹配未被访问的所有 E 链接	CSS1
E:visited	匹配已被访问的E链接	CSS1
E:hover	匹配鼠标悬停其上的所有 E 元素	CSS2
E:focus	匹配获得输入焦点的所有 E 元素	CSS2
E:first-child	匹配 E 元素的第一个子元素	CSS2

1.5伪元素选择器：

伪元素选择器	含义	备注
E:before	在E元素之前添加内容	CSS2
E:after	在E元素之前添加内容	CSS2
E:first-line	匹配E元素的第一行	CSS1
E:first-letter	匹配 E 元素的首个字符	CSS1

2. css选择器优先级

2.1对于同一级别
同一级别，后写的样式会覆盖先写的样式。
同一级别，css引入方式不同，优先级不同：
内联（行内）样式>内部样式表>外部样式表>导入样式（@import）

四、垂直水平居中

1. 水平居中

/* 1.1行内元素相对块级元素居中 */
<div id="father">
			<span id="son">
				我是块级元素
			</span>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	text-align: center;
}
#son{
	background-color: coral;
}

/* 1.2行内元素相对非块级元素居中 */
<span id="father">
			<span id="son">
				我是块级元素
			</span>
</span>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	display:block;
	text-align: center;
}
#son{
	background-color: coral;
}

/* 2.1块级元素相对块级元素居中 块级元素已知宽度*/
<div id="father">
			<div id="son">
				我是块级元素
			</div>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	/*2-定位方法*/
	position:relative;
	/*3-flex布局方法
	display:flex;
	justify-content:center;
	*/
}
#son{
	width:100px;
	height:100px;
	/*1-margin方法
	margin:0 auto;
	*/
	/*2-定位方法 (-50 = -width_son/2);*/
	position:absolute;
	left:50%;
	margin-left:-50px;
	background-color: coral;
}

/* 2.1块级元素相对块级元素居中 块级元素宽度未知*/
<div id="father">
			<div id="son">
				我是块级元素
			</div>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	/*1-定位方法*/
	position:relative;
	/*2-flex布局方法
	display:flex;
	justify-content:center;
	*/
}
#son{
	height:100px;
	/*1-定位方法（transform）*/
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	background-color: coral;
}

2. 垂直居中

/* 1.1单行内元素相对块级元素居中 */
<div id="father">
			<span id="son">
				我是单行行内元素
			</span>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
}
#son{
	background-color: coral;
	line-height:200px;
}

/* 1.2多行行内元素相对块级元素居中 */
<div id="father">
			<span id="son">
				我是多行行内元素多行行内元素啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			</span>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	display:table-cell;
	vertical-align: middle;
}
#son{
	background-color: coral;
}

/* 2.1块级元素相对块级元素居中 块级元素已知高度*/
<div id="father">
			<div id="son">
				我是块级元素
			</div>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	/*2-定位方法*/
	position:relative;
	/*2-flex布局方法
	display:flex;
	align-items:center;
	*/
}
#son{
	width:100px;
	height:100px;
	/*1-定位方法 (-50 = -height_son/2);*/
	position:absolute;
	top:50%;
	margin-top:-50px;
	background-color: coral;
}

/* 2.1块级元素相对块级元素居中 块级元素高度未知*/
<div id="father">
			<div id="son">
				我是块级元素
			</div>
</div>
#father{
	width:200px;
	height:200px;
	background-color: antiquewhite;
	/*1-定位方法*/
	position:relative;
	/*2-flex布局方法
	display:flex;
	align-items:center;
	*/
}
#son{
	height:100px;
	/*1-定位方法（transform）*/
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background-color: coral;
}

3. 水平垂直居中