前端面试——2.CSS部分
CSS
1. 盒子模型
CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
box-sizing: content-box（width不算border和padding）、border-box（padding和border算入width）、padding-box(padding算入width)
标准盒子模型：宽高不计算border和padding
IE盒子模型：把padding和border计算到宽高里面
2. 画一条 0.5px 的线
- 采用 meta viewport 的方式
通过设置视口宽度为设备宽度，初始缩放和最大缩放的值都为1，并禁止用户缩放。使得宽度视口中的1px就是物理像素1px - 设置一条高为1px的线，通过
transform:scaleY(0.5)实现高度缩小到原来的一半，就是0.5px
div{
height: 1px;
width: 200px;
background-color: red;
transform: scaleY(0.5);
}
3. link 标签和 import 标签的区别
- link标签是html标签，@import是css提供的
- 页面加载时遇到link标签会同时加载，而@import会等页面加载结束后加载
- link是html标签，没有兼容性问题，而@import只有IE5之后才能识别
- link方式样式权重高于import
4. transition 和 animation 的区别
- transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
- animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
- animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
- animation 可以结合 keyframe 设置每一帧，但是 transition 只有开始和结束状态；
- 在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；
transition 过渡代码示例
div
{
width:100px;
transition: width 2s;
}
div:hover {width:300px;}
animation 动画代码示例
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
先通过@keyframes定义一个动画方法，from中写入元素初始样式，to中写入元素结束样式
通过animation调用定义好的动画方法，实现动画效果
5. Flex 布局
Flex又称弹性布局，布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。
而Flex布局在父元素上（亲爹）添加display：flex，可以使父级的布局模式转换成弹性布局模式。其中默认主轴是水平方向的，而弹性容器中的弹性盒子都是按照主轴方向排列的。
- 通过
justify-content修改主轴对齐方式 - 通过
**align-items**修改侧轴对齐方式 - 通过在子元素中
align-selfs修改当前子元素的对齐方式 - Flex伸缩比，flex : 整数值，表示占用父级盒子剩余尺寸的份数
- 通过
flex-direction修改主轴的对齐方向，row表示主轴横向，col表示主轴竖向，相应侧轴也会随之改变 - 通过
flex-wrap= wrap使得弹性盒子换行排列 - 在多行flex容器中，设置
align-content实现分行之后的多根轴的排列样式，注意：在单行容器中是不生效的
6. 什么是BFC
BFC又称块级格式化上下文，是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局，用于清除浮动，防止 margin 重叠等。
通过一些属性来触发BFC，使得BFC中的子元素不受外面的元素影响。具体触发条件有：
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
BFC的具体规则
BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签- 垂直方向的距离由margin决定， 属于同一个
BFC的两个相邻的标签外边距会发生重叠 - 计算
BFC的高度时，浮动元素也参与计算
7. 垂直居中的方法
- 通过vertical-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
- 通过display:flex实现CSS垂直居中，再通过align-items: center设置侧轴居中
- 给父元素display:table，子元素display：table-cell的方式将子元素设置为父元素表格的单元格，然后设置vertical-align:middle;可使多行文字垂直居中。
- 通过子绝父相的定位方式，先将子元素定位到top:50%,left:50%的位置，再通过transform:translate(-50%,-50%)移动到垂直居中位置
- 通过子元素设置margin：auto实现居中
8. 说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度
行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin会失效，宽高由内容撑开
9. 多行元素的文本省略号
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
- -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
- display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
10. visibility=hidden, opacity=0，display:none的区别
opacity=0 ：不透明度0，表示全透明，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件
visibility=hidden：该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display:none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
11. 双边距重叠问题
相邻的标准流的块级元素垂直方向上margin会重叠
两个相邻的外边距都是正数时，重叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
12. position 属性比较
固定定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素会和其他元素重叠。
相对定位 relative：
如果对一个元素进行相对定位，然后，通过设置top或left设置垂直水平位置，让这个元素“相对于”它的起点进行移动。 **在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。**因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。**absolute 定位使元素的位置与文档流无关，因此不占据空间。**absolute 定位的元素和其他元素重叠。
13. 浮动清除
当父类没有高度同时子类浮动时，因为父类没有高度，浏览器默认看不到父类，同时因为子类浮动不再标准流中，因此后面的内容自动移到前面，导致排版异常的情况，解决方法：
-
直接给父级强制增加高度（最暴力）
-
使用带 clear 属性的空元素，父类元素的最后一个位置添加一个空元素如
，并在 CSS 中赋予
.clear{clear:both;}属性即可清理浮动。缺点是增加了额外的结构元素。 -
使用 CSS 的 overflow 属性，给浮动元素的容器添加
overflow:hidden;或overflow:auto;。原理是构建了BFC（块级格式化上下文）。缺点是不是所有时候都能生效。 -
给浮动的元素的容器添加浮动，给父类元素添加浮动，使得父类也脱离标准流。缺点是有可能打乱父类的排列顺序。
-
使用 CSS 的:after 伪元素，直接复制，给对应父元素添加class="clearfix"类选择器
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; }
14. css3新特性
- css3边框：
- border-radius：CSS3圆角边框。
- box-shadow：CSS3边框阴影。
- border-image：CSS3边框图片。
- CSS3背景：
- background-size： 属性规定背景图片的尺寸。
- background-origin ：属性规定背景图片的定位区域。
- CSS3 平面转换
transform- transform : translate()：元素从其当前位置移动
- transform : rotate()：元素顺时针旋转给定的角度。
- transform : scale(): 元素的尺寸会缩放
- transform : rotate(): 元素元素围绕某点以给定的度数进行旋转
- CSS3 过渡 transition
- CSS3 动画 animation
15.CSS 选择器有哪些，优先级
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
优先级顺序为：id 选择器 > class 选择器 > 标签选择器
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代包含祖先相同的属性则祖先元素的相同的样式属性会被覆盖。
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式
16. css 动画如何实现
创建动画序列，需要使用 animation 属性
- 首先通过@keyframes定义一个动画过程，from方法中写入原来元素的样式，to方法中写入结果元素的样式
- 在需要动画的元素添加animation：定义的动画名，去调用定义好的动画
transition属性也能实现过渡动画，但过渡动画只有开始和结束两个状态，中间的状态不受控制。且transition需要搭配事件才能触发。
17. float 的元素，display 是什么
浮动的元素都转换成块级元素，所以display为block
18. 多重实现三栏布局的方法
- float布局：首先三个div，左div左浮动，右div右浮动，而中间栏通过margin-left和margin-right强制移动到中间位置。
- BFC布局：同float布局，先设置左右div的位置，而中间div不作处理，此时左右div脱标，而中间div仍处于标准流，会占一整行，因此给中间div添加overflow:hidden，使其转换成BFC，达到自适应效果。
- flex弹性布局，给父类添加display:flex，这样三个子div就会实现并排布局
- position定位，父类采用绝对定位，子类采用相对定位，定位到合适区域
- Table布局，父类通过display:table，三个子类添加display:table-cell，将子类设为父类表格的单元格，
19. calc 函数
calc() 函数用于动态计算长度值 width: calc(100% - 10px)
20. display：table 和本身的 table 有什么区别
display：table 的 css 声明能够让一个html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定 义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致的语义化问题。
用 div+css 编写出来的文件比用 table边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table的嵌套性太多，没有 div 简洁
21. 设置一个元素的背景颜色，背景颜色会填充哪些区域
background-color 设置的背景颜色会填充元素的 content、padding、border 区域。填充整个IE盒子区域。
22. 属性选择器和伪类选择器的优先级
属性选择器和伪类选择器的优先级相同
23. inline-block、inline 和 block 的区别
Block ：是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直方向都有效。
Inline：是行级元素，设置 width 和 height 无效，宽高由内容撑开，margin 在竖直方向上无效，padding 在水平方向垂直方向都有效，前后无换行符 。
Inline-block：是行内块元素，有行级元素和块级元素的特征。能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符。
24. 重绘和重排
DOM 的变化影响到了元素的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排。浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。
回流又称为重排，就是页面的布局，将一个个盒子引入页面。当渲染树中的元素尺寸、结构、布局等发生改变时浏览器都会重新渲染部分或者全部文档的过程称为回流。
重绘就是根据内容对页面进行绘制，由于元素样式的改变并不影响它在文档流中的位置和文档布局称为重绘（比如color、background-color、outline等）
简单来说，影响页面布局的就是回流，不影响页面布局的称为重绘，重绘不一定引起回流但回流一定会引起重绘
会导致回流的操作有：
- 页面首次刷新
- 浏览器窗口大小发生改变
- 元素大小位置发生改变
- 改变字体大小
- 内容变化（input输入框输入，图片大小改变）
- 激活css伪类（:hover）
- 脚本操作DOM（添加或删除可见的DOM元素）
25. 怎么去减少重绘和重排
重绘重排的代价：耗时，导致浏览器卡慢
减少重绘和重排：
- 减少直接操作dom元素，改用className用于控制
- 尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
- 当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发重排的
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
26. overflow 的原理
当元素设置了 overflow 样式且值部不为visible 时，该元素就构建了一个 BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的。
27. display属性
display 属性可以设置元素的内部和外部显示类型
外部显示类型：决定该元素的流式布局中的表现如块级布局、行级布局
内部显示类型：可以控制其子元素的布局如Flex弹性布局