CSS复习

CSS 指层叠样式表（Cascading Style Sheets）

CSS是一种描述HTML文档样式的语言

CSS描述应该如何显示HTML元素

1.什么是CSS？

CSS指的是层叠样式表（Cascading Style Sheets）【也叫级联样式表】
CSS描述了如何在屏幕，纸张或其他媒体上显示HTML元素
CSS节省了大量工作，它可以同时控制多张网页的布局
外部样式表存储在CSS文件中

2.选择器

简单选择器（根据名称，id，类来选取元素，通用选择器：*）
组合器选择器（根据他们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

组合选择器

后代选择器（空格）：后代选择器匹配属于指定元素后代的所有元素
子选择器（>）：匹配指定元素子元素中所有的元素
相邻兄弟选择器（+）：匹配指定元素紧随其后的元素（只有一个）
通用兄弟选择器（~）：匹配指定元素紧随其后的所有元素

伪类选择器

a：link：未访问的链接
a:visited:已访问的链接
a：hover：鼠标悬停的链接
a：active：已选择的链接

【伪类名称对大小写不敏感】

伪元素选择器

所有伪元素

::after	p::after	在每个p元素之后创建一个伪元素，作为p元素的最后一个子元素
::before	p::before	在每个p元素之前创建一个伪元素其将成为p元素的第一个子元素
::first-letter	p:：first-letter	选择每个p元素的首字母
::first-line	p::first-line	选择每个p元素的首行
::selection	p::selection	选择用户选择了的部分

属性选择器

CSS[attribute]选择器

a[target]{
    
}
/*选择所有带有target属性的a元素*/

CSS[attribute='value']选择器

a[target='_blank']{

}
/*选择所有带有target属性并且属性值_blank的a元素*/

CSS[attribute~='value']选择器

[title~='flower']{
    
}
/*选择所有title属性为flower的所有元素*/

3.CSS层叠顺序

优先级：

行内样式（在HTML元素中）
外部和内部样式表（在head部分）
浏览器默认样式

4.外边距重叠问题/margin合并

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距
合并后的外边距的高度等于两个发生外边距中高度较大的一个
相邻元素的margin-top和margin-bottom会发生重叠
空白元素的margin也会发生重叠

5.元素宽度问题

CSS width属性指定元素的内容区域的宽度，内容区域宽度：是内边距，边框，外边距内的部分，如果元素有指定的宽度，则内边距，边框都会加到元素总宽度中

offsetWidth：内容区域+内边距+边框

元素总宽度：内容区域+内边距+外边距+边框

【如果要让元素总宽度不变可以将box-sizing：border-box】

【height和width属性不包括元素的内边距，边框和外边距，他们是他们之内的宽度】

6.文本转换

text-transform：uppercase 将内容转换为大写字母
text-transform：lowercase 将内容转换为小写字母
text-transform：capitalize 将内容首字母大写

7.Display

设置display属性仅会更改元素的显示方式，而不会更改元素的种类，因此，带有display：block的行内元素不允许在其中包含其他块元素

display：none和visibilty：hidden的区别

display属性设置为none，可以隐藏元素，并且将页面显示为好像该元素不在其中
visibility属性设置为none，opacity：0，可以隐藏元素，但是还是会占用之前相同的空间，仍然会影响布局
display由于隐藏后不占据位置，所以造成了dom树的改变，会引发回流，代价较大

display属性值

block

不设置宽度时，宽度为父元素宽度
独占一行
支持宽高
设置display只是改变元素的样式不能改变元素的结构，在元素中也不能嵌套其他块元素

inline

内容撑开宽度
不是独占一行
不支持宽高
代码换行被解析成空格

inline-block

不设置宽度时，内容撑开宽度
不是独占一行
支持宽高
代码换行被解析成空格

none

隐藏元素并脱离文档流

table

不设置宽度时，宽度由内容撑开
独占一行
支持宽高
默认具体表格特征

8.position属性

static
relative
fixed
absolute
sticky

static

HTML元素默认情况下的定位方式为static（静态）

静态定位元素不受top，bottom，left和right属性的影响

