1.CSS（Cascading Style Sheets）层叠样式表

CSS 是开放网络的核心语言之一，由 W3C 规范进行标准化。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。各个模块都在不断升级中，CSS文档

2.常见居中处理方式

2.1垂直居中

1、若父元素没有写height，则直接在父元素写

padding: 10px 0;

子元素就可以居中，所以不确定父元素高度还是有好处的。
2、让子元素在父元素中绝对居中
方法一：给父元素加

position:relative;   //如果不给父元素加relative，子元素的绝对定位absolute
                     //会一直向上找设置了relative的元素边界，直到body元素。

给需要定位的子元素加：

 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;

PS: relative 不脱离文档流，absolute 脱离文档流，position默认值是static
，即无特殊定位。
方法二：在支持弹性盒子flex的浏览器使用，最简单的。
给父元素加：

display: flex;               //弹性盒子的设置
justify-content: center;     //水平居中
align-items: center;         //垂直居中

于是，子元素垂直，水平居中。
3、 table中的表格居中以及表格中的内容居中（兼容IE）
表格内容居中，给td(或者tr)元素添加CSS样式：

align="center";//水平居中
valign="middle";//垂直居中

表格本身水平居中：
给表格设置一个宽度，添加 margin：0px auto
表格水平垂直居中：表格套表格

　　 <table width="760" height="100%" align="center">    //居中用的表格
　　 <tr><td align="center">           //水平居中，因为表格内容默认垂直居中故省略
　　 <table width="200" height="300">  //实际做的表格
　　 <tr><td>前端快乐</td></tr>
　　 </table>       //实际做的表格  
　　 </div>
　　 </td></tr>
　　 </table>       //居中用的表格

4、可以用div假扮表格实行居中处理，相当于表格元素换成div1，div2……（兼容IE）
例如：给父元素设置 display：table
给子元素设置display:table-cell；vertical-align:middle可实现子元素内容水平垂直居中
5、用100%高度的before和after

.parent{
    border: 1px solid red;
    height: 200px;
    text-align: center;
  }
  .child{
    border: 1px solid black;
    display: inline-block;
    width: 100px;
    vertical-align: middle;
  }
  .parent:before{
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .parent:after{
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

6、绝对定位加上margin-top: -自身height的50%,width同理
.parent{
height: 300px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
height: 20px;
margin-top: -10px;
text-align: center;
}
7、让背景图居中并且自适应屏幕

background: url("xxx.jpg") center center ; //水平和垂直居中
background-size: cover;

2.2垂直居中

1.块级元素水平居中

margin-left:auto;
margin-right:auto;

2.内联元素水平居中，给它们的父元素加上

text-align:center;

若不是内联元素想让它居中，可加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面可能会空出一行）

vertical-align: top;

3.让导航栏横过来
a、给所有li加上float:left;，然后给父元素ul加上class:clearfix

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

PS：左浮（和导航栏在在同一行）+右浮（导航栏），父元素clearfix
b、让li在同一行里水平均匀分布

ul{
  display:flex;  
  justyfy-content:space-between;
}

PS 此时去掉去掉li的float:left和ul的clearfix

3.CSS小技巧

3.1 border大法

给所有的CSS标签写上显形代码：

border:1px solid red;

3.2 如果子元素的宽度为100%，那么就是父元素的宽度

3.3 搜索：CSS 某某 generator，可以生成代码

如CSS box-shadow generator ，可得网址https://www.cssmatic.com/box-shadow

5.CSS的文档流（Normal Flow）

1.文档流是指文档内元素的流动方向：内联元素——从左到右，不够换行
块级元素——每个块占一行，从上往下流
2.div高度（块级元素）由其内部文档流的高度总和决定（不是相等）
3.脱离文档流
相对于窗口定位：position:fixed
相对于父级元素定位：父元素position:relative；子元素：position:absolute
子元素此时表现为display：block

6.CSS清除默认样式

*{
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after{
  box-sizing: border-box;
}
a{
    text-decoration: none;  //  去掉下划线
}
ul,ol{
    list-style: none;
}
button{
    outline: none;
}

7.CSS注意事项

7.1 height 和width高度不要定死，容易出bug

7.2 所有的非空标签都有伪类（::before ::after）

7.3 加了display:inline-block；务必加vertical-align:top

7.4行内元素不能设置宽width高height，上下边距margin和padding

如果行内元素设置了position：fixed（absolute）或者float属性，display隐性更改为inline-block
height是指元素高度，而line-height是指行高，行内元素是可以设置行高的

CSS的常用布局以及小技巧