1.line-height ：一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，1.line-height的概念：line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；line-height 和 height 都能撑开一个高度；2.line-height 的赋值方式：带...

设置一个元素的背景颜色，背景颜色会填充那些区域？ background-color：设置的背景颜色会填充元素的content，padding，border区域。

两个嵌套的 div，position 都是 absolute，子 div 设置 top 属性，那么这个 top是相对于父元素的哪个位置定位的? 答：margin的外边缘

1.渲染线程：渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity，这时整个 CSS 动画得以在 compositor trhead 完成；而 JS 动画则会在 main thread 执行，然后出发 compositor thread 进行下一步操作。注意：如果改变 transform 和 opacity是不会 layout 或者 paint 的。2.区别：功能涵盖面，JS 比 CSS 大实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定对帧速表现不好的低版本浏览器，css3 可以做到自...

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位。 优点：利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大提高了页面的性能，这是 CSS Sprites 最大的优点；CSS Sprites 能减少图片的字节，把 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。缺点：在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景...

1.加载性能：css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用margin:top 0 bottom 0 ； 但margin-bottom:bottom;margin-left:left;执行效率会更高。减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。2.选择器性能：关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确...

display主要取值为：none,block,inline-block,flex等display的block、inline和inline-block的区别：block： 是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直方向都有效。block 元素会独占一行，块级元素即使设置了宽度,仍然是独占一行。多个 block 元素会各自新起一行。默认情况下，block 元素宽度自动填满其父元素宽度。inline： 设置 width 和 height 无效，padding，margin 在竖直方向上无效，maigin,padding 在水平方向垂直方向都有效，能产生...

1.position属性： position属性：用于指定一个元素在文档中的定位方式。 top， right， bottom 和  left 属性则决定了该元素的最终位置把元素放置在一个静态的，相对的，绝对的，固定的位置中。 position的默认值是static（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）  1.fixed：固定定位 可定为与相对浏览器窗口的指定坐标，可以通过left，top等属性来定位。  元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间...

Flex 是 Flexible Box的缩写，意为"弹性布局"，指定容器 display: flex 即可，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。 1.Flex容器： 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。 2.Flex项目： 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 3.容器默认存在两根轴： 水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水...

1.左右定宽，中间自适应1.flex实现(口诀：中间 flex = 1, 宽用百分比，左右固定宽，父元素 display:flex)html： <div class="container"> <div class="left"></div> <div class="mid"></div> <div class="right"></div> </div> css: .container { display:flex; } .left{ width:100px; height: 100px; backg...

DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有：添加或者删除可见的 DOM 元素，元素尺寸位置的改变浏览器页面初始化，浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排， 减少重绘重排的方法有：不在布局信息改变时做 DOM 查询，使用 csstext,className 一次性改变属性使用 fragment对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

为什么 img 是 inline 还可以设置宽高？ img属于可置换元素，在css中可置换元素的展示效果是不由css来控制的。可置换元素： 如：img input select textarea button label 等，他们被称为可置换元素（Replaced element）。可置换元素区别一般inline元素是： 这些元素拥有内在尺寸内置宽高 他们可以设置width/height属性。他们的性质同设置了display:inline-block。 可置换元素是一种外部对象，它们外观的渲染，是独立于css的。css可以影响这些元素的位置但是不能影响元素本身的样式，

三列布局又分为两种：两列定宽一列自适应和两侧定宽中间自适应；1.三栏布局的实现方式 1.两列定宽一列自适应；1、使用 float+margin： 给 div 设置 float：left，left 的 div 添加属性 margin-right：left 和 center 的间隔 px,right 的div 添加属性 margin-left：left 和 center 的宽度之和加上间隔2、使用 float+overflow： 给 div 设置 float：left，再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动，另一个盒子触发 bfc 达到自适应。3、使...

当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。使用display:table-cell也是一个很好用的自适应布局。三栏布局(两侧定宽中间自适应的布局)有十种方法：1.float+margin原理：浮动元素脱离文档流缺点：不支持 center 部分前置，无法实现中间部分优先加载。left、right 的高度无法伴随 center 高度的变化而变化 <style> html,body{ margin: 0; padding: 0; } .sider { width: 200px; he...