【CSS基础布局知识总结】 ------ 前端面试必备 --- 复习专用

CSS基础扎实很重要，面试的时候也常会被问到，主要分为两个模块，分别是CSS基础和CSS布局

CSS基础

1. CSS在浏览器底层如何工作

2. CSS 优化性能方法

• 将样式写在单独的CSS文件里（外部CSS） 而不是内联
  优点：减少页面体积、内容样式分离易于管理维护、CSS文件可以被缓存重用
• 避免使用复杂选择器，层级越少越好
• 减少使用@import，建议使用link

3. CSS选择器权重和优先级（高频）

行内样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器> 通用选择器=子选择器

• 选择器在比较时，按等级权重来比较，权重值越大，优先级越高
• 先找是否有 !importtant，如果没有
• 看行内样式 ，如果有以行间样式为主 ，如果没有，则利用权重值比较优先级
• 如果选择器优先级相同，则最后出现的样式生效（层叠性）
• 继承没有权重！！！
  

4. display 的属性值及其作用

5. display 的block、inline和inline-block的区别（高频）

6. display: none、visibility: hidden、overflow: hidden 的区别

7. 隐藏元素的方法

8. CSS3新特性（高频）

• CSS3选择器:：基本选择器、属性选择器、伪类选择器
• 边框与圆角： 圆角（border-radius） 盒阴影（box-shadow）
• 渐变：线性渐变 （linear-gradient） 径向渐变（radial-gradient）
• 过渡：transition
• 变换：rotate旋转、translate平移、scale缩放
• 动画：keyframes、animation属性
• 背景：background-color/image/repeat/attachment/position

多列布局 （multi-column layout） 文字特效 （text-shadow） 文字渲染 （Text-decoration）

9. 盒模型（高频）

• 所有HTML元素可以看做盒子，盒模型用来设计和布局
• 盒模型都是由四个部分组成的，分别是margin、border、padding、content
• 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型
• 二者区别在于box-sizing（元素最终尺寸计算规则）不一样，可以通过修改元素的box-sizing属性来切换盒模型
• 标准盒模型：box-sizing: content-box 标准盒模型宽高=content宽高
• IE盒模型： box-sizing: border-box IE盒模型宽高=border+padding+content
  设置内外边距和边框，会改变标准盒最终大小，但不会改变IE盒最终大小

10. CSS中可继承与不可继承属性有哪些

可继承

• 字体系列属性font
• 文本系列属性
• 列表布局属性 list-style
• 元素可见性 visibility

不可继承

• 规定元素应该生成框的类型 display
• 文本属性 text-decoration vertical…
• 盒子模型属性 width height margin border padding
• 背景属性 background…
• 定位属性 position top bottom…

11. link 和 @import 区别

12. 伪元素和伪类的区别和应用

优先级：类选择器 = 伪类 > 伪元素
二者根本区别在于：是否创造了新的元素，这个新创造的元素就叫伪元素。
伪元素：相当于伪造了一个元素，然后添加了相应的效果；
伪类：没有伪造元素，只是给元素添加效果而已；

伪元素：在内容元素的前后插入额外的元素。它不存在于 DOM 文档中、是一个虚拟的元素，只在外部显示可见，但不会在文档的源代码中找到它们

• ::before 该伪元素定义在元素之前添加内容
• ::after 该伪元素定义在元素之后添加内容
• ::first-line 该伪元素向文本的首行添加特殊样式
• ::first-letter 该伪元素向文本的第一个字母添加特殊样式

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

• :hover 当鼠标滑到当前元素时，会做什么效果
• :first-child 选择父元素的首个子元素，添加相应

13. 对CSSSprites（精灵图/雪碧图）的理解

精灵图是为了减少网络请求，将小图标和背景图像合并到一张大图上，然后利用 css 的 background-positon/image/position属性的组合，来进行背景定位显示需要显示的图片部分

• 优点：减少加载网页图片时对服务器的请求次数，从而大大的提高页面的性能，减少图片的字节；
• 缺点：使用起来不够灵活，开发的时候有点麻烦，需要借助ps工具，维护困难；
• 适用场景：图标

14. line-height理解及赋值继承问题

line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离。

line-height 和 height 都能撑开一个高度；如果一个标签没有定义height，那么最终高度由line-height决定。

line-height 的赋值方式

• 具体数字：子元素未设置行高，直接继承父元素行高。 父30px 子30px
• 按比例：会把比例传递给后代。父行高 1.5，子元素字体为18px，子元素行高为 1.5 * 18 = 27px
• 百分比：将百分比计算后的值传递给后代。父字体20px，行高200%，子元素行高40px=20*200%

15. 常见图片格式

16. Sass / Less / CSS预处理器/后处理器

• CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件;
  预处理器：如Less、Sass，用来预编译Sass或Less，增强了css代码的复用性，还有层级、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
• CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。最典型的例子是CSS压缩工具;
  后处理器：如postCss，通常在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
• 使用原因：
  结构清晰，便于扩展维护；
  可以屏蔽浏览器私有语法差异；
  可以实现多重继承；
  兼容CSS代码，可以应用到老项目中
• Sass、Less都是CSS预处理器。
  CSS预处理器用一种专门的编程语言来进行 Web 页面样式设计，然后再转换为正常的CSS样式。将CSS赋予动态语言特性，如变量、继承、运算、函数。
  Less是基于JS，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。编写变量方式也不同。 使用Sass Less，结构清晰，便于扩展，可以轻松实现多重继承…

17. 单行多行文本溢出隐藏

• 单行文本溢出

div{
	overflow: hidden;          // 溢出隐藏，只有设置了这个属性，text-overflow: ellipsis才生效
	text-overflow: ellipsis;      // 溢出用省略号显示
	white-space: nowrap;   }   // 规定段落中的文本不进行换行
鼠标放上去，显示单行省略的内容
div:hover {  width:auto   }

• 多行文本溢出省略代码

div {
	overflow: hidden;             // 溢出隐藏
	text-overflow: ellipsis;         // 溢出用省略号显示
	display:-webkit-box;          // 作为弹性伸缩盒子模型显示。
	-webkit-box-orient:vertical;    // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
	-webkit-line-clamp:3;         // 显示的行数
}
由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容
要在前面加一个-webkit- 来兼容一部分浏览器.
鼠标放上去，显示单行省略的内容
div:hover {
  text-overflow: inherit;
  overflow: visible;
  -webkit-line-clamp: inherit;
}

18. 回流重绘

重绘不⼀定重排，重排必定重绘
布局发生了改变就会触发重排（回流），样式发生了改变就会触发重绘

重绘：一个元素的 样式/ 几何属性发生改变（例如背景色、文字颜色），但是没有改变布局属性（元素外观重新展示）

重排（回流）：元素布局位置发生变化，倒回去重新渲染

display：none会触发重排，visibility：hidden会触发重绘

回流触发条件

• 页面首次渲染
• 浏览器窗口尺寸改变——resize事件发生时
• 元素内容/尺寸/位置发生变化
• 添加或者删除可见的DOM元素

避免回流与重绘

• 浏览器自身优化（渲染队列）
• 批量修改DOM
• 不要使用Table布局
• position属性使用absolute或者fixed
• visibility:hidden替换display:none
• 使用CSS3硬件加速
• 避免设置多层内联样式

回答总结！！！
重排和重绘是浏览器关键渲染路径上的两个节点， 浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过一个布局(也叫 layout)步骤来确定页面上所有内容的大小和位置，确定布局后，将像素绘制 (也叫 Paint)到屏幕上。
其中重排就是当元素的位置发生变动的时候，浏览器重新执行布局这个步骤，来重新确定页面上内容的大小和位置，确定完之后就会进行重新绘制到屏幕上，所以重排一定会导致重绘。
如果元素位置没有发生变动，仅仅只是样式发生变动，这个时候浏览器重新渲染的时候会跳过布局步骤，直接进入绘制步骤，这就是重绘，所以重绘不一定会导致重排。

CSS布局

1. 元素水平垂直居中方式（高频）

• 行内元素（text-align + line-height）

text-align: center  //水平居中
height: 100px    //这个垂直居中只针对单行文本，同时line-height的值和height一样
line-height: 100px //垂直居中

• 绝对定位 + margin（适用于盒子宽高已知）
  先将元素的左上角通过top:50% 和left:50% 定位到页面的中心，
  再通过margin负值调整元素的中心点到页面的中心。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 自身height一半px;    
    margin-left: 自身width一半px;   
}

• 绝对定位 + margin: auto（适用于盒子宽高已知）
  利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，可以实现水平+垂直居中

.parent {
    position: relative
}
.child {
    position: absolute
    top: 0  bottom: 0  left: 0  right: 0
	margin: auto    //水平+垂直居中      
	margin: 0 auto   //水平居中
}

• 绝对定位 + translate（无需指定子元素宽高，推荐）
  利用绝对定位，先将元素的左上角通过top: 50% 和 left: 50% 定位到页面的中心，再通过translate来调整元素的中心点到页面的中心（以这个元素自身宽高为基准进行换算和移动）。该方法需要考虑浏览器兼容问题

.parent {   
	position: relative
} 
.child {    
	position: absolute   
	left: 50%  
	top: 50%   
	transform: translate (-50%, -50%)
}

• flex布局
  它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多

