CSS训练display有哪些属性？* none：不展示 block：块类型，独占一行 inline：行内，共享一行 i

display有哪些属性？*

none：不展示
block：块类型，独占一行
inline：行内，共享一行
inline-block：默认行内块状，共享一行
list-item | table
inherit：继承

inline和inline-block的区别？*

inline：共享一行，行内概念
inline-block：共享一行，内容作为block对象呈现

行内元素和块级元素有什么区别？*

行内元素无法设置宽高，水平方向可以设置margin、padding，垂直方向无法设置，行内元素不会自动换行

块级元素可以设置宽高，水平、垂直方向可以设置margin、padding，块级元素会自动换行；多个块级元素默认是从上往下换行排列

有哪些行内和块级元素？*

块级：div、form、h1（标题）、pre（格式化文本）、table、ul

行内：a、br、code、em、img、i、input、strong

块级元素和行内元素有哪几种转换方式？**

display
float：设置left、right=>display:block=>去除行内元素之间的空白问题
position：absolute、fixed=>行内变为块级

选择器和优先级*

选择器有哪些：

内联样式：写在标签上，权重1000
id选择器：#id， 100
类选择器：.class， 10
属性选择器：a[ref="link"]， 10
标签选择器：div， 1
伪类选择器：li:last-child， 10
伪元素选择器：li:before， 1
兄弟选择器：div+p， 0
子选择器：ul>li， 0
后代选择器：li a， 0
通配符：* {...}， 0

权重高的优先生效，同样权重，写在后面的生效

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

特殊场景的优先级如何判断*

!important：优先级最高，继承得到的样式，优先级最低

可继承的样式有哪些**

字体：font-family,font-weight,font-size,font-style
文本：text-indent,text-align,line-height,word-spacing,letter-spacing,color
元素：visibility
列表布局：list-style
光标：cursor

不能继承的属性

规定元素生成框的类型：display
盒模型属性：width、height、margin、padding、min-height、overflow

隐藏、显示

有哪些可以隐藏一个元素的方法，有什么区别：**

display:none；在文档流中不占位
visibility:hidden；占位
opacity:0；占位
position:absolute；不占位
z-index:负值；不占位
clip（剪裁）；占位
transform:scale(0,0)；占位

display和visibility有什么区别？**

都是让元素隐藏和展示

不同点：

浏览器渲染时，display不占据空间，渲染树中不存在；visibility会占据渲染树的节点
visibility是可继承的，display不会被继承
性能上：display会造成文档的回流，visibility只会造成文档的重绘

盒模型及其特性

标准盒模型、IE盒模型的概念，怎么转换：*

标准盒模型：宽高是针对内容区域

IE盒模型：宽高是内容+padding+border（又称怪异盒模型）

转换方式：box-sizing:content-box（标准盒模型）；box-sizing:border-box（IE盒模型）

回流重绘和CSS渲染过程

对文件节点解析，会生成一个DOM tree
对CSS样式做解析（从右往左），生成CSSOM tree（CSS规则树）
DOM tree和CSSOM tree结合，生成layout tree（布局树），布局树会生成整个节点的信息，最终被绘制到整个页面

手写css样式-->CSSOM-->layout tree-->paint

从节点到生成布局树的过程称为回流

把布局树转化成实际在页面上渲染出来的内容，称为重绘

伪元素和伪类的概念，如何使用，区别是什么？*

伪元素（双冒号::before）：只出现在css样式表中，不存在于doc文本流中

伪类（单冒号:hover）：在已有的元素上添加特殊类别，不产生新的元素

图片格式以及CSS-sprites*

图片格式有哪些，怎么应用，如何选择

BMP：清晰，无损，无压缩，通常体积较大
GIF：无损，采用了LZW压缩算法，有一定的体积优化，但只支持8bit索引色，色彩还原度不太好，支持动图
JPEG：有损，直接色存储，色彩丰富，适合还原度要求较高的场景
PNG-8：无损，使用了索引色，不是真的色彩色，体积更小，支持透明度
PNG-24：无损，直接色存储，有压缩
SVG：无损，矢量图，是由点和线连接的，放大不会失真，适合logo、icon
webP：支持有损、无损，直接色存储，支持透明度，有压缩，但只有Chrome、opera支持

css-sprites（精灵图、雪碧图）：减少http请求

将所有涉及到的图片，放在一张大图中，通过background-repeat、background-position等属性进行查找定位

替换图片、后期维护可能不太容易

减少加载多张图片的 HTTP 请求数（一张精灵图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁

像素密度与图片应用*

像素密度：

经典设备宽高（设计图）：414px*896px

实际设备物理像素：1242px*2688px

用宽做除法：1242/414=3，也就是逻辑像素:物理像素=1:3，即像素密度3（3倍屏），设计图上一个像素就等于实际设备的3个像素

