CSS相关总结

HTML语义化

1.提高代码的可读性，可以更快的了解到页面的布局。

2.让搜索引擎的爬虫程序更容易理解代码。

常见的语义化标签有： <header> <main> <footer> <nav>

块级元素和内联元素

块级元素：display:block/table

特点：独占一行。 div h1(hx) p ul li table form

内联元素：display:inline/inline-block。

特点：不会独占一行，紧跟着排列，直到没有足够空间才换行。 span strong a img select iframe

盒模型

盒模型是：内容(content)、填充(padding)、边界(margin)、边框(border)。

使用box-sizing来控制盒子模型的解析模式，默认content-box(标准盒模式),border-box是IE盒模式。

IE盒模型（box-sizing:border-box）

宽度 = 内容宽度width(content+border+padding)+margin

        .box{
            box-sizing:border-box;
            width:100px;//两边的padding+两边的border+content = width
            height:100px;
            background-color: aquamarine;
            padding:10px;
            margin: 20px 50px;
            border: 10px solid black;
        }

W3C盒模型(box-sizing:content-box)

宽度 = 内容宽度width(content)+border+padding+margin

        .box{
            box-sizing:content-box;
            width:100px;
            height:100px;
            background-color: aquamarine;
            padding:10px;
            margin: 20px 50px;
            border: 10px solid black;
        }

布局

flex

flex是CSS3提出的一种新的布局方法。设置为flex的容器，内部会有两个轴，一个是主轴（默认水平从左到右），一个是交叉轴，盒子内部的项目会按照主轴进行排列。 www.bilibili.com/video/BV1Lp…

      
        .container{
            background-color: brown;
            height:500px;
            display: flex;/*开启flex布局*/
            flex-flow: row wrap;/* 主轴是水平的 换行*/
            justify-content:center;/*主轴上项目的对齐方式*/
            /*align-items:center;/*交叉轴 单行 项目的对齐方式*/
            align-content:center;/*交叉轴 多行 项目的对齐方式*/
        }
        .box{
            background-color: bisque;
            width:50px;
            height:50px;
            margin:10px;
        }

