1.display-可选值有 none,block,inline,inline-block,flex,grid
display用来控制布局显示，一般有四种布局模式，block块元素,inline行内元素,table二维表,positioned精确定位。关于inline-block与其他的区别主要有：
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
简单的讲,inline-block是行内元素，支持margin/padding属性，且可设置width和height。block是块元素，inline是行内元素，但没有margin/padding属性。
这里主要介绍第五种新的布局模式display:flex。
如果声明为display:flex,则有另外6个属性可使用，分别是
- flex-direction
- flex-wrap
- flex-flow
- justify-content：定义水平对齐效果
- align-items：定义垂直对齐效果
- align-content：定义如何使用每行之间的空白
下面演示了一段水平垂直居中的代码
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
各属性的详情介绍参见这里。
当display:flex时，包含的item支持以下属性：
- order：定义每个元素的排列顺序
- flex-grow：占用的列宽
- flex-shrink：定义宽度收缩值，0表示不收缩
- flex-basis：定义初始值宽度
- flex：上面三个属性的合并属性，如flex: 0 0 200px
- align-self：覆盖容器的align-items垂直对齐属性
一个响应式布局的例子 https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2
新的属性有 display: grid;网络布局
2.position
一共有五个值，top/bottom/left/right四个属性，均需要先确定position，才能生效。下面是各position属性值比较。
static：默认值，top/bottom/left/right不生效，根据页面元素排放自然罗列。
relative：根据页面元素排放自然罗列，top/bottom/left/right会影响该种定位元素的位置，但该元素移动后的空白，不会被周边元素填充或调整。就是说，元素偏离了原有的占位空间，但其空间仍固定保留不变。（此时margin-bottom不生效？margin-top或margin生效，top用百分比数值也不生效,left有效【此时与上一个元素的距离应该是0，所以百分比仍是0，left 时最近元素是父元素，百分比的值是父元素的宽度取百分比，所有有效果，从这里可以看出，top/bottom/left/right是否生效，与取哪个作为相对的上一个元素作重要】）
fixed：仅相对于viewport窗口定位，top/bottom/left/right影响其位置，即使页面滚动也不会影响它的位置。并且使用该属性的元素看起来是“飞”出来DOM结构树，所以也不会占用任务页面布局的空间。
absolute：根据有定位的（属性除了static）父元素进行定位，如果没有这个父元素，则以document body为父元素，且会随页面一起滚动。此时可用clip属性，如clip: rect(0px,60px,200px,0px);裁成方块。
sticky：根据用户滚动的位置进行定位。生明为sticky时，随着页面的滚动，其效果会在属性relative和fixed之间切换。当页面滚动时（其属性值仍是relative），该元素距viewport一定的距离时（一般是贴近），自动变成fixed，固定不再随页面滚动。注意：必须声top/bottom/left/right其中的一个才会有效果（如top:0）。早期IE/EDG不支持，Safari要使用position: -webkit-sticky;
CSS试验场 https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center
3.box-sizing
元素的高宽计算通常是
width + padding + border = actual width of an element
height + padding + border = actual height of an element
或
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
意味着设置的高宽真实情况可能会更大。
而box-sizing就是为解决这个问题的，它将padding，border一起计算到高宽里面了。如 *{box-sizing: border-box;}
4. @media
如
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}或外链
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
media type和支持的定制化特性，参考这里。
5.Multiple Columns
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
上面这段代码，可以自动将一大段文本分裂成3栏显示，类似报纸的排版。例子
有这些属性
column-count：分割的列数
column-gap：每列的间距
column-rule-style：每列的分割竖线样式
column-rule-width：每列的分割竖线宽度
column-rule-color：每列的分割竖线颜色
column-rule：上述三者的合并写法
column-span：定义某个元素需要跨越的列数（类似table的colspan属性）
column-width：定义每列的理想宽度
columns：column-width与column-count的简短属性，如columns: 100px 3;
6.transition-duration 样式过渡动画
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
7.box-shadow
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}.button3:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
8.cursor 鼠标样式
cursor: not-allowed;
9.opacity 透明度
.button:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
10. object-fit 定义图片或视频如何充满容器
cover：充值容器，保持高宽比例，裁剪内容；
- fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit。默认效果。拉伸占满空间，不保持比例。
- contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box。不会占满全部空间
- cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit。会做必要的裁剪保持比例占满全部空间。
- none - The replaced content is not resized
- scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
12.filter 滤镜效果
13.transition 过渡动画效果
14.transform 转换与变形
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
15.一些css selector的例子
.pagination a:hover:not(.active) {background-color: #ddd;}
定义鼠标移上去时没激活的链接背景颜色。
.pagination a {
transition: background-color .3s;
}.pagination a:hover{
transition: .5s ease;
}
定义鼠标移上去时颜色变化动画效果。
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
定义第一个和最后一个元素按钮圆角。
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
在li前加反斜杆和空白。
16.viewport 定义可视区域
<meta name="viewport" content="width=device-width, initial-scale=1.0">
