HTML5新特性

HTML5新特性

header : 页眉
footer : 页脚
main : 主体
注：header footer main 语义化标签在一个页面中只能出现一次。
​
hgroup : 标题组合
nav : 导航
article : 独立的内容
论坛帖子 报纸文章
博客条目 用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是同样的
​
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

columns

指定列的宽度和数量!

当每列宽度大于 100px 时，就以 3 列分割显示；当浏览器宽度缩小，致使在 3 列状况下没法知足每列大于 100px，就开始转为 2 列；当浏览器再缩小，2 列中每列没法再保持 100px 每列时，再次转为 1 列

以此类推，"100px" 为每列不可低于的宽值，"3" 表示指定要显示的列。相对于单独设置 column-width 或 column-count，columns 要更加灵活

columns

因为 column 属性集还没有归入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器均可以很好的支持了。下面是主流浏览器的支持和前缀状况。

columns 是一个复合属性，包含 column-width 和 column-count 这两种简写。意 为同时设置分列列数和分列宽度。

//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: 150px 4;

column-rule 属性

设置每列---中间的分割线 column-rule: 2px dashed gray;

列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。若是咱们把页面缩放 到只能显示一列时，它自动消失了。

column-gap 属性

//设置列间距
-moz-column-gap: 100px;

CSS3 弹性伸缩布局

添加到父容器上的

任何一个容器均可以指定为Flex布局。
display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari，Chrome */
设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。

flex-direction: row;----布局的排列方向(主轴排列方向)
row默认值，显示为行。
方向为当前文档水平流方向，默认状况下是从左往右。
column 显示为列
row-reverse显示为行。 但方向和row属性值是反的,从右向左。
column-reverse显示为列。但方向和column方向相反
​
flex-wrap用来控制子项总体单行显示仍是换行显示。
flex-wrap：wrap;不进行换行处理。
nowrap;进行换行处理。
wrap-reverse;反向换行。
​
flex-flow属性是flex-direction和flex-wrap的缩写
表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开。（有顺序）
​
1.注:默认状况下，在弹性盒子中的子元素的左右排列的。
2.注:
（1）水平是主轴的时候，当不写宽高的时候，宽度是由内容决定，高度是由父容器决定。
（2）垂直是主轴的时候，当不写宽高的时候，高度是由内容决定，宽度是由父容器决定。
3.注:当子项的总宽度大于父容器的时候，会自动收缩的(弹性的优先级是大于自身固定大小)
4.注:当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
5.注:弹性布局中用的频率比较多的语法:
6.注:弹性布局的优点是作一维布局，网格布局作二维布局。

justify-content属性决定了主轴方向上子项的对齐和分布方式。
flex-start:子项都去起始位置对齐。
flex-end:子项都去结束位置对齐。
center:子项都去中心位置对齐。
space-between:表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around:around是环绕的意思，意思是每一个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly：evenly是匀称、平等的意思。也就是视觉上，每一个flex子项两侧空白间距彻底相等。

align-items：每一行中的子元素上下对齐方式
align-items中的items指的就是flex子项们，所以align-items指的就是flex子项们相对于flex容器在侧轴方向上的对 齐方式。
取值                   含义
stretch             默认值，flex子项拉伸。
flex-start         表现为容器顶部对齐。
flex-end           表现为容器底部对齐。
center             表现为垂直居中对齐。
​
align-content：跟justify-content相反的操做。侧轴的对齐方式。（最少须要两行才能看到效果由于他是多行的一个上下对齐方式)）
默认：多行下，有几行就会把容器划分为几部分，默认为stretch拉伸的值跟justify-content值相同。

添加到子容器上的

order：num   能够经过设置order改变某个flex 子项的排序位置。 全部flex子项的默认order属性值是0。
​
flex-grow:num   扩展（想看到扩展的效果，必须有空隙）
0:默认值，不扩展
1：去扩展，会把空白区域所有占满
注：子元素会按照设置的比例值来分配空隙，若是比例值总和小于1,那么会有空隙，若是比列大于等于1，那么就没有空隙。
​
flex-shrink:1;默认值是1。属性中的shrink是“收缩”的意思，
flex-shrink主要处理当容器空间不足时候，单个元素的收缩比例。
0表示不收缩，0.5收缩小一些，2收缩大一些

flex-basis ： 定义了在分配剩余空间以前元素的默认大小。
flex-shrink是设置一个比例值，flex-basis是设置一个具体值
​
flex属性是flex-grow, flex-shrink 和flex-basis的缩写。
flex:1; 1（flex-grow）1（flex-shrink）0（flex-basis）
flex:0; 0（flex-grow）1（flex-shrink）0（flex-basis）
​
align-self ：跟align- items操做很像，指控制单独某一个flex子项的垂 直对齐方式。

响应式布局的方案

响应式布局?
用一套代码，去适配不一样的设备。既能够运行在PC端，也能够运行在移动端。
注：比较适合小网站，我的博客，产品介绍页...

viewport视口？
PC端就没有视口。viewport视口是移动端才有的概念。
两个视口：

1. 可视视口：固定大小的，跟手机设备同样。在上面。
2. 布局视口：可调节大小的，默认980，压缩到可视视口的大小，在下面。

须要让布局视口改为跟可视视口同样大？
调节布局视口 375 -> 375 , 414 -> 414
​
width : 414 能够给固定大小，99%网站不会这么设置，由于很差适配。
width : device-width 动态的 ，设备414 -> 414 设备375 -> 375
height : 不去设置。
initial-scale : 1.0
minimum-scale : 1.0
maximum-scale : 1.0
user-scalable : no
建议viewport设置：<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no">

CSS3 媒体查询?
即media queries，能够针对不一样的媒体类型定义不一样的样式，从而实现响应式布局 。也能够针对不一样的分辨率设置不一样的样式。
1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率如下： mobile 竖屏

媒体查询的语法？
常见的媒体类型：
all 用于全部设备
print 用于打印机和打印预览。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。
如何配置？
@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }
link的使用？
<link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

如何实现响应式布局呢？

1. 先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)
2. 先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)

/* 正常的样式 , 针对PC端的 */ 代码 /* 针对pad pro */ @media all and (max-width:1024px){ 50行CSS } ​ /* 针对pad mini 和 mobile 横屏 */ @media all and (max-width:768px){ 50行CSS } ​ /* 针对 mobile 竖屏 */ @media all and (max-width:450px){ 50行CSS }