初级前端面试篇——HTML&CSS必问1.行内元素/块级元素，非替换元素/替换元素行内元素：不可设置宽高，但是可以和

1.行内元素/块级元素，非替换元素/替换元素

行内元素：

不可设置宽高，但是可以和其他行内元素位于同一行，行内元素一般不可以包含块级元素
元素的高度就是它包含的文字或图片的高度

块级元素：

可以自定义宽高，
独占一行
宽度不设置的话，默认为父元素的宽度

行内块级元素：

可以自由设置宽高
和其他行内或行内块级元素放在同一行

二者区别：

块级元素会独占一行，宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化
块级元素可以包含行内元素和块级元素，但是行内元素不能包含块级元素
行内元素设置width，height，margin-top、margin-bottom、padding-top、padding-bottom无效

inline-block:

既有block元素可以设置宽高的特性，同时又具有inline元素默认不换行的特性，也可以设置vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性

非替换元素/替换元素

替换元素：

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容，比如img元素通过src属性的值来读取图片的信息并显示出来，但是查看html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉，html中img，input，textare，select,object都是替换元素

常见块级元素： div,h1-h6,p,pre,ul,ol,li,form,table,label等

常见行内元素： a,img,span

2.img标签的title和alt属性

title属性指的是图片正常显示时鼠标悬停在图片上方显示的提示文字，主要是给用户解读
title是全局属性，title，id，class是全局属性
alt属性是图片显示不了的时候显示文字
在浏览器中的表现也不同，在火狐浏览器和IE8中，当鼠标经过图片时title值会显示，而alt的值不会显示，只有在IE6浏览器中，当鼠标经过图片时title和alt都会显示,
搜索引擎的抓取图片时，抓取的是alt的属性值，还有就是图片不加alt的话，在页面通过的时候w3c验证时会出现警告

3.meta标签

meta标签提供关于HTML文档的元数据，它不会显示在页面上，但是对于机器是可读的，可用于浏览器，搜索引擎，或web服务
meta的必须属性和可选属性
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性

name

这个属性是供浏览器进行解析，

常用meta标签大总结

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了

百度禁止转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

viewport

viewport主要是影响移动端页面布局的，例如：移动端常用的meta标签

4.DOCTYPE标签

声明位于html标签第一行，告知浏览器的解析器用什么标准文档来解析

怪异模式：浏览器使用自己的怪异模式解析渲染页面

标准模式：浏览器使用W3c的标准解析渲染页面

如果页面没有声明的话，默认会用怪异模式来解析渲染

5.script标签的defer和async

在 HTML 中会遇到以下三类 script：

<script src='xxx'></script>  
<script src='xxx' async></script>  
<script src='xxx' defer></script>

那么这三类 script 有什么区别呢？

script

浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，会暂停解析，先发送网络请求获取该js脚本的代码内容，然后让js引擎执行该代码，当代码执行完毕后恢复解析

script阻塞了浏览器对HTML的解析，如果获取了js脚本的网络请求响应的很慢或者js执行很长时间，都会导致白屏，用户看不到内容

async script

可能阻塞也可能不阻塞，存在多个异步的时候，之间的顺序也不确定，完全依赖于网络的传输结果，谁先到执行谁

defer script

不会阻塞浏览器解析html，一旦网络请求回来后，如果此时html还没有解析完，浏览器不会暂停解析并执行js代码，而是等待html解析完在执行js代码

6.W3C盒模型和怪异盒模型

盒模型的组成：是由content（内容区）、padding（填充区）、border（边框区）、margin（外边距区）这四个部分组成

标准盒模型的大小：

是由content(内容)+padding(填充区)+border(边框区)三个部分组成

标准盒模型占据的位置大小：

是由content(内容)+padding(填充区)+border(边框区)+margin(外边距)四个部分组成

怪异盒模型:

它的大小不会因为border和padding以及margin被撑大，还是原有大小，就是内容区变小了

怪异盒模型的宽度：width（content+border+padding）+margin

怪异盒模型的高度：height（content+border+padding） + margin

盒模型的属性：

padding属性：

边框和内容之间的区域，只能是正值，不能是负值，padding在盒子里面，在盒子和内容之间

用来控制父元素和子元素之间的位置关系，
用来控制元素和内容之间的关系
加了padding后，会把元素原有的大小撑大，如果让元素原本大小不变的话，需要在元素的高度上减掉所加的padding
如果元素是被内容撑开的，没有设置宽高，padding会直接撑开元素，这种情况不用减掉padding
背景图片位置是不受padding影响
背景色会延伸到padding区域