position：static的元素不会以任何特殊方式定位，它始终根据页面的正常流进行定位

relative

元素相对于其正常位置进行定位

设置相对定位的元素的top，right，bottom和left属性将导致其偏离其正常位置进行调整，不会对其余内容进行调整来适应元素留下的任何空间

fixed

元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置，top，right，bottom和left属性用于定位此元素

固定定位的元素不会在页面中通常应放置的位置上留出空隙

absolute

元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面一起移动

【“被定位的”元素是其位置除static以外的任何元素】

sticky

元素根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换，起先是相对定位，直到在视口中遇到给定的偏移位置为止---然后将其粘贴在适当的位置

9.清除浮动

clear属性指定哪些元素可以浮动于被清除元素的旁边及那一侧

.clearfix::after{
    content:"";
    clear:both;
    display:table;
}

10.居中对齐方式

水平居中

inline元素：text-align：center
block元素：margin：auto
absolute元素：left：50%+margin-left负值

垂直居中

inline元素：line-height
absolute元素：margin：auto+top，bottom，right，left=0
absolute元素：top：50%+margin-top负值
absolute元素：transform：translate（-50%，-50%）

11.透明度

opacity属性为元素的背景添加透明度时，其所有元素都会继承相同的透明度
RGBA透明度，子元素不会继承透明度

12.CSS特异性

特异性：

如果有两条或两条以上指向同样元素的冲突CSS规则，则浏览器将遵循一些原则来确定那一条是具体的

通用选择器（*）具有较低的特异性，而ID选择器具有较高的特异性

特异性层次

1.行内样式

2.ID

3.类，属性和伪类

4.元素和伪元素

特异性规则

在特异性相同的情况下，最新的规则很重要--如果将统一规则两次写入外部样式表，那么样式靠后的将更靠近设置的样式的元素，因此会被应用
ID选择器比属性选择器拥有更高的特异性
上下文选择器比单一元素选择器更具体--嵌入式样式表更靠近要设置样式的元素
类选择器会击败任意数量的元素选择器
通用选择器以及被继承的值拥有0

选择器权重

行内样式 1，0，0，0
ID选择器0，n，0，0
类，伪类，属性 0，0，n，0
元素，伪元素： 0，0，0，n
通用选择器0，0，0，0
！important优先级最高
相同权重，后写优先级高

13.字体族

serif（衬线字体）壁画开始，结束的地方有额外的装饰，而且笔画的粗细会有不同，宋体
snas-serif（无衬线体）没有额外的装饰，而且笔画的粗细差不多
cursive（手写体）草书
monospace（等宽字体）字符宽度相同
fantasy（花体）
多字体 fallback

网络字体，自定义字体

@font-face{
    font-family:'IF';
    src:url('');
}
.custom-font{
    font-family:IF;
}

iconfont
字体加引号，字体族不能加引号

14.文字拆行

white-space 控制空白字符的显示，同时还能控制是否自动换行

nowrap：永不换行，空格被合并，换行符无效，原本的自动换行失效，只有 br 才能换行
pre：preserve保留，自动换行没了，空格和换行符全都保留
pre-wrap：保留空格和换行符，且可以自动换行
pre-line：空格被合并了，但是换行符可以发挥作用

word-break 控制单词如何被拆分换行（中文句子也是单词，还有日文，韩文等）

keep-all：所有“单词”一律不拆分换行
break-all：所有单词碰到边界一律拆分换行

word-wrap 控制单词如何拆分换行

break-word：只有当一个单词一整行都显示不下时，才会拆分换行该单词

15.CSS预处理器

基于CSS的另一种语言
通过工具编译成CSS
添加了很多CSS不具备的特性
能提升CSS文件的组织方式

less sass

变量
嵌套
mixin复杂的情况需要带参数
extend简单，需要减少代码文件大小
loop
import

16.BFC

BFC（块级格式化上下文），一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

float：left/right
position：不是relative或者static
overflow不是visible
display是flex inline-blcok等

BFC的常见应用

清除浮动
利用BFC避免margin重叠
自适应两栏布局

BFC的特点

