css-面试题

一、css盒子模型，对box-sizing属性的理解

盒子模型：content + padding + border + margin

盒子大小：content + padding + border

box-sizing：是一个css属性，决定元素元素的宽高计算方法

• content-box：元素的宽高(width、height)即为内容区的宽高(width、height)(默认)
• border-box：content + padding + border = 元素的宽高(width、height)，即内容区缩小了
• inherit：从父级元素继承

二、清除浮动，什么时候需要清除浮动，清除浮动的方式

浮动元素是脱离文档流的，如果不清除浮动，会造成父元素高度塌陷，页面布局混乱。

方式

1. 为父级元素设置高度

2. 为父级元素设置overflow:hidden：这个属性的设置会触发BFC机制，即块级格式化上下文，创建了BFC的元素是一个独立的盒子，它规定了内部如何布局，不受外部影响，也不会影响到外面元素，计算BFC的高度时，浮动元素也参与计算

3. 伪元素

   .fix::after{
   	content:'',
   	display"block;
   	clear:both;
   }
   

三、如何让一个不定宽高的盒子水平垂直居中

1. 定位

   .father{
   	position:relative;
   }
   .son{
       position:absolute;
       top:0;
       bottom:0;
       left:0;
       right:0;
       margin:auto;
   }
   

2. 利用css3属性

   .father{
       position:relative;
   }
   .son{
       position:absolute;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%)
   }
   

3. flex布局

   .father{
       display: flex;
       justify-content: center;
       align-items: center;
   }
   

四、px、em、rem的差别

px：相对单位，相对屏幕分辨率的单位

em：代表倍数，根据父级元素字号大小进行计算

rem：代表倍数，根据html根元素字号大小计算

五、position的值有哪些

static：默认值，无定位，正常显示

relative：相对定位，生成的元素是相对自身进行定位

absolute：绝对定位，生成的元素往上找相对除了static定位以外的第一个父级元素进行定位

fixed：固定定位，生成绝对定位的元素，相对于浏览器窗口进行定位

六、::before和:after中双冒号和单冒号有什么区别？

::：伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；

:：伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

七、display:none和visible:hidden的区别

区别	display: none	visibility: hidden
占据空间	不占据任何空间，渲染时该元素不存在(依然存在DOM树)	占据空间但不显示
渲染	会触发reflow(回流)，进行渲染	只会触发repaint(重绘)，因为位置没有变化，不进行渲染
继承属性	不是继承属性，元素及子元素都会消失	是继承属性，如果子元素使用了visibility: visible，则子元素会显示

八、css中的link和@import的区别

1. link属于XHTML标签；@import完全是css提供的一种方式，只能加载css
2. 加载顺序的区别，当一个页面被加载的时候，link引用的css会被同时加载，而@import引用的css则会等到页面全部被下载完再被加载
3. 兼容性的差别：@import是css2.1提出的所以老的浏览器不支持，link无兼容性问题
4. 当使用js去操作dom修改样式时，需要用link，因为dom控制不了@import

九、什么是响应式设计，基本原理是什么

响应式设计是一个网站能够兼容多个终端，而不是为每个终端做一个特定版本

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

十、为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的css样式的默认值是不同的，如果不进行统一的初始化会出现浏览器之间页面显示的差异

十一、css3有哪些新特性

border-radius、border-image、box-shadow、text-shadow、box-sizing、线性渐变linear-gradient、变换transform（旋转、缩放、位移、倾斜）、过渡transition、动画animation；实现媒体查询、flex布局、引入伪元素

十二、css优化、提高性能的方法有哪些

1. 抽取公共代码，移除无用css规则，减少代码量
2. 减少页面的重排重绘
3. 正确使用display属性，因为display的作用，某些组合样式无效，比如display:inline，再设置width、height、padding、margin等无效
4. 减少浮动和定位，不滥用web字体，因为体积较大，下载时阻塞页面渲染，损伤性能
5. 遵守盒模型规则
6. 不在选择符中使用id标识符，使用id会减少样式重用性以及与增大页面的耦合性
7. 注意规则的书写顺序：位置-大小-文字-背景-其他，因为reflow和repaint都很耗性能
8. 如果只有一项属性，最好不要使用复合属性，比如.bg{background:#ccc}应该写成.bg{background-color:#ccc}，前者会导致浏览器计算很多无用属性
9. 将css放在head中，如果css的位置在靠下的位置，会导致浏览器较迟加载样式，渲染时间也会推迟