媒介查询相关的自适应布局
媒体查询就是针对不同媒体类型在不同CSS属性时的样式表现
清除浮动
浮动带来的问题：
①父元素的高度无法被撑开
②与浮动元素同级的非浮动元素会跟随其后
③若非第一个元素浮动，则该元素前的元素也会浮动，否则会影响页面显示的结构
清除方式：
①父级div定义height
②最后一个浮动元素添加空div标签并添加样式clear：both
③包含浮动元素的父标签添加样式overflow为hidden或auto
④伪元素清除浮动
：after（作用于浮动元素的父级元素
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
css选择器有哪些？优先级？哪些属性可以继承？
！important>内联 > ID选择器 > 类选择器 > 标签选择器
关于css属性选择器常用的有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
伪类选择器：
:link：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover：鼠标指针浮动在上面的元素
:focus：选择具有焦点的
:first-child：父元素的首个子元素
伪元素选择器：
:first-letter：用于选取指定选择器的首字母
:first-line：选取指定选择器的首行
:before:选择器在被选元素的内容前面插入内容
:after:选择器在被选元素的内容后面插入内容
属性选择器：
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素
CSS3新增选择器：
伪类选择器：
:first-of-type表示一组同级元素中其类型的第一个元素
:last-of-type表示一组同级元素中其类型的最后一个元素
:only-of-type表示没有同类型兄弟元素的元素
:only-child表示没有任何兄弟的元素
:nth-child(n)根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n)匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child表示一组兄弟元素中的最后一个元素
:root设置HTML文档:empty指定空的元素
:enabled选择可用元素:disabled选择被禁用元素:checked选择选中的元素
:not(selector)选择与 不匹配的所有元素
属性选择器：
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素
无继承的属性
display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
css中，有哪些方式可以隐藏页面元素？区别?
display:none
特点：元素不可见，不占据空间，无法响应点击事件。会导致重排和重绘。
visibility:hidden
特点：元素不可见，占据页面空间，无法响应点击事件。不会触发重排，但是会触发重绘
opacity:0
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。不会触发重排，但是会触发重绘
设置height、width模型属性为0
将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。
特点：元素不可见，不占据页面空间，无法响应点击事件
position:absolute
特点：元素不可见，不影响页面布局
clip-path
通过裁剪的形式
特点：元素不可见，占据页面空间，无法响应点击事件
谈谈你对BFC的理解？
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
触发条件：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed
应用场景
①防止margin塌陷
②清除内部浮动（避免父元素失去高度）
③自适应多栏布局
元素水平垂直居中的方法有哪些？如果元素不定宽高呢
①利用定位+margin:auto
父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高
②利用定位+margin:负值
父级设置为相对定位，子级绝对定位。top、left：50%；
margin-left：-（width/2）
margin-top：-（height/2）
③利用定位+transform
父级设置为相对定位，子级绝对定位。top、left：50%；
transform:translate(-50%,-50%)
④table布局
设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical-align:middle和text-align:center可以让所有的行内块级元素水平垂直居中
⑤flex布局
display: flex时，表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中
⑥grid布局
display: grid
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中
内联元素居中布局
水平居中
行内元素可设置：text-align: center
flex布局设置父元素：display: flex; justify-content: center
垂直居中
单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：disaply: table-cell; vertical-align: middle
块级元素居中布局
水平居中
定宽: margin: 0 auto
绝对定位+left:50%+margin:负自身一半
垂直居中
position: absolute设置left、top、margin-left、margin-top(定高)
display: table-cell
transform: translate(x, y)
flex(不定高，不定宽)
grid(不定高，不定宽)，兼容性相对比较差
flexbox（弹性盒布局模型）,以及适用场景？
Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。
采用Flex布局的元素，称为flex容器container
它的所有子元素自动成为容器成员，称为flex项目item
我们能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成。包括现在在移动端、小程序这边的开发，都建议使用flex进行布局
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
双栏布局：
①使用 float 左浮左边栏
右边模块使用 margin-left 撑出内容块做内容展示
为父级元素添加BFC（overflow：hidden），防止下方元素飞到上方内容
②flex弹性布局
flex容器的一个默认属性值:align-items: stretch;
这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start
三栏布局
两边使用 float，中间使用 margin
两边使用 absolute，中间使用 margin
两边使用 float 和负 margin
display: table 实现
flex实现
grid网格布局
CSS3新增了哪些新特性？
选择器：
新样式：
边框：
border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框
背景：background-clip、background-origin、background-size和background-break
文字：word-wrap、text-overflow、text-shadow、text-decoration
颜色：rgba、hsla
rgba分为两部分，rgb为颜色值，a为透明度
hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
transition 过渡
transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：
过度效果
持续时间
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
transform 转换
transform属性允许你旋转，缩放，倾斜或平移给定元素
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)
使用方式：
transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜
animation 动画
animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式
渐变
颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括
linear-gradient：线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
radial-gradient：径向渐变
linear-gradient(0deg, red, green);
怎么理解回流跟重绘？什么场景下会触发？
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行
回流触发时机
回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
重绘触发时机
触发回流一定会触发重绘
可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）
除此之外还有一些其他引起重绘行为：
颜色的修改
文本方向的修改
阴影的修改
如何减少
我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：
如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
避免设置多项内联样式
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
避免使用 CSS 的 JavaScript 表达式
什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式网站常见特点：
同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置
实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
属性对应如下：
width=device-width: 是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作
如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import
单行文本溢出省略
text-overflow：
clip：当对象内文本溢出部分裁切掉
ellipsis：当对象内文本溢出时显示省略标记（...）
white-space：nowrap设置文字在一行显示，不能换行
overflow：hidden文字长度超出限定宽度，则隐藏超出的内容
多行文本溢出省略
多行文本溢出的时候，我们可以分为两种情况：
基于高度截断
伪元素 + 定位
核心的css代码结构如下：
position: relative：为伪元素绝对定位
overflow: hidden：文本溢出限定的宽度就隐藏内容）
position: absolute：给省略号绝对定位
line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
height: 40px：设定当前元素高度
::after {} ：设置省略号样式
基于行数截断
纯css实现也非常简单，核心的css代码如下：
-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden：文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
如何使用css完成视差滚动效果?
background-attachment
作用是设置背景图像是否固定或者随着页面的其余部分滚动
值分别有如下：
scroll：默认值，背景图像会随着页面其余部分的滚动而移动
fixed：当页面的其余部分滚动时，背景图像不会移动
inherit：继承父元素background-attachment属性的值
transform：translate3D
容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，
子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果
CSS如何画一个三角形？原理是什么？
.border{width:0;
height:0;
border-style:solid;
border-width:0 50px 50px;
border-color:transparent transparent #d9534f;
}
z-index 是干什么用的？默认值是什么？与 z-index: 0 的区别
> z-index 属性设置元素的堆叠顺序，且只在属性position: relative/absolute/fixed 的时候才生效。
> `z-index: auto` 是默认值，与`z-index: 0`是有区别的：
> `z-index: 0` 会创建一个新的堆叠上下文，而 `z-index: auto` 不会创建新的堆叠上下文
总结：
1. 当Z-index的值设置为auto时,不建立新的堆叠上下文,当前堆叠上下文中生成的div的堆叠级别与其父项的框相同。
2. 当Z-index的值设置为一个整数时,该整数是当前堆叠上下文中生成的div的堆栈级别。该框还建立了其堆栈级别的本地堆叠上下文。这意味着后代的z-index不与此元素之外的元素的z-index进行比较。
让Chrome支持小于12px 的文字方式有哪些？区别？
常见的解决方案有：
zoom(会触发重排）
zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半
-webkit-transform:scale()
注意的是，使用scale属性只对可以定义宽高的元素生效
-webkit-text-size-adjust:none
percentage：字体显示的大小；
auto：默认，字体大小会根据设备/浏览器来自动调整；
none:字体大小不会自动调整
说说对Css预编语言的理解？有哪些区别?
SASS
LESS
Stylus
嵌套：
三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同
区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
变量：
less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开
sass声明的变量跟less十分的相似，只是变量名前面使用$开头
stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=
作用域：
sass中不存在全局变量
less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止
混入：
在less中，混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明
Sass声明mixins时需要使用@mixinn，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式
stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接
代码模块化
模块化就是将Css代码分成一个个模块
scss、less、stylus三者的使用方法都如下所示
@import'./common';
@import'./github-markdown';
@import'./mixin';
@import'./variables';
margin/padding 设置百分比是相对谁的
总结：margin/padding设置百分比都是相对于父盒子的宽度(width属性)来计算量的
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms
画一条0.5px的线
①meta viewport
initial-scale=0.5
②为1px的线添加CSS样式。
transform：scaleY（0.5）
transition 和 animation 的区别：
伪类与伪元素的区别：
面试官：说说对Css预编语言的理解？有哪些区别? | web前端面试 - 面试官系列 (vue3js.cn)
css/css3实现未知宽高元素的垂直居中和水平居中 - 陌上人如玉，公子士无双 - 博客园 (cnblogs.com)