如何在图片的加载上应用动态密度？

设计师提供2、3、4倍图，这样，200*300的图片在3倍屏上要是600*900，才会不失真，使用媒体查询进行不同屏幕上使用不同的图

检测手机是几倍屏：window.devicePixelRatio

image{
    background:('1x.png')
}
@media only screen and (min-deivce-pixel-ratio:3){
    image{
        background:('3x.png')
    }
}

css工程化与预处理

预处理器（less、scss、styleus）：利用编译库提供能力，提供层级、mixin、变量、循环、函数

后处理器（postCss）：利用后处理器，给属性增加前缀，实现跨浏览器兼容

单行、多行文本超出问题

手写一个单行、多行文本超出省略

// 单行省略
.class{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowarp; //强制不换行
}

// 多行省略
.class{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box; //弹性伸缩盒子模型
    -webkit-box-orient:vertical; // 从上往下垂直排列
    -webkit-line-clamp:3; //显示的行数
    //webkit内核提供的能力，只支持webkit内核的浏览器
}

// 多行省略-兼容性方案
p{
    position:relative;
    line-height:20px;
    height:40px;
    overflow:hidden;
}
p::after{
    content:'...';
    position:absolute:
    bottom:0;
    right:0;
    // 不足之处：一定要设置行高，如40px，解决：js动态替换行高
}

px、em、rem、百分比等单位

百分比：子元素的百分比相对于直接父元素的对应属性
em：相对于父元素的字体大小的倍数
rem：相对于根元素的字体大小的倍数
vm：视窗宽度，满视窗宽度为100vm
vh：视窗高度，满视窗高度为100vh
vmin：vm和vh中较小值
vmax：vm和vh中较大值

如何利用rem实现响应式

根据当前设备的视窗宽度与设计稿的宽度得到一个比例
根据比例设置根节点的font-size
所有长度单位使用rem

布局

浮动：

浮动元素脱离文档流，不占据空间，不受原有文档流的影响，同时无法影响原有父类，会造成高度塌陷

浮动元素碰到包含它的边框或者其他浮动元素的时候会停留

浮动元素高度独立，不会再影响撑开原有父类的高度

清除浮动的方法

（1）父级div定义overflow:hidden：

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好。
缺点：必须定义width或zoom:1，不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解的朋友使用。

（2）父级结尾处添加空的div，设置clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单，代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。
建议：此方法是以前主要使用的一种清除浮动方法。

（3）父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。

（4）父级div定义overflow:atuo

原理：同1，使用overflow:auto时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好。
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

（5）父级定义伪类:after和zoom

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。不支持IE6、IE7
建议：推荐使用，建议定义公共类，以减少CSS代码。

.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{
    zoom:1
}

（6）父类定义伪元素：::after（使用伪元素模拟在父级div最后添加一个空的div）

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

把父元素属性设置为 overflow: auto 或 overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素

如何实现一个盒子水平垂直居中

（1）利用定位：已知盒子的宽高

（2）利用transform：已知或不知盒子宽高

（3）利用margin:auto

（4）利用display:flex

（5）利用display:table-cell

BFC是什么

BFC（Block formatting context）直译为“块级格式化上下文”，是web页面中盒模型布局的css渲染模式，指一个独立的渲染区域，或者说是一个隔离的独立容器

形成BFC的条件：

根元素body
浮动元素：float除none以外的值
定位元素：position（absolute、fixed）
display为以下其中之一的值：inline-block、table-cell、table-caption
overflow除了visible以外的值（hidden、auto、scroll）

BFC的特性：

内部的box（块级元素）会在垂直方向上一个接一个的放置
垂直方向的距离由margin决定（两个兄弟盒子之间的垂直距离不是两个外边距之和，而是由较大的为准）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动元素也参与其中（利用overflow:hidden清除浮动）
BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面的元素

BFC的区域不会与float的元素区域重叠：两栏布局：左边固定宽度，右边不设宽，自适应

//浮动+生成BFC
.left { 
    float: left; 
    width: 200px; 
    height: 300px; 
    margin-right: 10px; 
    background-color: red; 
} 
.right { 
    overflow: hidden;/*创建bfc，就不会重叠 */ 
    height: 300px; 
    background-color: purple; 
}

其他的两列布局实现：

//浮动+width auto
.left { 
    float: left; 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
.right { 
    margin-left:200px;
    width:auto
}

// flex布局
.container{
    display:flex;
}
.left{
    width:200px;
}
.right{
    flex:1;
}

利用BFC防环绕：浮动的盒子会盖住下面的盒子，但下面盒子的文字不会被覆盖，反而会环绕浮动的盒子

<div class="left"></div> 
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 </p>

.left { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
} 
p { 
    background-color: green; 
    overflow: hidden; //利用BFC防环绕
}