.parent {
    display: flex
    justify-content: center  //水平
    align-items: center     //垂直
}

• table布局

.parent {
	display: table-cell
	text-align: center         //水平
	vertical-align: middle     //垂直
	.child {  display: inline-block   } 
	}

2. 你了解哪些布局方式

3. 两栏布局的实现—左固定右自适应

• 浮动float + margin 实现
  利用浮动，左边元素宽度设置为200px，向左浮动。右边元素的margin-left设置200px，宽度auto（默认为auto，撑满整个父元素）

.outer {  height: 100px  }
.left {
  float: left
  width: 200px  }
.right {
  margin-left: 200px
  width: auto   }

• float + overflow 实现（浮动+BFC）
  利用浮动，左侧元素设置固定大小+左浮；右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠

.left{
     width: 100px
     height: 200px
     float: left 
     }
 .right{
     height: 300px
     overflow: hidden   //触发BFC  
     }

• 利用定位position: absolute ，配合margin实现
  父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px

.outer {
	  position: relative
	  height: 100px  
	  }
.left {
	  position: absolute
	  width: 200px
	  height: 100px  
	  }
.right {  
	 margin-left: 200px  
      } 

• position: absolute
  父级元素设置为相对定位relative。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0

.outer {  
	position: relative
    height: 100px  
    }
.left {
	position: absolute
	left: 0
	width: 200px  
	}
.right {
  position: absolute
  top: 0     right: 0    bottom: 0     left: 200px  
  }

• flex布局
  将左边元素设置为固定宽度200px，将右边的元素设置为flex:1

.outer {
	display: flex
	 height: 100px
}
.left {    
	width: 200px    
	}
.right {  
	flex: 1  //填充剩余空间  
   }

还有display: table实现、grid网格布局、利用float+calc计算宽度的方法

4. 三栏布局的实现----左右固定中间自适应

1. 绝对定位position+margin
   左右两栏设置为绝对定位 position: absolute
   中间设置对应方向大小的margin的值
   

2. 利用浮动
   左右两栏设置固定大小，并设置对应方向浮动
   中间一栏设置左右两个方向的margin值，中间一栏放最后
   

3. flex布局
   左右两栏设置固定大小，中间一栏设置flex: 1
   

4. 圣杯布局（float + margin负值）
   利用浮动和负边距来实现。父级元素设置左右的 padding，左中右三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
   
   

5. 双飞翼布局（float + margin负值）
   双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的
   
   

5. margin塌陷/重叠/穿透问题

1. 相邻块元素垂直外边距合并（兄弟盒子塌陷）
   元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值

• 把外边距只加在其中一个元素上
• 任何一个元素加上 display:inline-block
• 任意一个元素外边距换成对应的 padding

• 嵌套块元素垂直外边距塌陷（父子盒子塌陷）
  对于两个嵌套关系的块元素，如果父元素没有上内边距及边框。父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
• 给父元素定义上边框/上内边距
• 给父元素加上overflow: hidden
• 子元素转换成行内块元素
• 给父子元素中任一个加上position: absolute / float: left
  

6. BFC的理解、功能，产生BFC的场景

BFC (Block Formatting Context)块级格式化上下文。
BFC是一个完全独立的渲染空间（被隔离的容器），该空间里的子元素不会影响到外面的元素布局。

BFC作用： 解决margin的重叠问题、解决高度塌陷的问题、清除浮动带来的塌陷、创建自适应两栏布局

创建BFC条件：

• 元素设置浮动，float除none以外的值 --> float: left / right
• 元素设置绝对定位 —> position: absolute / fixed （不是relative）
• overflow值为 hidden / scroll / auto （不是visible）
• display值为 inline-block / flex / grid / table-cell / table-caption（不是block）

7. 对flex布局的理解及其应用场景

flex布局(弹性布局)是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素自动成为容器成员，称为flex项目。
flex容器默认有两条轴：水平的主轴和垂直的交叉轴，flex 布局主要是围绕这两根轴来进行布局的。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

8. 常见CSS布局单位 px em rem vm vh

• 像素(px)：相对于显示器分辨率而言
• em：其值基于父元素的font-size，具有继承的特点; 如果父元素font-size：14px，则1em=14px
• rem：是CSS3新增的一个相对单位，相对的是HTMl根元素的font-size
• vm、vh：分别是相对于视图窗口 宽度高度的百分比，例如1vm=视窗宽度1% 1vh=视窗高度1%
• vmin：vm和vh中较小值，竖屏时100vmin=100vm
• vmax：vm和vh中较大值，竖屏时100vmax=100vh

9. px em rem 区别及应用场景

区别:

• px是固定的像素，一旦设置了就无法因为适应页面大小而改变
• em和rem相对于px更具有灵活性，他们是相对长度单位，长度不是固定的，更适用于响应式布局
• em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值

