面试题（css）

持续更新中......

1、列举行内元素与块级元素

      块级：div ul li p ol h1-6 table tr td video audio form hr dl dd dt figure

      行内：a button span i sub sup select option textarea strong b s mark em big datalist

      行内块：img input

2、哪些样式是可以继承的

      所有元素可继承的样式：visibility cursor

      内联元素可继承的样式：所有字体样式（font-size family style  variant weight color line-height white-space text-direction text-transform letter-spacing word-spacing）

      块状元素可继承的样式：text-indent text-align

      列表元素可继承的样式：list-style list-style-type list-style-image list-style-position

3、不固定宽高元素的水平垂直居中

      （1）flex 父级：display:flex; align-items: center;  justify-content: center

      （2）定位 display:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)

      （3）table 父级：display: table; 子级：display: table-cell; vertical: middle; text-align: center

4、两种盒模型区别，怎么兼容

      （1）IE盒模型：定义的width=content+padding+border；盒子宽度=定义的width+定义的margin

      （2）标准盒模型：定义的width=content；盒子宽度=定义的width+margin+padding+border

       使用!DOCTYPE html声明，即可对浏览器进行兼容，解析为W3C盒模型

5、清除浮动的方式

      （1）clear:both

      （2）overflow:hidden

      （3）伪元素 .clearfix:after{ content:''; display: block; height: 0; clear: both; visibility: hidden; }

      （4）双伪元素 .clearfix:after,.clearfix:before { content: '' ; display: block}  .clearfix:after{ clear: both }

6、媒体查询，宽大于400，高大于800，修改元素样式

      @media screen and( min-width: 400 ) and ( min-height: 800 ){ color: red }

7、css绘制三角形

      原理：div宽高设置为0，使用border来制作三角形。