基础知识html与CSS

        console.log(window.getComputedStyle(box).width)//800px        console.log(box.getBoundingClientRect().width);//800

5.BFC（块级格式上下文）

链接：

github.com/qianguyihao…

规则

1.不会影响外面的元素

2.外面的元素也不会影响内部的元素

3.会自动计算内部浮动子元素的高度

4.不会与float区域重叠

触发条件

1.float不为none

2.position不为relative和static

3.overflow不为visible

应用

1.和float自适应两栏布局

2.清除浮动

3.解决垂直方向边距塌陷的问题

6.CSS3样式继承

1.字体系列属性

font-family font-size等

2.文本系列属性

text-indent text align line-height color 

3.元素可见性

visibility

7.垂直居中

文字的垂直居中

1.flex方法：justify-conten+align-item

2.text-align+line-height

块级元素垂直居中

1.flex方法：justify-conten+align-item

2.绝对定位+margin：auto

3.绝对定位+transform：translate

4.绝对定位+负margin（需要知道盒子的宽和高）

8.flex布局

学习网站：www.ruanyifeng.com/blog/2015/0…

布局：www.ruanyifeng.com/blog/2015/0…

三栏布局：

1.flex

        .a{            display: flex;        }        .b,.d{            width: 100px;            height: 100px;            background-color: aqua;        }        .c{            flex: 1 0 auto;            height: 100px;            background-color: blue;        }

2.绝对定位

        .a{            position: relative;        }        .b,.d{            width: 100px;            height: 100px;            background-color: aqua;        }        .b{            position: absolute;            top:0;            left: 0;        }        .d{            position: absolute;            top:0;            right: 0;        }        .c{            position: absolute;            top:0;            left:100px;            right: 100px;            height: 100px;            background-color: blue;        }

3.float做法（float+绝对定位）

        .a{            position: relative;        }        .b,        .d {            width: 100px;            height: 100px;            background-color: aqua;        }        .b {            float: left;        }        .d {            float: right;        }        .c {            position: absolute;            top: 0;            right: 100px;            left:100px;            height: 100px;            background-color: blue;        }

4.float做法（float+负margin）

自适应两栏

绝对定位

        .a{            position: relative;            height: 100px;        }        .b{            position: absolute;            top:0;            left: 0;            width: 100px;            background-color: brown;            height: 100px;        }        .d{            position: absolute;            top:0;            left: 100px;            right: 0;            background-color: blueviolet;            height: 100px;        }

float+绝对定位

        .b{            float: left;            width: 100px;            background-color: brown;            height: 100px;        }        .d{            position: absolute;            left:100px;            right: 0;            background-color: blueviolet;            height: 100px;        }

flex

        .a{            display: flex;        }        .b{            width: 100px;            background-color: brown;            height: 100px;        }        .d{            flex:1 0 auto;            background-color: blueviolet;            height: 100px;        }

底部固定

        .a{            display: flex;            flex-direction: column;            height: 500px;        }        .b{            flex: 1 0 auto;        }        .d{            flex: 0 0 auto;            height: 100px;            background-color: brown;        }

9.响应式布局

链接

juejin.cn/post/684490…

方式

1.媒体查询

2.百分比%

3.vw/vh

4.rem

单位

px:最小最常见的单位，代表一个像素

em:以自身元素字体大小为基准

rem:相对于根元素字体的大小，绕开了复杂的层级关系

vw/vh:视窗的宽/高的百分之1

vmin:以视窗宽或高较小的一边的百分之1作为基本单位

vmax:以视窗宽或高较大的一边的百分之1作为基本单位

10.块元素和行内元素

块元素

div，p，ul,li,dt,dd,h1-h6等，单独占一行，宽高可以修改

行内元素

span，button，input等不独占一行，没有宽和高