使用场景：

• 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可
• 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备

10. 响应式布局如何实现及原理

响应式布局：只需要开发一套代码，使页面适应不同的屏幕， PC + 平板 + 手机
响应式开发一套界面， 通过检测视口分辨率，针对不同客户端在客户端做代码处理，展现不同的布局和内容。

响应式布局的实现方案

• 媒体查询布局
  使用@media查询，查询检测不同的设备屏幕尺寸做处理，为了处理移动端， 页面头部必须有meta声明的viewport
• 百分比布局
  当浏览器的宽/高发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
• rem布局
  rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小是16px，此时1rem=16px，可以利用前面的媒体查询，针对不同设备分辨率改变font-size的值
• vm vh 响应式布局
  vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度，任意层级元素，1vm=视图宽度1%，与百分比布局很相似

11. 为什么需要清除浮动？ 清除浮动的方式？

清除浮动是为了清除浮动元素产生的影响。浮动元素会脱离文档流（不占据空间），导致父元素高度塌陷，使得页面布局不能正常显示。浮动元素碰到包含它的边界或者浮动元素的边界停留。

浮动元素引起的问题：

• 子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；
• 与浮动元素同级的非浮动元素会跟随其后；
• 若浮动元素不是第一个元素，则该元素之前的元素也要浮动，否则影响页面的显示结构。

清除浮动元素方式：

• 父元素设置固定的高度
• 额外标签法： 最后一个浮动元素后添加空的div，并添加clear: both （不推荐）
• 使用after伪元素清除浮动：
• 使用 before和 after双伪元素清除浮动
• 父级元素设置 overflow: hidden，本质是构建一个BFC（不推荐）

12. 定位position有几种属性，及应用场景

• absolute 绝对定位是相对于其最近的定位的父元素进行位置调整，如果找不到定位的元素，则相对于 body 进行定位

• relative 相对定位是相对于自身正常位置进行定位
  

• 相对定位：元素定位永远是相对于元素自身位置的， 和其它元素没关系， 也不会影响其他元素。
  应用场景：微调元素位置； 提升元素层级； 作为绝对定位元素参考对象
  应用案例：搜索框、图文对齐、滑动动画、弹性菜单、柱形图

• 绝对定位：元素定位较复杂，相对于其最近的定位父元素进行位置调整
  应用场景：top bottom left right优先级； 相对于直接父元素定位； 相对父元素的父元素定位； 相对于body定位； 子元素自适应父元素宽高； 设置元素水平垂直居中； 改变元素的层级关系；

• 固定定位：元素定位相对于window边界的，和其它元素没有关系，但是会导致其他元素位置变化
  楼梯式导航；浏览器右侧菜单； 底部通栏；全屏黑色半透明遮罩弹出层，弹出注册和登录框； 左上固定右自适应后台管理系统布局

• 粘性定位
  吸顶盒导航； 滚动吸附效果

13. diaplay、float、position

类似优先级的机制：
position:absolute和position:fixed优先级最高，有它存在的时候，浮动不起作用，display的值也需要调整；
元素的’float’特性的值不是none的时候或者它是根元素的时候，调整display的值；
非根元素，并且非浮动元素，并且非绝对定位的元素，display特性值同设置值

14. CSS动画

CSS实现动画主要有3种方式

• transition过渡动画
  只有两个状态：开始和结束。只需要定义过渡属性的起始和结束值就 ok；
  能在网页加载时自动发生，需用事件触发，一般与:hover 搭配使用
  一次性，不能重复发生，除非一再触发
• transform 2D 和 3D 转换
  transform属性允许对元素进行 rotate 旋转、scale 缩放、skew 倾斜、translate 移动这四类操作；一般配合 transition一起使用
• animation动画
  animation 需要调用 @keyframes 定义好的动画。能自动执行； 能重复发生； 能暂停

所有CSS动画都能用GPU加速吗?
在CSS中，只有3D转换、opacity透明、filter滤镜和添加了will-change属性的元素，浏览器才会开始硬件加速

15. CSS绘制三角形 （主要用到的是border属性）

• 实际上border属性是由三角形组成的
• 总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度
• 如果需要某个三角，把其他三个边框设置为transparent

div {    width: 0
        border-top: 50px   solid   red              //上三角形
        border-right: 50px   solid   yellow         //右三角形
		border-bottom: 50px   solid   transparent   //下三角形
		// 设置transparent就是透明，没有颜色 
		border-left: 50px   solid   blue            //左三角形     }

div {
    width: 0;
    border-top: 100px solid red        //左三角形-红色
    border-right: 50px solid yellow     //右三角形-黄色
  }