垂直方向上，自上而下排列，和文档流的排列方式一样
在BFC中上下相邻的两个容器的margin会重叠
计算BFC高度时，需要计算浮动元素的高度
BFC区域不会与浮动容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

16.圣杯布局和双飞翼布局

目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

区别

圣杯布局：为了让中间内容不被遮挡，将中间div设置了左右padding-left和padding-right，将多有两个div使用相对布局position：relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
双飞翼布局：为了让中间div不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里使用margin-left和margin-right给左右两栏div留出位置

圣杯布局

优点：不需要添加dom节点
缺点：如果将浏览器无限放大，当middle部分的宽小于left时就会发生布局混乱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bd{
    		padding:0px 200px 0px 180px;      
        }
        .center{
            float:left;
            width:100%;
            background-color:#eee;
            height:100px;
        }
        .right{
            width:200px;
            height:100px;
            position:relative;
            float:left;
            margin-right:-100%;
            background-color:blue;
        }
        .left{
            width:180px;
            float:left;
            position:relative;
            margin-left:-100%;
            right:180px;
            height:100px;
            background-color:red;
        }
        .clearfix:after{
            content:'';
            clear:both;
            display:table;
            visibility:hidden;
        }
    </style>
</head>
<body>
    <div  class='bd clearfix'>
        <div class='center'>center</div>
        <div class='left'>left</div>
        <div class='right'>rigth</div>
    </div>
    
</body>
</html>

双飞翼布局

