前端常见面试题-css篇

1.css盒子模型

css3 引入了box-sizing属性，有三个值，border-box（IE盒子模型）、content-box（标准盒子模型）、padding-box。

W3C标准盒子模型：

• 设置width指的是content的宽度。
• 盒子宽度：border+padding+width

IE盒子模型：

• 设置width就是盒子宽度

注意： box-sizing：padding-box

• 宽度width指的是padding+width。
• 盒子宽度：border+width。

2.画一条0.5px的直线

height:1px;
transform:scale(0.5);

3、link和import标签的区别

• link属于html标签，页面被加载时，link会同时被加载。没有兼容性问题。
• @import是css提供的，会在页面加载完毕后再加载，只有IE5以上才能识别。
• 注意： link方式引入的样式的权重高于@import。

4、transition和animation的区别

两者都是随时间改变元素的属性值
区别：

• transition需要触发一个事件才能改变属性.为两帧，from…to…
• animation不需要触发任何事件随着时间改变属性值，是一帧一帧的。

5、BFC（块级格式化上下文，用于清除浮动，防止margin重叠）

独立的渲染区域，有一定的布局规则，子元素不会影响到外面。
生成BFC的条件：

• 根元素
• float不为none的元素
• position为fixed和adsolute的元素
• overflow不为visible的元素(auto,scroll,hidden)
• display为inline-block、table-cell、flex、inline-flex、table-caption的元素

6、清楚浮动

• 父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

 .clearfloat:after{
 display:block;
 clear:both;
 content:"";
 visibility:hidden;
 height:0}
 .clearfloat{zoom:1}

• 在结尾处添加空 div 标签 clear:both

<div class="parent">
 <div class="left">Leftdiv>
 <div class="right">Rightdiv>
 <div class="clearfloat">div>
div>
<style>
 .left {float:left}
 .clearfloat{clear:both}
style>

• 父级 div 定义 height
• 父级 div 定义 overflow:auto
• 父级 div 定义 overflow:hidden
• 父级 div 也一起浮动
• 父级 div 定义 display:table
• 结尾处加 br 标签 clear:both

7、如何垂直居中一个元素

• 绝对定位。通过与父元素的绝对定位来让自身实现垂直居中。
• 如果居中的是行内元素，可以设置父级 height 与 line-height 相等
• 设置 margin/padding 居中
• 相对位置偏移居中
• flex 居中 设置 align-items:center 即可

8、position定位

• static 默认 不定位
• relative 相对定位 相对于原来正常文档流的自己定位
• absolute 绝对定位
  当父元素无定位，相对于浏览器定位
  当父元素有定位，相对于离自己最近的有定位的包含框定位
• fixed 固定定位 始终相对于浏览器定位

9、使用CSS实现隐藏元素的方式有几种 ？

• Opacity:设置一个元素的透明度 .hide{opacity:0;}
• Visibility .hide{visibility:hidden}
• Display:确保元素不可见并且连盒模型也不生成 .hide{display:none}
• Position .hide{position:absolute; top:-9999px; left:-9999px;}
• Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

10、27. CSS 中的长度单位有哪些

绝对长度单位：

• PX 实际上是一个按角度度量的单位，是一个像素单位
• Em 是一个相对单位，相对本身字体大小
• Rem rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素

可视区百分比长度单位：

• Vw 是可视区宽度单位，1vw等于可视区宽度的百分之一，vw单位跟百分比很相似

11、28. CSS中选择器的优先级关系？

！Important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性