CSS常见面试题（包含CSS3）

盒模型

把元素用一个矩形盒子表示，分为content，padding，border，margin，盒模型分为标准盒模型和ie盒模型

• 标准盒模型：width=content css设置：box-sizing：content-box
• ie盒模型：width=content+padding+border css设置：box-sizing：border-box

BFC

BFC（块级格式化上下文）是一个独立的渲染区域（或者称为块），块内部的元素和外部不会相互影响

开启BFC的条件

• float不为为none（不推荐）
• display：inline-block（不推荐）
• overflow不为visable
• position：absolute|fixed

应用

• 清除浮动，开启BFC的元素不会被浮动元素覆盖且能容纳浮动元素
• 解决子元素和父元素外边距重叠的问题
• 清除文字的环绕效果

清除浮动

• 给父元素开启BFC
• 在浮动元素的后面添加一个元素，设置其clear：both
• 给父元素添加一个伪元素：after{content:''; display:block; clear:both}

实现水平垂直居中

• .box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}（普通方式）
• 主轴justify-content：center，交叉轴align-items：center（flex中设置）

自适应布局

1. 流式布局：宽度使用百分比，高度用px固定。
   缺点：在有些大屏手机中页面宽度会拉的很长，显示效果很不协调，只有几个尺寸的手机显示效果较满意
2. 固定宽度做法：固定宽度，超出部分留白。
   缺点：在大屏手机中两边有一大部分空白，看起来页面特别小，操作按钮也小
3. 响应式布局：使用媒体查询，通过为不同的设备分别设置不同的样式@media print screen speech{}
   缺点：工作量大，维护性差，大型的复杂的网站不会使用
4. rem布局：整个页面使用rem为单位，然后使用js去动态计算根元素的font-size，这样所有设备的分辨率都能兼容 设备宽度/font-size=X rem 根据不同的设备宽度设置的font-size=设备宽度/X px

弹性盒布局

任何一个容器都可以设置为弹性盒布局，如果是webkit内核的浏览器要加上-webkit前缀

• flex-direction决定主轴方向：row（默认值）|row-reverse|column|column-reverse

• flex-wrap：nowrap（默认不换行）| wrap | wrap-reverse（换行，第一行在下面）
• flex-flow：direction和wrap的简写属性

CSS选择器有哪些

• 基本选择器：id选择器，类选择器，元素选择器，通配符选择器
• 关系选择器：子类选择器(>)，后代选择器(空格），兄弟选择器（+ ~）
• 复合选择器：交集选择器，并集选择器（以逗号隔开）
• 属性选择器：
• 伪类选择器：(:first-child),(:last-child),(:nth-child),(:first-of-type),(:not()),(:link),(:visited),(:hover),(:active)
• 伪元素选择器：（::before),(::after),(::first-letter),(::first-line)

选择器的权重（优先级）是怎么样的

内联样式>id选择器>类选择器>元素选择器>通配符选择器，还有内嵌样式>内部样式>外部样式

可继承的样式和不可继承的样式

• 可继承的样式：font-size，font-family，color
• 不可继承的样式：weight，height，margin，padding，border

CSS3新特性和伪类有哪些？

• 新特性：border-radius（圆角），box-shadow（阴影），text-shadow（文字阴影），line-gradient（线性渐变），border-images，媒体查询
• 新增伪类：（first-of-type），before和after，（::disabled),(checked)

less的优势

1. 支持嵌套，结构清晰，容易扩展
2. 可以方便的屏蔽浏览器私有语法的差异
3. 完全兼容CSS代码，可以方便的应用到老的项目中

Display有哪些哪些值?说明他们的作用

• block：转化为块级元素
• inline：转化为行内元素（默认）
• inline_block:转化为行内块元素
• none：元素不会显示
• table：元素以块级表格显示
• list-item：元素转化为行内样式，并添加列表样式
• inherit：继承父元素的display

position的值有哪些？

• static：默认值，没有定位
• absolute：绝对定位，相对于最近的开启了定位的父元素（或者说是祖先元素）进行定位，脱离了文档流
• relative：相对定位，相对于原本的位置进行定位，不脱离文档流
• fixed：相对于浏览器的窗口进行定位
• sticky：元素到达某个位置进行固定，不脱离文档流

请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

flexbox是一个用于页面布局的新CSS功能 ,规定框内的子元素是否可以伸缩器尺寸，任何一个容器都可以指定为Flex布局。

如何用CSS打造三角形?

宽高设置为0，给边框设置一个宽度，给其中一个边框设置可见的颜色，其他三个边框设置transparent

满屏品布局

上边一个div宽度设置100%，下边的两个div各设置为50%，设置其为浮动或者行内块元素

li与li之间有看不见的空白间隙是什么原因引起来的?

• 原因：浏览器会默认将行内元素间的空格|换行渲染成一个空格，此空格就占了一个字符的宽度
• 解决：1.全部li写成一行 2.将ul内的font-size设置为0（此方法在safari浏览器中无效），然后为li重新设定font-size 3.ul设置letter-spacing：-5px，li设置letter-spacing：normal

为什么要初始化css样式?

浏览器的兼容性问题,有些浏览器对标签的默认值是不一样的,如果没有 设置CSS初始化,浏览器之间的页面会有差异,最简单的方式:
*{ padding ; 0 ; margin : 0 ; }

CSS中的visibility属性的collapse属性是干嘛的?

大多数情况和hidden一样，在table中可删除一行或一列，但其兼容性不怎好

外边距合并是指的什么意思?

是指两个垂直的margin相遇,会合并在一起,margin高度是以最大的margin值为准;

移动端的布局用过媒体查询吗?

媒体查询主要用于响应式页面,媒体查询通过页面浏览设备的窗口宽度,完成相应的样式

grid布局

• 网格布局是把网页分为一个个网格
• 与flex相比，flex布局是轴线布局，只能指定项目在轴线上的位置，可以看作是一维布局。grid布局将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。grid布局远比flex布局强大

以上大都是个人理解总结，有些可能会用到第一人称进行叙述。大家切记不要死记硬背，可以参考答案，但是要经过自己的理解，遇到不懂的还是要自己去查查资料，最好能将自己理解的内容重新编辑成自己的话写下来，这样等面试官追问的时候也能说出自己的见解。祝大家都能通过面试，找到自己理想的工作。