margin外边距：

在元素的外围，透明没有背景颜色，不会撑大元素的大小，margin值可正可负

作用：

控制同辈元素之间的关系
margin是元素边框以外的空白区
margin不会影响元素的实际宽高，但是会增加元素的所占区域

border边框：

1、边框有四个方向： border-top（上边框）、 border-bottom（下边框）、 border-left（左边框）、 border-right（右边框）。可单独设置一边的边框！

2、边框宽度：border-width

3、边框颜色：border-color:

4、边框样式：border-style: solid(实线)/dashed(虚线)dotted(点划线)double(双线)

7.水平垂直居中的方法

方法一：

绝对定位方法：不确定当前的高度和宽度，用css3中的transform：translate(-50%,-50%),div的父级添加绝对定位(position:relative)

<style>
    .parent{
        position: relative;
        width: 300px;
        height: 300px;
        background: lightskyblue;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background: lightsalmon;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

方法二：

绝对定位法：确定了当前div的宽高，margin为当前div宽高的一半

<style>
    .parent{   
        position: relative;       
        width: 300px;
        height: 300px;
        background: lightskyblue;
    }
    .child{           
        position: absolute;
        width: 100px;
        height: 100px;           
        background: lightsalmon;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

方法三：

绝对定位方法：top，left，bottom。right都设为0，margin为auto

<style>
    .parent{   
        position: relative;       
        width: 300px;
        height: 300px;
        background: lightskyblue;
    }
    .child{           
        position: absolute;
        width: 100px;
        height: 100px;           
        background: lightsalmon;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

方法四：

flex布局

<style>
    .parent{      
        display: flex;
        width: 300px;
        height: 300px;
        background: lightskyblue;
        justify-content: center;
        align-items: center;
    }
    .child{           
        width: 100px;
        height: 100px;           
        background: lightsalmon;
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

方法五：

table-cell实现水平垂直居中

<style>
    .parent{                  
        display: table-cell;
        width: 300px;
        height: 300px;
        background: lightskyblue;
        vertical-align: middle;
        text-align: center;
    }
    .child{  
        display: inline-block;                    
        width: 100px;
        height: 100px;           
        background: lightsalmon;           
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

方法六：

绝对定位：calc()函数动态计算

<style>
    .parent{ 
        position: relative;                             
        width: 300px;
        height: 300px;
        background: lightskyblue;          
    }
    .child{   
        position: absolute;                    
        width: 100px;
        height: 100px;           
        background: lightsalmon;     
        left: calc((300px - 100px)/2);      
        top: calc((300px - 100px)/2);      
    }
</style>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

8.BFC理解

BFC BFC(Block Formatting Contexts)意为“块级格式化上下文”。就是页面上的一个渲染区域，容器内的子元素不会对外面的元素布局产生影响，反之亦然。如何生成BFC： float的值不为none; overflow的值不为visible; position的值不为relative和static; display的值为table-cell,table-caption何inline-block中的任何一个

BFC概念

它是页面中的一块渲染区域，并且有一条渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用

BFC的布局规则

内部的盒子在垂直的方向上，一个个地放置

垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的上下margin会发生重叠

每一个元素的左边，与包括的盒子的左边接触，即使存在浮动也是如此

BFC的区域不会与float重叠

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

计算BFC的高度，浮动元素也参与运算

触发BFC的条件

只要元素满足下面任意一条即可触发BFC特性：

html是根元素
浮动元素float除none以外的值
绝对定位：position（absolute，fixed）
display为inline-block,table-cell,flex
overflow除了visble以外的值（hidden，auto，scroll）

1.同一个BFC下外边距会发生重叠

<style>
    div{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
<style>

<body>
    <div></div>
    <div></div>
<body>

解决方案：

<style>
    .p{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
        overflow: hidden;
    }
    .wrap{
        overflow: hidden;
    }
<style>
    
<div class="p"></div>
<div class="wrap">
    <div class="p"></div>
<div>

因为两个div在同一个BFC中，需要让两个div在不同BFC中，所以给其中一个的div套一个父亲div，overflow设置为hidden

2.BFC可以包含浮动的元素（清除浮动）

浮动的元素都会脱离文档流、

<div style="border: 1px solid #000000;">
    <div style="width: 100px; height: 100px; background: lightblue; float: left;"></div>
<div>

容器内元素浮动，脱离了文档流，所以容器只剩下2px的边距高度，触发BFC的时候，容器会撑起浮动元素的高度

<div style="border: 1px solid #000000;overflow: hidden;">
	<div style="width: 100px; height: 100px; background: lightblue; float: left;"></div>
<div>

3.阻止元素被浮动元素覆盖

<div style="height: 100px; width: 100px; float: left; background: lightblue;">
    我是一个左浮动元素
</div>
<div style="width: 200px; height: 200px; background: lightsalmon; overflow: hidden;">
    我是一个没有设置浮动，也没有触发BFC元素
</div>

第二元素被浮动的元素覆盖，但是文本信息不回被覆盖，避免覆盖的话，可以触发第二个元素的BFC，在第二个元素overflow：hidden

<div style="height: 100px; width: 100px; float: left; background: lightblue;">
    我是一个左浮动元素
</div>
<div style="width: 200px; height: 200px; background: lightsalmon; overflow: hidden;">
    我是一个没有设置浮动，也没有触发BFC元素
</div>

9.清除浮动的方法

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

脱离文档流

浮动的元素的特点：

八个字总结：脱标、贴边、字围和收缩

清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷

/* 
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动           
*/
.clearfix:after{
    /* 添加一个内容 */
    content: "";
    /* 转换为一个块元素 */
    display: block;
    /* 清除两侧浮动 */
    clear: both;
}
/* 在IE6中不支持after伪类
所以在IE6中还需要使用haslayout来处理 */
.clearfix{
    zoom: 1;
}

10.position属性

relative:相对定位

1.不影响元素本身的特性（无论块级元素和内联元素都会保留其原本特性）
2.不会使元素脱离文档流（元素原本位置会保留，即使改变位置也不会占用新位置）、
3.没有定位偏移量时对元素无影响
4.提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面， z-index只能在属性值为relative，absolute，fixed的元素上有效）

absolute：绝对定位

使元素完全脱离文档流（在文档流中不占位）
使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
使块级元素在未设置宽度时由内容撑开宽度（改变块级元素的特性）
相对于最近一个定位的父元素偏移（若其父元素没有定位则逐层上找，直到document------页面文档对象）
绝对定位一般和相对定位配合使用
提升层级

fixed：固定定位

相当于浏览器窗口进行定位

11.CSS隐藏元素的方式

display:none

1.DOM结构：浏览器不会渲染display属性为none的元素，不占据空间

2.事件监听：无法进行DOM事件监听

3.性能：动态改变属性会引起重排，性能较差

4.继承：不会被子元素继承，子类不会被渲染

5.transition:不支持display

visbility:hidden

1.DOM结构：元素会被隐藏，但是渲染不会消失，占据空间

2.事件监听：无法进行DOM事件监听

3.性能：动态改变属性会引起重绘，性能较高

4.继承：子元素会继承，子元素可以设置visibility：visible来取消隐藏

5.transition:visbility会立即显示，隐藏时会延时

opacity:0

1.DOM结构：透明度为100%，元素隐藏，占据空间

2.事件监听：可进行DOM事件监听

3.性能：提升为合成层，不会触发重绘，性能较高

4.继承：子元素会继承，子元素可以设置opacity：1 来取消隐藏

5.transition:opacity可以延时显示隐藏

12.Flex布局

首先flex布局用官方解释就是弹性布局，用来为盒模型提供最大灵活性，换个说法，flex就是一种布局方式，类似于block，inline-block

任何容器都可以flex布局

设置为flex布局后，子元素的float，clear,,vertical-align属性将失效

主轴是水平，纵轴是垂直

容器的属性有6个：

flex-direction属性决定主轴的方向
arow:默认值，主轴为水平方向，起点在左端
brow-reserve：主轴为水平方向，起点在右端
ccolumn：主轴为垂直方向，起点在上沿
dcolumn-reserve：主轴为垂直方向，起点在下沿
flex-wrap属性，在默认情况下，项目排在一条线，这个属性的作用是如果一条轴线排不下，该如何换行
anowrap:不换行
bwrap：换行
cwrap-reverse：换行，第一行在下面
flex-flow属性：是flex-direction和flex-wrap的简写形式默认值：row nowrap
justify-content属性：项目在主轴上的对齐方式
aflex-start：左对齐
bflex-end：右对齐
center：居中
dspace-between:两端对齐，项目之间的间隔都相等
espace-around：每个项目两侧的间隔，
align-items属性：项目在交叉抽上如何对齐
aflex-start：交叉轴的起点对齐
bflex-end：交叉轴的终点对齐
ccenter：交叉轴的中点对齐
dbaseine：项目第一行文字的基线对齐
estretch:默认，如果项目未设置高度或为auto，将占满整个屏幕
align-content：定义多跟轴线的对齐方式，如果只有一根轴线的话，该属性不起作用

项目的属性6个：

order，flex-grow，flex-shrink，flex-basis，flex，align-self

order：定义项目的排列顺序
flex-grow：定义项目的放大比例
flex-shrink：定义项目的缩小比例
flex-basis：浏览器根据这个属性计算是否有多余空间，确定item的宽度高度，优先级高于width，height
flex属性是grow，shrink，basis的简写，默认是0 1 auto，后两个属性可选建议是优先写这个属性
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

13.双栏布局和三栏布局

双兰布局：一边固定，另一边自适应

三种方法实现：

float

<style>
    *{
        margin: 0 0;
        padding: 0 0;
    }
    .wrap{
        overflow: hidden;
    }
    .left{
        float: left;
        width: 200px;
        height: 200px;
        background: mediumaquamarine;
    }
    .right{
        height: 200px;
        margin-left: 200px;
        background: mediumpurple;
    }
</style>
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

position


<style>
    *{
        margin: 0 0;
        padding: 0 0;
    }
    .wrap{
        overflow: hidden;
        position: relative;
    }
    .left{
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: tomato;
    }
    .right{
        height: 200px;
        background: turquoise;
        margin-left: 200px;
    }
</style>
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

flex

<style>
    *{
        margin: 0 0;
        padding: 0 0;
    }
    .wrap{
        display: flex;
    }
    .left{
        width: 200px;
        height: 200px;
        background: turquoise;
    }
    .right{
        height: 200px;
        background: tomato;
        flex: 1;
    }
</style>
<div class="wrap">
    <div class="left">左侧固定内容</div>
    <div class="right">右侧内容自适应</div>
</div>

三栏布局：目前常见的就是圣杯布局和双飞翼布局

两边固定，中间自适应

圣杯布局：

<style>
        *{
            margin: 0 0;
            padding: 0 0;
        }
        .header,.footer{
            width: 100%;
            height: 100px;
            background: rgb(133, 69, 216);
        }
        .content{
            padding: 0 100px;
        }
        .middle{
            float: left;
            width: 100%;
            height: 300px;
            background: lightcoral;
        }
        .left{
            position: relative;
            left: -100px;
            margin-left: -100%;
            float: left;
            width: 100px;
            height: 300px;
            background: turquoise;
        }
        .right{
            position: relative;
            right: -100px;
            margin-left: -100px;
            float: left;
            width: 100px;
            height: 300px;
            background: turquoise;
        }
        .clear:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>



   <div class="header">header</div>
    <div class="content clear">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

双飞翼布局


<style>
        *{
            margin: 0 0;
            padding: 0 0; 
        }
        .content{
            overflow: hidden;
        }
        .header,.footer{
            width: 100%;
            height: 100px;
            background: limegreen;
        }
        .middle{
            float: left;
            width: 100%;
            height: 300px;
            background: lightseagreen;
        }
        .middle_inner{
            padding: 0 100px;
        }
        .left{
            float: left;
            width: 100px;
            height: 300px;
            background-color: lightsalmon;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 100px;
            height: 300px;
            background-color: lightsalmon;
            margin-left: -100px;
        }

    </style>

<div class="header">header</div>
<div class="content">
    <div class="middle">
        <div class="middle_inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>

14.重排和重绘

网页生成过程：

1.HTML被HTML解析器解析成DOM树
2.css被css解析器解析成CSSOM树
3.结合DOM树和CSSOM树，生成一颗渲染树
4.生成布局(flow)，浏览器在屏幕上画出渲染树中的所有节点
5.将布局绘制在屏幕上，显示出整个页面

第四部和第五步是最耗时的部分，这两步结合起来，就是平时所说的渲染

渲染：

网页生成的时候，页面会渲染一次

在用户访问的过程中，还会不断渲染

重新渲染需要重复之前的第四部（重新生成布局）+第五步（重新绘制）或者只有第五步（重新绘制）

重排与重绘谁能影响谁？

重排：重新生成布局，重新排列元素

重绘：某些元素的外观被改变，比如：元素的填充色

重绘不一定导致重排，但重排一定会导致重绘

下面情况会发生重绘：

页面初始渲染，这是开销最大的一次重排
添加，删除可见的dom元素
改变元素的位置
改变元素尺寸，比如边距，填充，边框，高度，宽度
改变元素内容，比如文字数量，图片大小
改变元素字体大小
改变浏览器窗口尺寸，比如resize事件发生
激活css伪类，比如：（：hover）
设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

重排影响的范围：

由于浏览器渲染界面是基于流失布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：

全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

全局范围重排：

当p节点上发生reflow时，hello和body也会重新渲染，甚至h5和ol都会受到影响

局部范围重排：

用局部布局来解释这种现象：把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界

重排的优化建议

减少重排范围应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围

尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围

减少重排次数

样式集中改变不要频繁的操作样式，对于一个静态页面的说，对于动态改变样式来说，相较每次修改都直接触及元素，更好的办法就是在cssText变量中编辑
分离读写操作
将DOM离线一旦我们给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。
使用absolute或fixed脱离文档流使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素，重排开销比较小，不会对其它节点造成太多影响。当你在这些节点上放置这个元素时，一些其它在这个区域内的节点可能需要重绘，但是不需要重排
优化动画可以把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小。动画效果还应牺牲一些平滑，来换取速度，这中间的度自己衡量：比如实现一个动画，以1个像素为单位移动这样最平滑，但是Layout就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多启用GPU加速 GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。 GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)

15.CSS选择器

css匹配不是从左到右，而是从右到左，如果从左到右的顺序，那么每条选择器都需要遍历整个DOM树，性能很受影响

*：通用选择器，会给浏览器增加很大负担
#X：ID选择器，比较局限，用的时候需要慎重考虑
.X：类选择器，与ID选择器的区别就是可以重用，可以定义多个元素的样式
X Y：后代选择器，需要考虑后代元素的层级问题
X：元素选择器，可以快速为某类标签定义样式
X:visited and X:link ：链接伪类选择器，:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式
X + Y：紧邻同胞选择器，有时候我们并想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是遍历更深的后代元素比如li里的ul
X ~ Y：后续同胞选择器，选择一个元素后面同属一个父元素的另一个元素
X[title]：简单属性选择器，例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响

css权重：

内联样式 > style标签 > link标签

另外一点需要注意的是!improtant,凡是属性值后加上了!important，那么它的值不会被其他值替换。

权重记忆口诀：

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

!important，加在样式属性值后，权重值为 10000

#content是100，.data是10 ，：hover是10，img，body各是1

利用LVHA原理来给链接应用样式，link-visited-hover-active
尽量不要使用!important,因为!important会覆盖所有的样式规则

利用id增加选择器权重
减少选择器个数

16.CSS动画

阅读下面链接的文章

juejin.cn/post/684490…

17.CSS实现三角形

.box1{
    width: 0px;
    height: 0px;
    border-width: 40px;
    border-style: solid;
    border-color: brown red skyblue orangered;
}
<div class="box1"></div>

如果只要下面的三角形

.box1{
    width: 0px;
    height: 0px;
    border-width: 40px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: tomato;
}
<div class="box1"></div>

直角三角形

.box2{
    width: 0;
    height: 0;
    border: 100px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: tomato;
    border-bottom-color: tomato;
}
<div class="box2"></div>

18.CSS Sprites

为什么给雪碧图的backgroup-position的值是负值?

background-position设置的是雪碧图相对于盒子的起始位置。

优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

19.px rem em

1.相对长度单位。相对于显示器屏幕分辨率而言。 
2.存在浏览器不兼容问题。

1.相对长度单位。相对于当前对象内文本字体尺寸。 
2.em值并不是固定的，em会继承父级元素的大小. 
3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 
4.存在容易造成字体设置混乱问题。

rem

1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px. 
2.如果html根节点设置字体font-size为100px. 则1rem=100px,2rem=200px. 跟父级字体无关。 
3.浏览器兼容性比较好。

用JS计算rem基准值和viewport缩放值

20.伪类/伪元素

伪类：可以理解为特定的css类，但与普通的类不一样，它只处于DOM树无法描述的状态下才能为元素添加样式

伪元素：类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态

二者的区别：

伪类是操作文档中已有的元素，而伪元素是创建一个文档外的元素，这是最关键的区别

在css2中，伪类，伪元素都是单冒号，在css2.1后规定伪类用单冒号，伪元素用双冒号

:before/:after是Css2的写法，::before/::after是Css3的写法 :before/:after 的兼容性要比::before/::after好，不过在H5开发中建议使用::before/::after比较好

margin-top和padding-top为百分比时是相对于父元素的width计算的，不管是margin-left/margin-right

**nth-child和nth-type的区别 **

nth-child 按照个数来算。
nth-of-type 按照类型来计算，如果是class那么碰到不同类型的，单独一类，符合条件的选中。