垂直居中

        .container{
            width:100%;
            height:400px;
            background-color:antiquewhite;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .element{
            width:100px;
            height:100px;
            background-color:red;
        }

导航栏布局

    header{
            width:100%;
            height:100px;
            background-color: palevioletred;
            color:white;

            display:flex;
            flex-direction:row;
            align-items:center;
        }
        nav,ul{
            display:flex;
            flex-direction:row;
            align-items:center;
        }
        nav {
            margin-right:auto;/*会把同级的兄弟元素顶到最右边*/
        }

        li{
            list-style-type: none;
            background-color: palevioletred;
            margin:5px 10px;
        }
        span{
            padding:10px;
            background-color: pink;
            border-radius:25%;
        }
        
        
 <header>
        <nav>
            <a><img width="50px" height=" 50px" src="https://mt.lenovo.com.cn/c/114/1542708313996.png"/></a>
            <ul>
                <li>首页</li>
                <li>博客</li>
                <li>其他</li>
            </ul>
        </nav>
        <div>
            <span>登录</span>
            <span>注册</span>
        </div>
    </header>

两栏布局

        header{
            width:100%;
            height:100px;
            background-color: palevioletred;
            color:white;

            display:flex;
            flex-direction:row;
            flex-wrap:wrap;/*宽度不足时 自动换行*/
        }
        .left{
            flex: 0 0 300px;/* 增长的量  收缩的量  基准*/
            background-color: pink;
        }
        .right{
            flex: 1 0 0;/*剩余的页面都给右边*/
            background-color: powderblue;
        }

圣杯布局

<!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>
        body{
            display: flex;
            flex-direction:column;
            height:100vh;/*自适应屏幕高度*/
        }
        header,footer{
            width:100%;
            height:50px;
            background-color: palevioletred;
        }
        section{
            flex-grow:1;/*作为body的子元素 伸展高度*/

            display:flex;
            flex-direction:row;
        }
        .main{
            background-color: pink;
            flex:1;/*伸展宽度*/
        }
        .left,.right{
            flex:0 0 100px;
            background-color: skyblue;
        }
        .left{
            order:-1;/*越小越在前面*/
        }

        /*响应式布局*/
        @media(max-width:768px){
            section{
                flex:1;
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>这是顶部</header>
    <section>
        <div class="main">这是中部</div>
        <div class="left">这是左部</div>
        <div class="right">这是右部</div>
    </section>
    <footer>这是尾部</footer>
</body>
</html>

伸展子元素

<!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>
        body,html{
            height:100%;
        }
        body{
            display: flex;
            flex-direction:column;
        }
        section{
            background-color: skyblue;
            flex:1;

            display: flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }
        .content{
            width:100%;
            height:250px;/*给定父元素的高度*/
            border:1px solid black;
            display:flex;
            flex-wrap:wrap;
            justify-content: space-around;
            align-items:center;
        }
        .content > div{
            flex: 0 0 200px;/*给定宽*/
            background-color: pink;
            border-radius:10%;
        }
        .content > div:hover{
            align-self: stretch;/*单个子元素的伸展*/
        }

        header,footer{
            height:50px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
    <header>这是顶部</header>
    <section>
        <h1>这是一个标题</h1>
        <div class="content">
            <div>这是第一个块</div>
            <div>这是第二个块</div>
            <div>这是第三个块</div>
        </div>
    </section>
    <footer>这是尾部</footer>
</body>
</html>

两栏布局

左边固定宽度，右边自适应

    <style>
        header{
            width:100%;
            height:100px;
            background-color: bisque;
        }
        .container{
            overflow:hidden;/*开启BFC*/
        }
        .left{
            float:left;
            width:100px;
            height:400px;
            background-color: cadetblue;
        }
        .right{
            margin-left:110px;
            height:400px;
            background-color: darkgray;
        }
        footer{
            /*clear:both; 清除浮动*/
            width:100%;
            height:100px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <div class="container">
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
    </div>
    <footer>这是尾部</footer>
</body>
</html>

三栏布局

给container设置相对定位，里面三栏使用绝对定位

    <style>
        header{
            width:100%;
            height:50px;
            background-color: aquamarine;
        }
        main{
            width:100%;
            height:500px;
            position:relative;/*设置定位*/
        }
        main .leftNav{
            position:absolute;
            top:0;
            left:0;
            width:50px;
            height:100%;
            background-color: brown;
        }
        main .middleNav{
            margin-left:60px;
            margin-right:60px;
            background-color: bisque;
            height:100%;
        }
        main .rightNav{
            position:absolute;
            top:0;
            right:0;
            height:100%;
            width:50px;
            background-color:brown;
        }
        footer{
            width:100%;
            height:50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <main>
        <div class="leftNav"></div>
        <div class="middleNav"></div>
        <div class="rightNav"></div>
    </main>
    <footer>这是尾部</footer>

</body>
</html>

使用左浮动，父元素开启BFC

        header{
            width:100%;
            height:50px;
            background-color: aquamarine;
        }
        main{
            width:100%;
            height:500px;
            overflow:hidden;
        }
        main .leftNav{
            float:left;
            width:50px;
            height:100%;
            background-color: brown;
        }
        main .middleNav{
            margin-left:60px;
            margin-right:60px;
            background-color: bisque;
            height:100%;
        }
        main .rightNav{
            float:right;
            height:100%;
            width:50px;
            background-color:brown;
        }
        footer{
            width:100%;
            height:50px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <main>
        <div class="leftNav"></div>
        <div class="rightNav"></div>
        <div class="middleNav"></div>
    </main>
    <footer>这是尾部</footer>

</body>
</html>

父元素开启flex布局,middle设置flex:1

<!DOCTYPE html>
<html>
    <title></title>
    <style>
        header,footer{
            width:100%;
            height:50px;
            background-color: beige;
        }
        .container{
            width:100%;
            display:flex;/*flex布局*/
        }
        .middle{
            flex:1;
            height:400px;
            background-color: cadetblue;
        }
        .left{
            width:50px;
            height:400px;
            background-color: gray;
        }
        .right{
            width:50px;
            height:400px;
            background-color: gray;
        }

    </style>
    <body>
        <header>这是首部</header>
        <div class="container">
            <div class="left">这是左边</div>
            <div class="middle">这是中间</div>
            <div class="right">这是右边</div>
        </div>
        <footer>这是尾部</footer>
    </body>
</html>

圣杯布局（中间栏要最先开始渲染）

注意：（浮动负边距内边距定位）

结构上，需要在三栏外包一层container
css中首先在最外层加上伪元素清除浮动，设置padding
middle left right都左浮动，middle宽度100% 其他两个定宽
left marign-left:-100%, 然后设置相对定位左移自己的宽度。
right margin-left:-自己的宽度，然后设置相对定位，右移自己的宽度

<!DOCTYPE html>
<html>
    <title></title>
    <style>
        header,footer{
            width:100%;
            height:50px;
            background-color: beige;
        }
        .container{
            padding: 0 50px;/*防止左边那栏超出页面*/
        }
        /*三个都左浮动*/
        .middle{
            float:left;
            width:100%;/*中间自适应宽度*/
            height:400px;
            background-color: cadetblue;
        }
        .left{
            float:left;
            width:50px;
            height:400px;
            background-color: gray;

            margin-left: -100%;/*移到最左边*/
            position:relative;/*向左移动 防止挡住middle*/
            left:-50px;
        }
        .right{
            float:left;
            width:50px;
            height:400px;
            background-color: gray;

            margin-left:-50px;/*移动自己的宽度就行*/
            position:relative;
            right:-50px;
        }
        .clearfix::after{
            display:block;/*清除浮动*/
            content:"";
            clear:both;

        }
    </style>
    <body>
        <header>这是首部</header>
        <div class="container clearfix">
            <div class="middle">这是中间</div>
            <div class="left">这是左边</div>
            <div class="right">这是右边</div>
        </div>
        <footer>这是尾部</footer>
    </body>
</html>

双飞翼布局(浮动负边距边距)

注意:

整体布局是在middle外包一层container,然后给container left right设置左浮动
container设置100%宽度,left，right定宽（左外边距同上）。
为了防止middle被左右遮住，设置margin: 0 50px;
清除浮动加在footer

<!DOCTYPE html>
<html>
    <title></title>
    <style>
        header,footer{
            width:100%;
            height:50px;
            background-color: beige;
        }
        .container{
            float:left;
            width:100%;/*中间自适应宽度*/
        }
        /*三个都左浮动*/
        .middle{  
            height:400px;
            margin: 0 50px;/*防止被挡住*/
            background-color: cadetblue;
        }
        .left{
            float:left;
            width:50px;
            height:400px;
            background-color: gray;

            margin-left: -100%;/*移到最左边*/
            
        }
        .right{
            float:left;
            width:50px;
            height:400px;
            background-color: gray;

            margin-left:-50px;/*移动自己的宽度就行*/
          
        }
        footer{
            clear:both;/*清除浮动*/
        }
    </style>
    <body>
        <header>这是首部</header>
        <div class="container">
            <div class="middle">这是中间</div>
        </div>
        <div class="left">这是左边</div>
        <div class="right">这是右边</div>
        <footer>这是尾部</footer>
    </body>
</html>

等高布局

居中的方法

水平居中

正常文档流的水平居中(设置width 和 margin)

        .box{
            width:100px;
            height:100px;
            margin: 0 auto;
            background-color: black;
        }

绝对定位的元素水平居中(设置 width margin left right)

        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin:auto;
            left:0;
            right:0;
            background-color: black;
        }

垂直居中

已知元素的高度：绝对定位 + top + margin

        .box{
            position:absolute;//绝对定位
            width:100px;
            height:100px;
            top: 50%;//距离父元素顶部50%
            left:50%;
            margin:-50px 0 0 -50px;//再向上移一半的高度
            background-color: black;
        }

未知元素高度：绝对定位 + top+ transform

        .box{
            position:absolute;
            width:100px;
            height:100px;
            top: 50%;
            left:50%;
            transform:translate(-50%,-50%);
            background-color: black;
        }

flex

        .container{
            height:500px;
            display:flex;
            align-items:center;//垂直居中
            justify-content:center;//水平居中
        }
        .box{
            width:100px;
            height:100px;
            background-color: black;
        }

文本垂直居中（line-height）和水平居中(text-align)

        .box{
            width:100px;
            height:100px;
            text-align:center;
            line-height:100px;
            background-color: black;
            color:white; 
        }

line-height + vertical-align(图片)

BFC(块格式化上下文)

形成一个独立的渲染区域，让这里的元素不会受外界影响。

BFC的触发条件

1.根元素(html)，一个根元素本身就是一个BFC区域。

2.float不为none

3.overflow 不为 visible

4.position 不为static 或者 relative

5.display 为inline-block、table-cell、table-caption,flex。

BFC的特性

1.BFC内部，盒子由上至下按顺序排列，间隙由盒子的外边距决定。并且同一个BFC内的两个相邻盒子具有相对方向的外边距时，外边距会发生折叠。

2.BFC内部无论是浮动盒子还是普通盒子，其左都和包含块的左边接触。

3.BFC区域不会和float区域相叠加。

4.BFC内外布局不会互相影响。

5.计算BFC高度的时候会把浮动元素的高度叶计算在内。

可以解决问题

juejin.cn/post/684490…

浮动覆盖问题

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。

<style>
    body {
        width: 300px;
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

.aside和.mian重叠了。试分析一下，由于两个box都处在同一个BFC中，都是以BFC边界为起点，如果两个box本身都具备BFC的话，会按顺序一个一个排列布局，现在.main并不具备BFC，根据BFC特性2：每个元素的margin box的左边，与包含块border box的左边相接触。即使存在浮动也是如此。

虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触

根据BFC第3条特性：BFC的区域不会与float box重叠

我们可以通过通过触发main生成BFC，来实现自适应两栏布局。

.main {
    overflow: hidden;

浮动使父元素高度塌陷问题

子元素浮动脱离标准流，而父元素没有设置高度，就会使父容器高度无法被撑开。

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/*高度仅被p撑开*/
        }
        .container img{
            float:left;/*左浮动脱离文档流*/
            width:200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/>
        <p>这是一段文字</p>
    </div>

解决方法：

1.在父元素的最后增加一个空标签，设置样式clear:both。这样书写比较方便，但是增加了无意义的标签，结构化差。

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/*高度仅被p撑开*/
        }
        .container img{
            float:left;/*左浮动脱离文档流*/
            width:200px;
        }
        .container .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/>
        <p>这是一段文字</p>
        <p class = "clear"></p>
    </div>

2.给父元素overflow：hidden,开启BFC。代码简洁，但是会使子元素不自动换行，从而隐藏掉被溢出的元素。

        .bfc{
            overflow: hidden;/*溢出的部分隐藏  开启bfc*/
        }

3.给父元素增加伪元素::after。

   <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/*高度仅被p撑开*/
        }
        .container img{
            float:left;/*左浮动脱离文档流*/
            width:200px;
        }
        .container::after{
            content:"";
            clear:both;
            display:block;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/>
        <p>这是一段文字</p>
    </div>

margin 折叠问题

兄弟元素折叠:box1的下边距和box2的上边距合并，使得两个Box之间的距离是较大的那个。

  <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            background-color: bisque;
            margin-top:10px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box">hi,这是box1</div>
        <div class="box">hi,这是box2</div>
    </div>
    
</body>

解决方法是对不需要合并外边距的那个元素加一个父元素，然后开启BFC，这样这个元素和其他元素不在同一个BFC内，就不会外边距合并。

父子元素折叠子元素的margin-top会传给父元素,然后父元素的margin-top是子元素和父元素中的最大值,而子元素相对父元素是不动的。

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            height:100px;
            background-color: brown;
        }
        .box{
            background-color: bisque;
            margin-top:40px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box">hi,这是第一个</div>
    </div>

解决方法父元素开启BFC,这样BFC内部的布局就不会影响外部的布局。

   <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            height:100px;
            background-color: brown;
        }
        .box{
            background-color: bisque;
            margin-top:40px;
            margin-bottom: 20px;
        }
        .bfc{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <div class="box">hi,这是第一个</div>
    </div>

也可以使用伪元素在父元素前加一个空白元素，使子元素不是第一个。

        .container::before{
            content:"";
            display: table;
        }

元素隐藏方法

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

CSS的百分比

按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。

但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

浏览器如何解析CSS选择器

CSS选择器的解析是从右向左解析的。

若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

CSS选择符有哪些，哪些属性可以继承

id选择器（#myId）
类选择器（.myClass）
标签选择器（p div h1）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器 (li a)
通配符选择器（*）
属性选择器（a[rel = 'external']）
伪类选择器（a:hover, li:nth-child）

可以继承的属性:font-family、font-size、color 不能继承的属性：border margin padding width height

CSS优先级计算

元素选择器 div,input,span：1

class选择器 .box,.content: 10

id选择器 #box,#content: 100

一些规则：

优先级可以叠加计算
优先级相同的，选择最后出现的样式
继承得来的优先级最低

CSS的伪类和伪元素

伪类和伪元素的区别：伪元素（::）会创建新的对象,而伪类只会选择已经存在的对象。

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

CSS预处理器

less,sass(scss)

CSS预处理是一种将CSS作为目标生成文件的，使用变量、函数及其简单的逻辑实现更加简洁、适应性更强、可读性更好、更加易于代码维护的兼容浏览器的页面样式文件。

它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

常见属性

position

absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
规定从父元素继承 position 属性的值。- static(默认)->按正常文档流进行排列

overflow

hidden：溢出的部分隐藏
scroll：出现滚动条
visiblity:默认正常显示
auto：溢出时出现滚动条。

display

block       	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none        	元素不显示，并从文档流中移除。
inline      	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。
list-item   	像块类型元素一样显示，并添加样式列表标记。
table       	此元素会作为块级表格来显示。
inherit     	规定应该从父元素继承 display 属性的值。

CSS3新特性

 新增各种CSS选择器	（: not(.input)：所有 class 不是“input”的节点）
    圆角		    （border-radius:8px）
    多列布局	    （multi-column layout）
    文字特效		（text-shadow、）
    线性渐变		（gradient）
    旋转		 	（transform）
    缩放,定位,倾斜,动画,多背景
    例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

px em rem

'rem'是'css3'新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了.

逻辑像素(css的px) = 设备像素 × 缩放因子
为了移动端更好的适配我们引入了em和rem这2个动态单位
em的大小与父元素的font-size有关，
rem的大小与根元素html的font-size有关
一般在移动端我们会使用js动态计算跟节点html的font-size来达到自适应的目的。

链接：juejin.cn/post/684490…

动画和过渡

手写题

CSS创建一个三角形

当把上图中的content部分设为0，那么div就是由四个三角形（边框宽度不等时会出现四边形）组成的。只显示一个三角形，可以把上左右边框设为透明

        .box{
            width:0;
            height:0;
            border:100px solid transparent;
            border-bottom-color: black;
        }

一个等边三角形

        .box{
            width:0;
            height:0;
            border:100px solid transparent;
            border-bottom: 173px solid black;
        }

一个直角三角形

把中间的节点拉到右上角，即把top和right设为0。

        .box{
            width:0;
            height:0;
            border-left:100px solid transparent;
            border-bottom:100px solid black;
        }

溢出文本变成...

    .left{
        width:50px;
        overflow:hidden;
        text-overflow: ellipsis;/*替换成省略号*/
        white-space: nowrap;/*强制不换行*/
    }

CSS相关总结

HTML语义化

块级元素和内联元素

盒模型

IE盒模型（box-sizing:border-box）

W3C盒模型(box-sizing:content-box)

布局

flex

两栏布局

圣杯布局

伸展子元素

两栏布局

三栏布局

圣杯布局（中间栏要最先开始渲染）

双飞翼布局(浮动 负边距 边距)

等高布局

居中的方法

水平居中

垂直居中

已知元素的高度：绝对定位 + top + margin

未知元素高度：绝对定位 + top+ transform

flex

文本垂直居中（line-height）和水平居中(text-align)

line-height + vertical-align(图片)

BFC(块格式化上下文)

BFC的触发条件

BFC的特性

可以解决问题

浮动覆盖问题

浮动使父元素高度塌陷问题

margin 折叠问题

元素隐藏方法

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

CSS的百分比

浏览器如何解析CSS选择器

style标签写在body后与body前有什么区别？

CSS选择符有哪些，哪些属性可以继承

CSS优先级计算

CSS的伪类和伪元素

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

CSS预处理器

常见属性

position

overflow

display

CSS3新特性

px em rem

动画和过渡

手写题

CSS创建一个三角形

一个等边三角形

一个直角三角形

溢出文本变成...

双飞翼布局(浮动负边距边距)