前端面试-CSS
一、CSS基础
CSS选择器及其优先级
对于选择器的优先级：
标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000
注意事项：
!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
CSS中可继承与不可继承属性有哪些
一、无继承性的属性
display：规定元素应该生成的框的类型
文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
元素可见性
visibility：控制元素显示隐藏
列表布局属性
list-style：列表风格，包括list-style-type、list-style-image等
光标属性
cursor：光标显示为何种形态
display的属性值及其作用
属性值 作用
none 元素不显示，并且会从文档流中移除。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。
display的block、inline和inline-block的区别
（1）block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
（2）inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
（3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
隐藏元素的方法有哪些
display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件
link和@import的区别
两者都是外部引用CSS的方式，它们的区别如下：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持
transition和animation的区别
transition是过渡属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。
display:none与visibility:hidden以及 opacity:0的区别
display: none
DOM 结构：隐藏后不占位置
事件监听：无法触发它绑定的事件；
性能：动态改变此属性时会引起重排，性能较差；
继承：不会被子元素继承，父元素都不存在了；
transition：无效。
visibility: hidden：
DOM 结构：隐藏后仍然占据空间；
事件监听：不会触发它绑定的事件；
性 能：动态改变此属性时会引起重绘，性能较高；
继 承：会被子元素继承，子元素可以通过设置 visibility: visible来显示子元素；
transition：visibility 从hidden到visible会立即显示，没有延时；反过来会延时；
opacity: 0
DOM 结构：透明度为 100%，元素隐藏，占据空间；
事件监听：可以进行 DOM 事件监听；
性 能：提升为合成层，不会触发重绘，性能较高；
继 承：会被子元素继承,且子元素并不能通过 opacity: 1 来取消隐藏；
transition：opacity 可以延时显示和隐藏
伪元素和伪类的区别和作用？
- 伪类表示被选择元素的某种状态，例如:hover
- 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如::before和::after
核心区别在于，是否创造了“新的元素”
每个选择器只能出现一个伪元素；可以出现多个伪类；
状态类伪类：
触发顺序为link–>visited—>hover—>active即记为love and hate ，然后单独记住focus在hover和active之间即可
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:focus，将样式添加到被选中的元素
:active，将样式添加到被激活的元素
结构类伪类：
:first-child
:nth-child(n) 匹配属于其父元素的第 N 个子元素,不论元素的类型，n 可以是数字、关键词或公式。
:nth-of-type(n)匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。例如 p:nth-of-type(3n+0) 指定了下标是 3 的倍数的所有 p 元素的背景色
对requestAnimationframe的理解 HTML5请求动画API
对盒模型的理解
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）
为什么有时候⽤translate来改变位置⽽不是定位？
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。
li 与 li 之间有看不见的空白间隔是什么引起的？如何解决？
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决办法：
（1）为设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
（2）将所有写在同一行。不足：代码不美观。
（3）将
（4）消除内的字符间隔，因此需要将内的字符间隔设为默认letter-spacing:normal。
CSS3中有哪些新特性
1.新增选择器：属性选择器、结构伪类选择器、伪元素选择器
2.阴影和反射：
块级元素阴影box-shadow: offset-x offset-y blur-radius spread-radius color inset;
文字阴影text-shadow: offset-x offset-y blur-radius color;
反射：-webkit-box-reflect
3.文字渲染：text-decoration
4.圆角：border-radius
5.渐变：
线性渐变background-image: linear-gradient(direction, color-stop1, color-stop2, …);
径向渐变background-image: radial-gradient(shape size at position, color-stop1, color-stop2, …);
6.旋转、缩放、倾斜skew、动画、过渡属性
对 CSSSprites 的理解
CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
优点：
利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
缺点：
在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
开发的时候有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片;
不能随意的改变大小和颜色；
margin 和 padding 的使用场景
需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
需要在border内测添加空白，且空白处需要背景（色）时，使用 padding
对line-height 的理解及其赋值方式
（1）line-height的概念：
line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
line-height 和 height 都能撑开一个高度；
（2）line-height 的赋值方式：
带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代
::before 和 :after 的双冒号和单冒号有什么区别？
（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after
display:inline-block 什么时候会显示间隙？
1.有空格时会有间隙，可以删除空格解决；
2.margin正值时，可以让margin使用负值解决；
3.使用font-size时，可通过设置font-size:0、重新设定其他元素
4.letter-spacing、word-spacing解决；
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
单行、多行文本溢出隐藏
单行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
多行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
对媒体查询的理解？
简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
.div1 {
background-color: orange;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
.div1 {
background-color: red;
}
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
.div1 {
background-color: green;
}
}
@media only screen and (max-width: 800px){
.div1 {
background-color: blue;
}
}
z-index属性在什么情况下会失效
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
z-index属性在下列情况下会失效：
1.元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
2.父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
3.元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
CSS3中的transform转换有哪些属性？
2D转换 transform
对元素进行移动、缩放、旋转、拉长或拉伸
.box img {
/* transform: translate(100px,50px); */
transform: translate(-100px);水平
transform: scaleX(0.5);
/* 先旋转后位移 */
transform: rotate(30deg) translate(150px);
/* 先位移后旋转 */
transform: translate(150px) rotate(30deg);
注： 元素旋转后，坐标轴也跟着发生转变，transform书写顺序不同导致转换效果不同。
/* 倾斜 水平和垂直方向的倾斜角度 第二个值不写默认为0 */
transform: skew(30deg);
/* 设置基准点水平和垂直方向 */
/* 水平：left、center、right、px、百分比 */
/* 垂直：top、center、bottom、px、百分比 */
transform-origin: left top;
}
3D转换
（1）透视 perspective
设置在z轴的视线焦点的观察位置，将一个2D平面在转换过程中呈现3D效果，属性值大观察点距离z轴原点越远
特点：近大远小
注： 透视属性需要设置给3D变化元素的父级
（2）transform-style
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
注： 一般设置给3D变换图形的父级元素。transform-style: preserve-3d;
transition过渡有哪些属性？
当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指)，那么A和B之间就可以实现平滑的过渡的动画效果
transition简写，一个属性中设置4个属性
transition： all .5s ease;
transition-property规定应用过渡的CSS属性的名称，none表示没有属性过渡；all表示所有变化的属性都过渡；属性名：使用具体的属性名，多个属性名中间逗号分隔
transition-duration定义过渡效果花费的时间。默认是0。s秒为单位，0s必须加单位
transition-timing-function规定过渡效果的时间曲线，默认是"ease"，慢快慢
transition-delay规定过渡效果何时开始，默认是0。s秒为单位，0s必须加单位
animation动画有哪些属性？
（1）@keyframes规则
用于创建动画，创建由从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。使用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%，0%是动画的开始，100%是动画的完成。
animation-name规定@keyframes动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0
animation-timing-function规定动画的速度曲线，默认是ease
animation-delay规定在动画开始之前的延迟，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，infinite是无限次播放
animation-direction 规定是否应该轮流反向播放动画。默认normal
.box {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 200px auto;
background-color: skyblue;
/* 添加绑定动画 动画名称 过渡时间 速度曲线 延时时间 动画次数 前两个必须设置 */
/* animation: move 1s linear 3 2s; */
animation: move2 3s linear infinite;
}
/* 自定义动画 过程 */
@keyframes move {
/* 从头开始，最好保持跟默认样式的状态一致 */
from {
transform: translateY(0);
}
/* 到结束位置 */
to {
transform: translateY(150px);
}
}
animation和transform都能做动画，区别是？
transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate
transition样式过渡，从一种效果逐渐改变为另一种效果
animation动画 由@keyframes来描述每一帧的样式
将一个盒子从左边移动到右边：
常见的图片格式及使用场景
（1）BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。
（2）GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
（3）JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
（4）PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。
（5）PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。
（6）SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。
（7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。
在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。
Canvas和SVG的区别
（1）SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
（2）Canvas：HTML5新增
Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
其特点如下：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
CSS 优化和提高性能的方法有哪些？
加载性能、选择器性能、渲染性能、可维护性与健壮性
1.加载性能
（1）css压缩：将写好的css进行打包压缩，可以减小文件体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。
（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载
2.选择器性能
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
3.渲染性能
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
4.可维护性、健壮性
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中
CSS预处理器/后处理器是什么？为什么要使用它们？
预处理器，预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码：如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
Sass、Less 是什么？为什么要使用他们？
Sass和Less都属于CSS预处理器；所谓CSS预处理器，预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，再通过编译器转化为正常的CSS文件，增强了css代码的复用性
为什么要使用CSS预处理器？
CSS有具体以下几个缺点：
语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
Sass和Less的比较
相同之处：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值
不同之处：
1、Less环境较Sass简单
Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。
2、Less使用较Sass简单
LESS并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。只要你了解CSS基础就可以很容易上手。
3、从功能出发，Sass较Less略强大一些
sass 支持条件语句，可以使用if{}else{},for{}循环等等；less不支持；
4、Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
5、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
嵌套主要提一下&符号，毕竟如果不加就相对于是有空格的，用了&代表连接，代表影响的是它自己而不是它的子元素
.clearfix {
display: block;
zoom: 1;
&::after {
content: " ";
}
}
对 CSS 工程化的理解
CSS 工程化是为了解决以下问题：
宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
编码优化：怎样写出更好的 CSS？
构建：如何处理我的 CSS，才能让它的打包结果最优？
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：
预处理器：Less、 Sass 等；
重要的工程化插件： PostCss；
Webpack loader 等
预处理器：为什么要用预处理器？它的出现是为了解决什么问题？
预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码：
随着前端业务复杂度的提高，前端工程中对 CSS 提出了以下的诉求：
宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；
编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；
可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性
预处理器普遍会具备这样的特性：
嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
支持定义 css 变量；
提供计算函数；
允许对代码片段进行 extend 和 mixin；
支持循环语句的使用；
支持将 CSS 文件模块化，实现复用。
PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？
PostCss 仍然是一个对 CSS 进行解析和处理的工具，它会对 CSS 做这样的事情：旧的CSS代码-------PostCss--------新的css代码
它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。
PostCss 在业务中的使用场景非常多：
提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；
Webpack 能处理 CSS 吗：
Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；
Webpack 在 loader 的辅助下，是可以处理 CSS 的。
如何用 Webpack 实现对 CSS 的处理：
Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
注意，答出“用什么”有时候可能还不够，面试官会怀疑你是不是在背答案，所以你还需要了解每个 loader 都做了什么事情：
css-loader：加载CSS，对 CSS 代码进行编译处理；
style-loader：创建style标签，把 CSS 内容写入标签。
在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错
如何判断元素是否到达可视区域?
window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;
二、页面布局
常见的CSS布局单位
1.像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；也叫逻辑像素
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
2.百分比：使得浏览器组件的宽度和高度随着浏览器变化而变化，从而实现响应式
3.em rem:
em相对于父元素，如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
rem相对于根元素HTML元素的font-size的倍数，可以实现简单的响应式布局，rem计算方法：页面元素的rem值 = 页面元素在 750像素的下px值 / html font-size字体大小，以此实现屏幕分辨率变化时元素随之变化；（计算得出，比如屏幕750px，划分15份，那么html里面的文字大小就是50px , 假如一个100*100像素的页面元素在750屏幕下，也就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1）
4.vw/vh：与视图窗口有关的单位，相对于视图的宽度、高度，vmin是两者中的较小值，vmax是两者中的较大值；
px、em、rem的区别及使用场景
三者的区别：
1.px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2.em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
3.em是相对于其父元素来设置字体大小，相对于父元素的字体倍数，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
rem计算方法：页面元素的rem值 = 页面元素在 750像素的下px值 / html font-size字体大小，以此实现屏幕分辨率变化时元素随之变化；（计算得出，比如屏幕750px，划分15份，那么html里面的文字大小就是50px , 假如一个100*100像素的页面元素在750屏幕下，也就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1）
使用场景：
1，对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可
2.对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
两栏布局的实现
- 利用浮动，左边元素宽度设置为200px,并且设置向左浮动，将右边元素的margin-left设置为200px,宽度为auto撑满整个盒子；
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}
- 利用浮动，左边元素设置固定大小，并且左浮动，右边元素设置overflow:hidden，右边触发了BFC，BFC的区域内不会与浮动元素重叠
.left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
- 利用flex布局，左边元素设置为固定宽度200px,右边元素设置为flex:1
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
- 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}
- 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，left定位为200px，其余方向定位为0。
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: gold;
}
- 百分百布局
.outer div {
float: left;
width: 50%;
}
.left {
background-color: aqua;
}
.right {
background-color: rgb(50, 35, 184);
}
三栏布局的实现
- 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin-left、margin-right的值
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
- 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
- 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，body 中间一栏必须放到最后，因为如果按照正常的顺序left-content-right，中间元素形成定位，那么就会将right顶下去。无法实现三栏布局；
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
- 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行。给left和right分别一个relative定位将他们调整到两端即可。
.outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
- 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。
双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。
双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位
.outer {
height: 100px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
参考：https://juejin.cn/post/6955482100426342430
水平垂直居中的实现
- 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过transform: translate(-50%,-50%)来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。这个方法不需要子元素固定宽高
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于子盒子宽高已知的情况：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
- 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值自身宽度的一半，来调整元素的中心点到页面的中心。该方法适用于子盒子宽高已知的情况；
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半 */
margin-left: -50px; /* 自身 width 的一半 */
}
- 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：这个方法不需要子元素固定宽高
.parent {
display: flex;
justify-content:center;
align-items:center;
}
- calc
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。该方法适用于子盒子宽高已知的情况；
.child {
position: absolute
top: calc(50% - 50px);
left: calc(50% - 50px);
}
如何根据设计稿进行移动端适配？
移动端适配主要有两个维度：
1.适配不同像素密度，针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
2.适配不同屏幕大小，由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。
为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
物理像素:设备屏幕实际拥有的像素点，屏幕的基本单元
逻辑像素:也叫“设备独立像素”（Device Independent Pixel，DIP），可以理解为反映在CSS/JS程序里面的像素点，也就是说css像素是逻辑像素的一种。
以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；
而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。
对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。
当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。
还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片：
my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
#my-image { background: (high.png); }
}
对Flex布局的理解及其使用场景
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。
父级容器属性
flex-direction : row | row-reverse | column | column-reverse; 该属性决定主轴方向
flex-wrap： nowrap | wrap | wrap-reverse; 该属性称"轴线"，如果一条轴线排不下，如何换行
flex-flow： || ; flex-direction和flex-wrap的简写形式，默认值为row nowrap
justify-content: flex-start | flex-end | center | space-between | space-around; 该属性定义了子元素在主轴上的对齐方式。
align-items: flex-start | flex-end | center | baseline 以文字基线对齐| stretch; 定义项目在交叉轴上如何对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。
应用：水平垂直居中，左边固定右边自适应布局
项目上属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex:1 表示什么
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
flex:1 表示 flex: 1 1 0；
响应式设计的概念及基本原理
响应式设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
关于原理： 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同 屏幕下，看到不同的页面布局和样式变化。
关于兼容： 页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
响应式文字：
p {
font-size: 16px;
line-height: 1.2em; /* 1.2em = 19.2px */
}
响应式图片：
- 确保图片内容不会超出 viewport
img {
max-width: 100%;
}
- 图片质量支持响应式
srcset 支持定义几组图片和对应的尺寸
sizes 支持一组媒体查询条件
<img
srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="An example image">
响应式布局 自适应布局
1.什么是响应式布局
响应式布局原理就是在不同屏幕分辨率下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
2.什么是自适应式布局：
自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。它需要开发多套界面来适应不同的终端。
3.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
几种常见的网页布局
静态布局：
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
优点：
简单，无兼容性问题
缺点：
不能根据用户的屏幕尺寸做出不同的表现
流式布局：
页面元素的宽度按照屏幕分辨率进行适配调整，宽度自适应，页面里元素的大小会变化而但布局不变。 网页中主要的划分区域的尺寸使用百分数，往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
如 width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真。
缺点：
主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调
自适应布局
分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
特点：
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化
设计：
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
响应式布局
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
特点：
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
响应式头部加上以下代码
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
弹性布局rem/em
特点：
包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」），使用rem单位的弹性布局在移动端也很受欢迎
三、定位与浮动
为什么需要清除浮动？清除浮动的方式
float 属性用于创建浮动框，将浮动的框向左移动或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动特性：
浮动的元素会脱离标准流，浮动的盒子不再保留原来的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素具有行内块元素的特性
浮动元素引起的问题？
对父元素的影响
浮动的元素会脱离标准流，不再保留原来的位置，导致父元素的高度无法被撑开，引起“高度塌陷”现象，
对其兄弟元素(非浮动)的影响
如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层
为什么要清除浮动？清除浮动元素的影响
什么是父元素高度塌陷？
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
清除浮动的方式：（解决父元素高度塌陷问题）
父盒子设置固定高度
内墙法
伪元素清除法
overflow:hidden
1.虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。
应用：网页中盒子固定高度区域，比如固定的导航栏。
缺点：使用不灵活，后期不易维护
2.在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性
3.伪元素选择器：通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div
.clearfix::after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
4.包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文
使用 clear 属性清除浮动的原理？
清除浮动元素的影响
官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。
clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时还需要设置display属性值的原因。
对BFC的理解，如何创建BFC?
BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
触发BFC的条件：
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute)；
display 值为：inline-block；
overflow 值不为 visible，为 auto、scroll、hidden;
特点：
- 内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
- 内部的Box垂直方向的距离由margin决定。
- 属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
- 计算BFC的高度时，浮动元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
BFC作用：
1.解决margin的重叠问题：
由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
2.清除浮动，解决高度塌陷的问题：
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
3.创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应
.left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
<div class="left"></div>
<div class="right"></div>
什么是margin重叠问题？如何解决？
问题描述
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。重叠只会出现在垂直方向。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。
计算原则
如果两者都是正数，那么就去最大者
如果是一正一负，就会正值减去负值的绝对值
两个都是负值时，用0减去两个中绝对值大的那个
解决方法分为两种：兄弟间重叠、父子间重叠
兄弟之间重叠：底部元素设置浮动，绝对或固定定位，变为行内块盒子
父子之间重叠：
父元素加入overflow：hidden
父元素添加透明边框，border:1px solid transparent
子元素添加浮动或定位
子元素行内块
元素的层叠顺序
z-index为正的定位元素> z-index为0的定位元素 > inline-block行内盒> 浮动盒 > 块级盒 > 负的z-index元素 > 背景和边框
position的属性有哪些，区别是什么
static默认
静态定位， 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative相对定位
元素的定位永远是相对于元素自身位置的
absolute绝对定位
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并
fixed固定定位
不为元素预留空间，而是通过指定元素**相对于屏幕视口（viewport）**的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
sticky粘性定位
和页面滚动搭配使用，被认为是相对定位和固定定位的混合，元素定位表现为跨越特定阀值前位相对定位，后为固定定位；
display、float、position的关系
z-index为正的定位元素> z-index为0的定位元素 > inline-block行内盒> 浮动盒 > 块级盒 > 负的z-index元素 > 背景和边框
（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。
（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。
（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。
（4）如果position的值不为absolute或者fixed，float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。
absolute与fixed共同点与不同点
相同点：
改变行内元素的呈现方式，将display置为行内块；触发BFC
是元素脱离标准流，不占据原来的位置；
覆盖非定位文档元素；
不同点：
根元素不同，绝对定位的根元素可以设置，固定定位的根元素是浏览器；
有滚动条的页面中绝对定位会跟随父元素进行移动，固定会固定在页面的具体位置；
对 sticky 定位的理解
和页面滚动搭配使用，被认为是相对定位和固定定位的混合，元素定位表现为跨越特定阀值前位相对定位，后为固定定位；
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
四、场景应用
- 实现一个三角形
通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
//
border-bottom: 100px solid red;
border-left: 50px solid transparent;
}
- 实现一个扇形
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}
- 实现一个圆和半圆
div {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
}
div {
background-color: red;
width: 100px;
height: 50px;
border-radius: 0px 0px 100px 100px;// 上左 上右 下左 下右
}
实现一个宽高自适应的正方形
- vw
.square {
width: 10%;
height: 10vw;
background: tomato;
}
- 利用元素的margin/padding百分比是相对父元素width的性质来实现：
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}
- 利用子元素的margin-top的值来实现
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: '';
display: block;
margin-top: 100%;
}
画一条0.5px的线
transform: scale(0.5,0.5);
或
移动端
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
设置小于12px的字体
使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；
<body>
<p class="font"><span>你好</span></p>
</body>
<style>
.font span {
font-size: 12px;
transform: scale(0.5);
display: inline-block;
}
</style>
如何解决 1px 问题？
设备像素比 = 物理像素 / 逻辑像素(CSS像素)
思路一：直接写 0.5px
.div {
border-width: 1px;
}
/* 两倍像素下 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.div {
border-width: 0.5px;
}
}
思路二：伪元素先放大后缩小
在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果
#container[data-device="2"] {
position: relative;
}
#container[data-device="2"]::after{
position:absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
content:"";
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #333;
}
}
思路三：使用viewport缩放来解决
const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
通过CSS3使图片从左上角移动到右下角
<style>
html,
body {
height: 100%;
}
.ani-box {
width: 100%;
height: 100%;
position: relative;
}
.ani {
width: 100px;
height: 100px;
background: #000;
animation: a 2s linear;
position: absolute;
top: 0;
left: 0;
}
@keyframes a {
0% {
top: 0;
left: 0;
}
100% {
top: calc(100% - 100px);
left: calc(100% - 100px);
}
}
</style>
<body>
<div class="ani-box">
<div class="ani"></div>
</div>
</body>
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和
8.