媒介查询相关的自适应布局
媒体查询就是针对不同媒体类型在不同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