盒模型，box-sizing，CSS3新特性，伪类，伪元素，锚伪类，使用CSS实现隐藏元素的方式,盒子在页面水平和垂直居中, inline和inline-block,块级元素,行级元素有哪些以及特点

盒模型，box-sizing，CSS3新特性，伪类，伪元素，锚伪类，使用CSS实现隐藏元素的方式,盒子在页面水平和垂直居中, inline和inline-block,块级元素,行级元素有哪些以及特点 ,网格布局,传统表格布局

盒模型：

margin(外边距) padding(内边距) border(边框) content(内容)

box-sizing:

content-box / border-box / inherit有以下三个属性

1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外.

2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度包括padding和border的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算

3 ：inherit:指定box-sizing属性的值，应该从父元素继承

C3新特性：

1 CSS实现圆角（border-radius）,阴影（box-shadow）,边框图片border-image

2 对文字加特效（text-shadow）,强制文本换行（word-wrap）,线性渐变（linear-gradient）

3 旋转，缩放，定位，倾斜： transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)

4 增加了更多的CSS选择器，多背景，rgba();

5 在CSS3中唯一引入的伪元素是::selection;

6 媒体查询（@media）,多栏布局（flex）

伪类：用于向某些选择器添加特殊的效果

1 ：hover 将样式添加到鼠标悬浮的元素

2 ：active 将样式添加到被激活的元素

3 ：focus 将样式添加到获得焦点的元素

4 ：link 将样式添加到未被访问过的链接

5 ：visited 将样式添加到被访问过的链接

6 ：first-child 将样式添加到元素的第一个子元素

7 ：lang 定义指定的元素中使用的语言

伪元素：用于将特殊的效果添加到某些选择器，伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

1 ::first-letter 将样式添加到文本的首字母

2 ::first-line 将样式添加到文本的首行

3 ::before 在某元素之前插入某些内容

4 ::after 在某元素之后插入某些内容

新增伪类：

P:first-of-type	选择属于其父元素的首个p元素的每个p元素
P:last-of-type	选择属于其父元素的最后p元素的每个p元素
P:only-of-type	选择属于其父元素唯一的p元素的每个p元素
P:only-child	选择属于其父元素唯一的子元素的每个p元素
P:nth-child(n)	选择属于其父元素的第n个子元素的每个p元素
P:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个p元素
P:nth-of-type(n)	选择属于其父元素第n个p元素的每个p元素
P:nth-last-of-type(n)	选择属于其父元素倒数第n个p元素的每个p元素
P:last-child	选择属于其父元素最后一个子元素的每个p元素
P:empty	选择没有子元素的每个p元素(包括文本节点)
P:target	选择当前活动的p元素
:not§	选择非p元素的每个元素
:enabled	控制表单控件的可用状态
:disabled	控制表单控件的禁用状态

使用CSS实现隐藏元素的方式

1 Opacity:设置一个元素的透明度 .hide{opacity:0;}

2 Visibility .hide{visibility:hidden}

3 Display:确保元素不可见并且连盒模型也不生成 .hide{display:none}

4 Position .hide{position:absolute; top:-9999px; left:-9999px;}

5 Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};

盒子在页面水平和垂直居中

水平居中设置：
1 行内元素：设置text-align:center;
2 定宽块状元素：设置 左右 margin值为auto;
3 不定宽块状元素
4 在元素外加入 table标签(完整的，包括table,tbody,tr,td),该元素写在td内，然后设置margin的值为auto;
5 给该元素设置display:inline方法；
6 父元素设置position:relative和left:50%,子元素设置position:relative和left:50%

垂直居中设置:
1 父元素高度确定的单行文本，设置height=line-height;
2 父元素高度确定的多行文本
A:插入table（插入方法和水平居中一样）,然后设置vertical-align:middle;
B:先设置display:table-cell 再设置 vertical-align:middle;

position,display

position
position：absolute; 绝对定位的元素，相对于static定位以外的第一个父元素进行定位
position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位.
position:relative; 生成相对定位的元素，相对于其正常位置进行定位
position:static; 默认值，没有定位，元素在正常的文档流(忽略top,bottom,left,right或者z-index声明)
position:inherit; 规定应该从父元素继承position属性的值
display: ( 经常使用的 )
display:none 此元素不会被显示
display:block; 此元素将显示为块级元素，此元素前后会带有换行符
display:inline; 行内块元素
display:inline-block; 此元素会作为列表显示
提示：基础知识，必须要了解！

inline和inline-block

inline
1 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
2 Inline元素设置width,height属性无效
3 inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,magin-top,margin-bottom不会产生边距效果。

块级元素,行级元素有哪些以及特点

行内元素	块级元素
a b em font i img input br label span small select textarea	address dl div form h1-h6 hr menu ol p
行内元素不会独占一行，相邻的行内元素会排列在同一行里，一行排不下会自动换行，其宽度随元素的内容而变化。	块级元素会独占一行，其宽度自动填满其父元素宽度
块级元素可以设置margin,padding,行内元素的水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果，但是竖直方向padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果	块级元素可以设置width,height属性，行内元素设置宽高无效

网格布局

Grid布局又称“网格”，是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式，Grid布局是第一个专门为解决布局问题而创建的CSS模块

传统表格布局

Table用于布局，主要用来显示批量的数据；但是table有一个缺点，就是加载页面的时候，需要将全部的数据都请求到，才显示页面，否则就是一片的空白，所以现在一般都不用table进行布局.但因其稳定性非常优秀，一般在管理系统类项目中应用较多。