乐趣区

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

退出移动版