整理了一些css常见的面试题，如有问题，欢迎指正~
1、常见的块级元素
<div> <p> <h1>~<h6> <ul> <dl><dt><dd> <table> <form>
2、常用的display属性值及区别
display 属性规定元素应该生成的框的类型。
| 属性 | 值 | 描述 |
|---|---|---|
| display | inline | （默认值）此元素会被显示为内联元素，元素前后没有换行符。不能设置宽高，不自动换行， |
| inline-block | 行内块元素，可以设置行高，会自动换行。 | |
| block | 块级元素，此元素前后带有换行符。 | |
| table | 作为块级表格来显示（类似 table），表格前后带有换行符。 | |
| none | 此元素不会被显示 | |
| flex | 该对象作为弹性伸缩盒子显示。 |
3、常见的隐藏元素的方法及区别
| 方法 | 描述 |
|---|---|
| display:none; | 被隐藏的元素不占位置；看不见摸不着但它会导致浏览器的重排和重绘；不影响绑定的监听事件。 |
| opacity:0; | 被隐藏的元素占位置；看不见但是摸得着所以它只会导致浏览器重绘而不会重排；能够影响绑定的监听事件。 |
| visibility:hidden; | 被隐藏的元素占位置,看不见但是摸得着所以它只会导致浏览器重绘而不会重排，不影响绑定的监听事件。。 |
4、常用的清除浮动的方式
- overflow
.ele{
overflow:hidden;
}
- clear--clear属性可以设置一个元素的浮动状态：
| 属性 | 值 | 描述 |
|---|---|---|
| clear | left; | 表示元素下方不允许存在左侧浮动元素，即清除左浮动； |
| right； | 表示元素下方不允许存在右侧浮动元素，即清除右浮动； | |
| both; | 表示元素下方不允许存在任何浮动元素，即同时清除左右浮动； | |
| none; | 默认值）表示元素不清除浮动； |
3.伪元素：
.f-clear {
zoom: 1;
}
.f-clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
5、常用的垂直居中的方法
<div class='parent'>
<div class='child'></div>
</div>
- 绝对定位absolute
.parent{
width:100px;
height:100px;
position:relative;//相对定位很关键
}
.child{
width:40px;
height:20px;
position:absolute;
top:50%;
left:50%;
margin-top:-10px;
margin-left:-20px;
}
- 绝对定位absolute+transform
.parent{
width:100px;
height:100px;
position:relative;//相对定位很关键
}
.child{
width:40px;
height:20px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
- 弹性盒子模型flex
.parent{
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
- 行高line-height
.parent{
width: 400px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #000;
}
- 表格/假装表格display:table
.parent{
width: 400px;
height: 40px;
display: table;
background-color: #000;
}
.child{
color:#fff;
display: table-cell;
vertical-align: middle;
text-align:center;
}
6、为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
7、选择器的优先级
！important > 内联选择器 > ID选择器 > 类选择器 > 属性选择器 > 伪类 > 标签选择器 > 通配符选择器 > 继承选择器
8、常用的伪类选择器
伪类选择器 是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法。 伪类选择器 的具体用法就是向已有的选择器增加关键字，表示定位的HTML元素的状态信息。 伪类选择器的同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
:hover,:focus,:active,:link{}
:checked,:disabled,:enabled,:read-only,:read-write,:required{//enable匹配每个已启用的 <input> 元素。}
:empty{//匹配任何没有子元素的元素。}
:first-child{}
:last-child{}
:nth-child(n){//*n* 可以是一个数字，一个关键字，或者一个公式。}
:nth-of-type(n){//匹配父元素的第二个子元素。}
:only-child{//匹配父元素中唯一的子元素。}
:nth-last-child(n){//该选择器匹配父元素中的倒数第n个结构子元素。}
:nth-last-of-type(n){//选择器匹配同类型中的倒数第n个同级兄弟元素。}
:root{}
9、box-sizing的属性
元素的总高度和宽度包含内边距和边框(padding 与 border) ，box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
box-sizing:inherit|content-box|border-box
10、弹性盒子flex的常用方法
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
| 常见方法 | 区别 |
|---|---|
| flex-direction:row; | 子元素横向排列 |
| flex-direction:column; | 子元素纵向排列 |
| flex-wrap:wrap; | 换行 |
| flex-wrap:nowrap; | 不自动换行 |
| justify-content: center | space-around | space-between; | item在水平方向的对齐方式 |
| align-items: center | flex-end | flex-start; | item在垂直方向的对齐方式 |
