关于html: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
}