1.垂直水平居中

1）行内元素居中

目标盒子包在父盒子中，父盒子设置text-align:center,height:100px,line-height:100px，令行内元素针对父元素水平居中对齐，目标盒子设置inline-block变成行内元素

2）margin+position

目标盒子包在父盒子中，父盒子设position:relative,目标盒子设position:absolute,margin:auto,会自动填充做到水平垂直居中。

3）flex弹性布局

父盒子要有高度和宽度，设为弹性布局display:flex,justify-content: center，align-items:center,用来令内部的目标盒子水平和竖直居中。目标盒子设margin-left:0，如果有多个，分开，第一个设margin-left:0,剩下的设marginleft:间距。或者在目标盒子设置margin:auto

4）绝对定位位偏移

父设position:absolute,transform:translate(-50%,-50%)

2.圣杯布局

中间盒子先渲染自动填充，两边盒子固定宽度，header,footer占满宽度，高度固定，footer最后清除浮动。给外部容器加padding,通过先对定位把两边定位出来。

1）浮动

定义好footer,header,横向撑满，三列中全部设float:left浮动，position:relative相对定位,center最先渲染，设宽度100%，两边定宽，两边被挤下去了，设左边的margin-left:-100%,右边的margin-left:-本身宽度，最外层container设置padding-left,padding-right分别是左右的宽度，再给右边设right:-本身宽度,左边设left:-左边宽度

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.container::after{
	clear:both;
}
.left, .middle, .right {
    position: relative;
    float: left;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

2）弹性盒子

footer,header横向撑满，最外层container设弹性布局display:flex,左右区域定宽，center设flex:1

3)grid布局

给body设display:grid，header,footer设grid-row:1,grid:column:1/5,占据5条列线和一整行。left,right都是grid-row:2,grid:column:1/2或4/5，center是grid-row:2,grid:column:2/4

3.高度塌陷+清除浮动

父元素不写高度，子元素写了浮动，父元素会高度塌陷（高度为0）

1）overflow:hidden

2)加空div清除浮动clear:both

3).father::after伪元素设置清除浮动

content:"",display:block/table,clear:both

4.左定宽右自适应

1）flex

左边设定宽，右边设flex:1，最外层设display:flex

2）浮动

左定宽，float:left,右100%

3)负margin

左右都浮动，右2层盒子，右盒子100%，左盒子margin-left:-100%,定宽，右盒子margin-left:左盒子宽度。

5.计算高度API

1）浏览器视口高度：不包含导航和工具栏

window.innerHeight

2)网页滚动高度

window.document.scrollTop网页文档滚动高度

3）页面某元素离文档顶部的距离

offsetTop获取元素（父元素为body)到文档顶部高度

4）计算元素自身高度

offsetHeight,获取可视部分高度，包括height+padding+border+滚动条宽度,clientHeight:height+padding，不含滚动条和元素边框，不含滚动区域，scrollHeight,元素设置overflow:visible样式属性后，元素总高度就是滚动高度，默认状态下，该属性大于clientWidth,就会显示滚动条以便能翻阅被隐藏的区域。

5.两栏自适应布局

BFC是独立的布局环境，里面元素布局不受外界影响，元素符合成为BFC的条件，就成了隔离的独立容器，BFC的区域不会外部浮动元素重叠，同BFC内相邻块级元素的外边距会重叠，不同BFC不重叠。

1）触发BFC

左栏float:left,右栏overflow:hidden,*选择器设margin:0,padding:0;

2)flex布局

父设flex布局，左栏浮动float:left,右栏flex:1自动填满

6.CSS动画

1）@keyframes

@keyframes example{from{}to{}}/example{0%{}25%{}100%{}}或者直接是在规则指定了css样式，还需要把该动画绑定到元素，元素中写：animation-name：example,animation-duration:时间

2)animation