优点：不会像圣杯布局那样变形
缺点：多了一层dom节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 100%;
            height: 100px;
            float: left;
        }
        .center{
            margin-left: 200px;
            margin-right: 190px;
            background-color: darkorchid;
            height: 100px;
        }
        .left{
            height: 100px;
            width: 200px;
            background-color:darkseagreen;
            float: left;
            position: relative;
            margin-left: -100%;
        }
        .right{
            height: 100px;
            width: 190px;
            float: left;
            background-color: darkturquoise;
            /* position: relative; */
            margin-left:-190px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>

17.盒子模型

标准盒子模型【box-sizing：content-box】

元素内容占据的空间是由width属性设置的，而内容周围的paddding和border值是另外计算的，即在标准模式下的盒模型，盒子的实际内容（content）的width/height=我们设置的width/height

盒子总宽度/总高度=width/height+padding+border

IE盒子模型（怪异模型）【box-sizing：border-box】

在该模式下，浏览器width属性不是内容的宽度，而是内容，内边和边框的宽度的总和，即在怪异模式下的盒模型，盒子（content）宽度+内边距padding+边框border宽度=我们设置的width（height一样的）

盒子总宽度/高度=width/height+margin=内容区宽度/高度+padding+border

C3指定盒子模型种类

box-sizing：content-box 宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
box-sizing： border-box 伪元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距盒边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
box-sizing：inherit 规定应从父元素继承box-sizing属性的值

18.flex

设为flex布局以后，子元素的float，clear和vertical-align属性将失效，采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，。容器默认存在两根轴，水平的主轴和垂直的交叉轴，项目默认沿水平主轴排列

flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：定义如果一条轴线排列不下，如何换行
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认为 row nowrap
justify-content：定义了项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：定义多根轴线的对其方式，如果项目只有一根轴线，该属性不起作用

【以上是设置在容器上】

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

19.响应式设计概念

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

原理：基本原理是通过媒体查询，查询检测不同的设备屏幕尺寸做处理

兼容：页面头部必须有meta声明的viewport

20.clear清除浮动的原理

clear：元素盒子的边不能和前面的元素相邻，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动

【clear属性指得是元素盒子的边不能和前面的浮动元素相邻，所以clear属性对后面的浮动元素是不闻不问的，考虑到float属性要么是left，要么是right，不可能会同时存在，并且clear属性对后面的浮动元素不管，所以当clear：left有效时 clear：right一定无效】

cclear属性只有块级元素才有效，而：：after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时，设置display属性值的原因

面试题

1.CSS样式（选择器）的优先级

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定

行内样式》ID选择器》类，属性，伪类选择器》元素，伪元素》通用选择器

【！important的权重最高】

2.雪碧图的作用？

减少HTTP请求数，提高加载性能
有一些情况可以减少图片大小

3.自定义字体的使用场景

宣传/品牌/banner等固定文案
字体图标

4. base64的使用

用于减少HTTP请求
适用于小图片
base64的体积约为原图的4/3

缺点：

使用base64不代表性能优化
页面解析CSS生成CSSOM时间增加

5.伪类和伪元素的区别？

伪类表状态
伪元素是真的有元素
前者是单冒号，后者是双冒号

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，他们只在外部显示可见，但不会在文档的源代码中找到他们

伪类：将特殊的效果添加到特定选择器上，它是已有元素上添加类别的，不会产生新的元素

【伪类是通过在元素选择器上加入伪类改变元素的状态，伪元素是通过对元素操作进行对元素的改变】

6.实现两栏（三栏）布局的方法？

表格布局
float+margin布局
inline-block布局
flexbox布局

7.position：absolute/fixed有什么区别？

前者相对最近的定位元素absolute/relative
后者相对于屏幕pc/viewport移动

8.display：inline-block的间隙

原因：字符间距，将原本的换行符转换成空白符

解决：消灭字符（去掉所有空格）或者消灭间距（font-size：0）

将标签写在一行‘【代码可读性变差】
为父元素中设置font-size：0，在子元素上重置正确的font-size
为inline-block元素添加样式 float：left【float布局会有高度塌陷的问题】
设置子元素margin为负值【但是元素之间的间距大小与上下文字体的大小有关，并且相同大小的字体，元素之间的间距在不同浏览器中是不一样的，难以统一】
设置父元素，display：table和word-spaceing：-1em；

9.如何清除浮动

形成BFC

使用伪元素来清除浮动（：after，作用域浮动元素的父亲）

【缺点：要考虑兼容性】

.clearfix:after{
    content:"";
    heigth:0;
    line-height:0;
    display:block;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1;/*兼容IE*/
}

添加新的元素对其应用clear：both

【缺点：如果页面浮动布局较多，就要增加很多空页面标签，造成结构的混乱】

.clear{clear:both}
<div class='box'>
    <div style='float:left'>1</div>
    <div style='float:left'>2</div>
    <div style='float:left'>3</div>
    <div class='clear'></div>
</div>

父级div定义overflow：hidden

【缺点：不能和position配合使用，因为超出的尺寸会被隐藏】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: cornflowerblue;
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: absolute;
            left:10px;
            top: 100px;
        }
        .box div{
            background-color: burlywood;
            float: left;
            height: 300px;
            width: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

父级div定义overflow：auto

【缺点：内部宽度超过父级div时，会出现滚动条】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: cornflowerblue;
            width: 100%;
            height: 200px;
            overflow: auto;
            position: absolute;
            left:10px;
            top: 100px;
        }
        .box div{
            background-color: burlywood;
            float: left;
            height: 300px;
            width: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

父级定义高度height

【只适合高度固定得布局，要给出精确得高度，如果高度和父级div不一样时，会产生问题不推荐使用，之间以高度固定的布局使用】
父级display设置为table

【将div属性变成表格，不推荐使用，只是了解】

10.如何适配移动端

viewport
媒体查询
rem适配
流式布局

11.如何产生不占空间的边框

box-shadow

.box{
    box-shadow:0px 0px 0px 1px red;
}

outline
```
.box{
    outline:1px solid red;
}
```

12.CSS动画实现方式有几种？

transition过渡动画
keyfranme（animation）关键帧动画

13.过渡动画和关键帧动画的区别

过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画控制更精细

14.如何实现逐帧动画

使用关键帧动画
去掉补间（steps） animation-timing-function：steps（1）

15.常见的CSS预处理器

Less（Node.js）
Sass

16.预处理器的作用

帮助更好的组织CSS代码
提高代码的复用率
提升可维护性

17.预处理器的能力

嵌套反映层级和约束
变量的使用减少重复代码
Extend 和Minxin代码片段
循环适用于复杂有规律的样式
import CSS文件模块化

18.预处理器的优缺点

优点：提高代码的复用率和可维护性
缺点：需要引入编译过程有学习成本

19.使用CssSprites和Base64编码的区别

CssSprite

页面具有多种风格，需要换肤功能，可使用CssSprite
网站已经趋于完美，不会三天两头的改动（例如button大小，颜色）
使用时无需重复图形内容
没有Base64编码成本，降低图片更新的维护度难
不会增加CSS文件体积

base64

无额外的请求
对于极小或者极简单图片
可像单独图片一样使用，比如背景图片重复使用
没有跨域问题，无需考虑缓存，文件头或者cookie问题

20.未知width，height子元素相对于父元素垂直，水平居中

子绝父相：top，bottom，left，right=0+ margin：auto
子绝父相：transform：translate（-50%，-50%）
使用flex布局：父元素display：flex 将justify-content：center align-items：center

21.隐藏元素得方法有哪些？

display：none，渲染树不会包含改渲染对象，所以这个元素不会响应绑定得监听事件，是非继承属性，子孙节点会随着父节点从渲染树小时，通过修改子孙节点的属性也无法显示
visiblity：hidden：元素在页面中仍然占据空间，但是不会响应监听事件，是继承属性，子孙节点消失是一位内继承了hidden，通过设置visibility：visible可以让子孙节点显示
opacity：0，将元素的透明度设置为0，以此来实现元素的隐藏，并且能够响应元素绑定的监听事件，子节点也会随之消失，并且通过修改子节点的属性也无法显示
position：absolute，通过使用绝对定位元素移出可视区域
z-index：使用其他元素来遮盖住该元素
clip：clip-path：使用元素的裁的方法来实现元素的隐藏，但是不会响应绑定的监听事件
transform：scale（0，0）将元素缩放为0，来实现元素的隐藏，元素仍然在页面中占据位置，但是不会响应绑定的监听事件

22.link和@import有什么区别

link不仅可以导入样式表，还可以导入其他如favicon，但是@import只能导入样式表
link是XHTML语法，不存在兼容问题，但是@import是在css2.1才提出，在IE5+后才支持，所以低版本浏览器不兼容
link引入CSS时，在页面将载入时同时加载，@import需要页面网页完全载入以后加载
link支持使用js控制DOM去改变样式，但时@import不支持

23.transition和animation的区别

transition是过渡属性，是样式值的变化过程，只有开始和结束，animation通过和keyframe结合可以设置中间帧的每个状态
animation可以不触发事件就触发这个过程，而transition需要通过hover等js事件来配合触发
animation可以设置很多的属性，比如循环次数，动画结束的状态等等，transition只能触发一次
animation可以结合keyframe设置每一帧，但是transition只有两帧
在性能方面：浏览器有一个主线程和排版线程，主线程一般是对js运行的，页面布局，生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过GPU将位图绘制到页面上，也会向主线程请求位图等等，我们在使用animation可以改变很多属性，像我们改变了width，height，position等等属性就会引起页面的回流和重绘对性能影响比较大，但是我们使用transition的时候一般会结合transform来进行旋转和缩放等不会生成新的位图不会引起页面的回流

【transform不重绘，不回流是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层，这使得动画在一个独立的层中渲染，当元素的内容没有发生改变，这就没有必要进行重绘，浏览器会通过重新复合来创建动画帧】

24.CSS3中有哪些新特性

新增各种CSS选择器（：not（.input）所有class不是“input”的节点）
圆角（border-radius）
多列布局（multi-column layout）
阴影和反射
文字特效
文字渲染
线性渐变
旋转
增加了旋转，缩放，定位，倾斜，动画，多背景

25.替换元素

html元素分为行内元素和块级元素：

我们知道块级元素可以设置宽，高，行内元素不能设置宽和高，但是一些行内元素，如img是可以设置宽高的，这与行内元素不可以设置宽高相违背了，所以引入了替换元素

替换元素：就是浏览器根据其标签属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）

比如input标签，浏览器根据不同type值来选择输入框还是选择框，在html种像这样的元素有img,input,textera,select

非替换元素：html中大多数是非替换元素，他们直接将内容告诉浏览器，直接显示出来

【替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如iframe，audio，ca

nvas在某些情况下也是替换元素】

替换元素的尺寸从内而外分为

固有尺寸：指的是替换内容原本的尺寸，例如，图片，视频作为一个独立文件存在得时候，都有着自己的宽度和高度
HTML尺寸：只能通过HTML原生属性改变，这些HTML原生属性包括的width和height属性size属性
CSS尺寸：特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content-box

【这三层结构的计算规则】：

如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高
如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高
如果有CSS尺寸，最终尺寸由CSS属性决定
如果“固有尺寸”含有固定的宽高比例，同时仅设置了宽高或设置了高度，则元素依然按照固有的宽高比例显示
内联替换元素和块级替换元素都使用上面同一套尺寸计算规则

26.line-height

line-height概念

line-height指一行文本的高度，包含了字间距，实际上是下一行到上一行基线的距离
如果一个标签没有定义height属性，那么其最终表现的高度由line-height决定
一个容器没有设置高度，那么撑开容器高度是line-height，而不是容器内的文本内容
把line-height值设置为height一样得大小可以实现单行文字的垂直居中
line-height和height都能撑开一个高度

line-height的赋值方式

带单位：px是固定值，em参考父元素的font-size计算自身的行高
纯数字：会把比例传递给后代
百分比：将计算后的值传递给后代

27.CSS工程化

CSS工程化目的

宏观设计：CSS代码如何组织，如何拆分，模块结构怎样设计
编码优化
构建
可维护性

CSS工程化实践

预处理器：Less，Sass等
重要的工程化插件：PostCss
webpack loader

预处理器的特性

嵌套代码的能力，通过嵌套来反映不同CSS属性之间的层级关系
支持定义css变量
提供计算函数
允许对代码进行extend和mixin
支持循环语句的使用
支持将CSS文件模块化，实现复用

PostCss

PostCss可以编译尚未被浏览器广泛支持的先进的CSS语法，还可以自动为一些需要额外兼容的语法增加前缀，PostCss有着强大的插件机制，支持各种各样的扩展，极大的强化了CSS的能力

PostCss的作用

提高CSS代码的可读性，postcss其实可以做类似预处理器能做的工作
当我们的CSS代码需要适配低版本浏览器时，postcss的Autoprefixer插件可以帮助我们自动增加浏览器前缀
允许我们编写面向未来的CSS：postcss能够帮助我们编译css next代码

如何实现webpack处理css

webpack在没有loader的帮助下是不能处理css的，webpack本生是一个面向js且只能处理js代码的模块化打包工具
webpack中操作css需要使两个loader，css-loader和style-loader
css-loader：导入css模块，对css代码进行编译处理
style-loader：创建style-loader：创建style标签，把css内容写入标签

【在实际使用中，css-loader的执行顺序一定要安排在style-loader的前面，因为只有完成了编译过程，才可对css代码进行插入，否则会报错】

28.什么是margin重叠，如何解决

Margin重叠：两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距重叠，需要注意的是，浮动元素和绝对定位这种脱离文档流的元素的外边距不会重叠，重叠只会出现垂直方向

计算原则：

如果两者都是正数，那么就是最大值
如果一正一负，就用正值减去负值的绝对值
两个都是负值，用0减去两个中绝对值大的那个

兄弟之间重叠

底部元素变为行内盒子：display:inline-block
底部元素设置浮动：float
底部元素的position的值为:absolute/fixed

父子之间重叠

父元素加入：overflow：hidden
父元素添加透明边框
子元素变为行内盒子
子元素加入浮动属性或定位

29.display，float，position的关系

首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现
然后判断position的值是否为absolute或fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block
如果posotion的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换，如果psotion的值为relative并且float属性的值存在，则relative相对于浮动后的最后位置定位
如果float值为none，则判断元素是否是根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display不变

30.设置小于12px的字体

在谷歌下css设置字体大小为12px即一下时，显示都是一样的大小，都是默认12px

解决方法

使用webKit的内核-webkit-text-size-adjust的私有属性CSS属性来解决，只要家里-webkit-text-size-adjust：none字体大小就不受限制了，但是chrome更新到27版本之后就不可以使用了
使用CSS3的transform缩放属性
使用图片，如果是内容固定不变的情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观