包含name,duration,timing-function()（速度曲线，linear是匀速）,delay,iteration-count（运行次数，数字或infinite）,direction(alternate先向前再向后）

3）transition过渡

设定一个div:hover，要有变化的属性，然后div中设transition:变化的属性 持续时间

7.CSS实现页面加载进度条

@keyframes animate-stipes{
0%{background-position:0 0;}
100%{background-position:120px 0;}
}
.stripes span{
background-image: ;
background-size: ;
animation:animate-stripes 3s linear infinite
}

8.position属性值

static,relative,fixed,absolute

9.css画0.5px细线

定义div的position为relative,再定义::before伪元素的background-color,然后width是长度，height是细线的宽度，设1px,position:absolute,然后通过transform:scaleY(0.5)缩放Y轴0.5倍实现（有些手机端浏览器显示不好）.也可以利用渐变，设高度1px,背景渐变，0-50%透明色，50-100%纯色（不同浏览器要用不同前缀）。也可以利用图片，制作高度为2px,宽度1px的图，一半透明一半纯色，设置元素的background为图片，background-size为1px,100%。也可以利用阴影设box-shadow:0 0.5px 0 0。可以用weui，是ui组件。

10.css画三角形

定义一个div,给div加一层border，涉及想画的三角形的3条边，把div宽度变成0，(border-left等，设好宽度就可以推算出三角形的形状）高度变为0，想要哪个角就把哪个方向的border设为透明：transparent

11.双飞翼布局

左中右都设浮动，总容器伪类清除浮动，中间宽度100%，内部设margin留左右边距，左设margin-left:-100%,右设margin-left:-宽度。

<div class="all">
	<div class="main">
		<div class="inner">中间</div>
	</div>
	<div class="left">左</div>
	<div class="right">右</div>
</div>
<style>
.left, .right {
    float: left;
}
.all::after{
	clear:both;
}
.main{
	float:left;
	width:100%;
}
.inner {
   margin:0 200px;
    background: blue;
}
.left {
    margin-left: -100%;
    width: 200px;
    background: red;
}
.right {
    margin-left: -200px;
    width: 200px;
    background: green;
}
</style>

12.行内元素和块元素

行内元素：a,span,img,input,select,em,b,i,块元素：p,div,h1-h6,br,ol,ul

13.src和href的区别

src表示引用资源，指向外部资源的位置，请求资源会把指向资源下载并应用到当前文档，替换当前元素，href标识超文本引用，引用和页面关联，在当前元素和引用资源之间产生联系

14.flex布局

flex-direction指定主轴的方向，默认为row，弹性盒子子元素溢出，可以声明flex-wrap:wrap，使溢出元素移到下一行。这两个的缩写是flex-flow:row wrap.设flex:1表示每个元素占用空间相等，表示一个比例。flex是flex-grow（默认0，放大比例，计算规则：宽度+剩余空间所占比例）,flex-shrink（缩小比例，默认1，计算规则：权重=弹性元素宽度shrink值的总和，收缩宽度=全部元素宽度和-株主轴尺寸。某个元素收缩宽度=本身宽度-（本身shrink宽度/权重收缩宽度））,flex-basis（分配多余空间前占据的主轴空间，默认auto）的缩写

15.float浮动布局

引入内边距和边界（padding+border）导致多列布局损坏，可以给html加上box-sizing:border-box，令盒子的宽度取值为content+padding+border,不是之前的content,因此增加内边距及边界，不会让盒子更宽，只会让content更窄。想设置margin-top是不起作用的，因为浮动元素在父元素中所占面积的游侠高度是0，非浮动元素的外边距不能用于它们和浮动元素之间创建空间，解决方法是再付容器底部清除浮动。浮动的列高度不同，可以把列的背景颜色设为父元素背景颜色，也可以设为固定高度，并使内容滚动overflow,或者使用伪列

16.overflow属性

这是overflow-x,overfloe-y的简写，定义元素内容太大无法适应BFC时应该做什么，值有:visible(默认）,hidden（内容被修剪，其余内容不可见）,scroll（内容被修剪，一直显示滚动条，）,auto（浏览器定夺，如被修剪就显示滚动条）,指定除默认值外都会创建新的BFC，为使overflow有效果，块级容器必须有指定高度。