HTML+CSS基础知识04

H5+CSS3部分

H5新增语义化标签

结构标签

<header>头部/标题</header>
nav 导航
<section>独立内容模块，可以h1-h6组成大纲，表示文档结构，有章节、页眉、页脚或其他部分。</section>
<article>（文章） 文章核心部分</article>
<aside>标签内容之外相辅的信息 侧边栏</aside>
<footer>底部</footer>
<figure>标签 代替原来的li>img+p就是有文字有图片的区域</figure>

IE使用新标签的兼容性问题处理

利用js去创造这些新的标签

方法: document.createElement(‘ 标签名 ’);

使用封装好的插件html5shiv.js解决兼容性问题。

 <script>/*1：手动创建语义化标签*//*创建标签的名字*//*先创建在使用*/document.createElement('header');document.createElement('nav');document.createElement('footer');document.createElement('aside');document.createElement('article');document.createElement('section');</script><!--生成语义化标签  必须放在头部使用-->
2:<script src="html5shiv.min.js/html5shiv.js"></script>

新增的input type属性值：

类型****	使用示例****	含义****
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		自由拖动滑块
time****		小时分钟
date****		年月日 Chrome FireFox
datetime****		时间 Safari
month****		月年
week****		星期年

<meter low="60" high="90" min="0" max="100" optimum="85" value="90"></meter>  衡量占有率的条  区间 范围的描述  三色 绿色   黄色  红色 投票率  磁盘占有率  min:最小值 0G 0
max:最大值 80G  100
low: 60分
high: 90分

pattern:提供了字符串模式匹配的验证方法   pattern=“^1[3,5,7,8][0-9]{9}$"
^字符的开始是数字1   $字符串的结尾是一个数字[0-9]数字的意思  [3,5,7,8] 区间 从中选一个  电话号的第2位

email: 1:自动切换键盘显示出@符号 2: 提供了邮箱的完整验证(格式)

tel: 1: 只是打开移动端的数字键盘 ,不提供验证(原因就是实现起来太复杂)

如果你想看到数字键盘弹出来,把你的文档发到qq上 ,拿手机的浏览器打开

number: 数字输入的地方 min : 最小值 max:最大值 —>减少后面js对数字区间的验证

step: 步长 ,增量

search: 功能不是搜索只是用在搜索框上提高用户体验利用鼠标删除不涉及键盘

range: 范围 , 区间滑块,标尺

h5的下拉列表的正确写法

常用新属性

逻辑属性 true 除了0以外 / false 0 selected = “true/false”===> 表单控件里有selected 属性的话 selected = “true" checked

属性	用法	含义
placeholder****		占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus****		规定当页面加载时 input 元素应该自动获得焦点一张界面只能用一次
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮成功的提交过一次 2.这个表单元素您必须给他名字
required****		必填项内容不能为空不填会阻断提交
accesskey****		规定激活（使元素获得焦点）元素的快捷键采用 alt + key的形式
pattern	”	字符串匹配的模式

<form action=""><fieldset><legend>个人信息表</legend><!--get 方式可以看到参数  地址栏-->
<form action=""  method="get"><!--邮箱验证--><label for="email">邮箱:</label><input type="email" name="email" id="email"><br><!--网络地址的判断  不完整-->地址:<input type="url" name="url"><br><!--数字  只有数字 可以是小数  min最小值 max最大值  step 增量  步长-->数字:<input type="number" max="100" min="1" step="3"><br><!--pc端看不到效果 专门给移动端准备的  打开数字键盘的 只能输入数字可以这样做 当前文档拿电脑qq发到手机qq 拿手机浏览器打开此文档 点文本框-->电话号:<input type="tel" ><br><!--文本框  提高了用户体验-->请输入书籍名字: <input type="search"><br><!--下拉列表 datalist 配合一个文本框使用 写+选  文本输入框写list属性 list= 关联的下拉列表的id --><input type="text" list="course" id="student" name="student" ><datalist id="course"><option value="数学"><option value="语文"><option value="体育"><option value="音乐"><option value="美术"><option value="计算机"></datalist><br><!--范围  默认是最大范围和最小范围中间值-->体重:<input type="range" min="90" max="130" value="120"><br>颜色:<input type="color"><br><!--时分  时刻-->时间:<input type="time"><br><!--年月日-->日期: <input type="date"><br><!--datetime safiri支持  其他浏览器不支持-->具体时间: <input type="datetime"><br><!--其他浏览器支持  年月日 + 时刻-->具体时间: <input type="datetime-local"><br>月份:<input type="month">星期: <input type="week"><input type="submit" value="提交"></form></fieldset>
</form>

多媒体标签

FLASH 音频和视频 H5则用 audio video 来实现

audio：播放音频

HTML5通过标签来解决音频播放的问题。并且可以通过附加属性可以更友好控制音频的播放，

autoplay 自动播放谷歌高版本浏览器设置了不自动播放可以访问[chrome://flags/#autoplay-policy]此网址进行设置如下图(http://chrome//flags/#autoplay-policy)

controls 是否显示默认播放控件

loop 循环播放 loop 是否重复播放

muted 静音作用

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

多媒体 video

HTML5通过标签来解决音频播放的问题。

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放 -1为无限次

poster=“images/1.gif” 视频播放器的初始图片

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

CSS3新增选择器+属性

1：CSS属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

chrome 、Safiri 浏览器： -webkit-

FireFox : -moz-

IE: -ms-

opera : -o-

先写标准的CSS3属性,再写带有前缀的CSS3属性

2：CSS3选择器

(1)毗邻选择和兄弟选择器

/* E1 + E2  毗邻选择器 E 代表元素 fun:选择所有符合条件的 ---> 和E1紧紧相邻的E2元素(下一个兄弟)*/.box + p {font-size: 40px;}/* ~ 相邻 E1 ~ E2 选择所有符合条件的在E1后的所有相邻E2元素  */.box ~ p {color: red;}</style>
</head>
<body><div class="box" id="box"></div><p>我是p元素1</p><p>我是p元素2</p><div class="box"></div><p>我是p元素3</p>
</body>

(2)属性选择器

[class] fun:选择拥有class属性的元素
[class=“a”] fun": 选择所有class属性值为a的元素
[ class^=“a”] fun: 选择符合条件class以a字符作为开头属性值的元素
[class*=“a”] fun: 选择的是class属性值包含a字符的元素
[class$=“a”] fun: 选择符合条件class以a字符作为结尾属性值的元素

(3)结构伪类选择器

E:first-child 选择的是E的父元素中的第一个孩子并且要求这个孩子是E类型的如果不是则查找失败如果是成功
E:nth-child(n) n是从0开始的正整数 n>=0 -n+3 前三个 n+6 后几个 2n+1奇数行 2n偶数行
E:last-child 选择的是E的父元素中的最后一个孩子并且要求这个孩子是E类型的如果不是查找失败如果是成功
E:first-of-type 匹配E的父元素中的第某个E类型的元素不会出现失败的情况
E:last-of-type
E:nth-of-type(n)

3：CSS3常用属性

背景属性

1:多背景属性一个背景盒子可以同时放置多张背景图

background-image:url(),url(),url();
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: top left,right top, right bottom;

2:背景尺寸

background-size: px / % / cover /contain ;
background-size:50px 50px ;宽和高50*50
background-size:100%  100% ;铺满整个盒子 以盒子作为参考  不会发生溢出
完整显示图片 不会丢失内容cover:铺满盒子 但是有时候会不完整显示图片内容
contain: 保证图片完整显示  但是背景盒子会流出空白区域

1:二倍图设置大小时不要写% %是以当前插入的小图标的盒子作为参考的 px

2: 必须把图标的位置值也减半

3:背景初始放置位置(区域) (盒模型)

background-origin:border-box边框部分/padding-box 内边距/content-box 内容

4:背景的裁剪区域clip : 裁剪掉隐藏掉

background-cilp: border-box边框部分/padding-box 内边距/content-box 内容
content-box 溢出内容区域切掉

5:背景渐变

/* 背景属性 background:颜色 路径 平铺  位置  是否滚动 scroll(默认)/fixed 不滚动
(1)background-color:# red rgba()
(2)background-image:url()
(3)background-repeat: repeat / no-repeat
(4)background-position: left  right top bottom left top / px px / % %
(5)background-attachment: scroll/fixed*/
/*
css3
1：多背景属性  功能：插入多张背景  background-image:url(),url(),url();
2：背景图片放置位置 (内边框 边框 内容)
background-origin:padding-box content-box border-box;   [ˈɔːrɪdʒɪn]
3:背景尺寸
background-size: wpx hpx/ % % 以背景盒子作为参考  / cover /contain ;
cover:铺满 但是会显示不完整 contain:完整显示 但是会留白
4:背景裁剪区域 background-clip:padding-box content-box border-box;5:背景渐变*/
/* background-image: url("../images/01.gif"),url("../images/02.gif"),url("../images/03.gif");
background-repeat: no-repeat;
background-position: left top, right bottom , center center ; */background-image: url('../images/01.gif');
background-repeat: no-repeat;
/* 背景图片的尺寸--->适应 背景盒子大小 */background-size:cover;
background-origin:content-box;
/* 溢出边框的背景裁减掉 */
background-clip:content-box;
}

背景渐变属性 background-image

线性渐变

(1)线性渐变

   线性渐变属性 banckground: linear-gradient(方向，颜色1 停止位置1 ,颜色2 停止位置2....)方向：  to left -90degto right +90degto bottom +180degto top 0deg135deg 左上角到右下角45deg 从左下角到右上角

重复线性渐变

background: repeating-linear-gradient(-45deg, red 10%,yellow 20%);

（2）径向渐变

    <style type="text/css">.bg{width: 260px;height: 260px;/* 设置多个渐变背景图， 使用逗号分隔 */background-image:radial-gradient(transparent 10%, #ccc 15%, #ccc 20%, transparent 100%),radial-gradient(35px 35px, transparent 10%, #aaa 15%, #aaa 20%, transparent 100%);background-color: #eee;background-size: 60px 60px,10px 10px;}</style>
</head>
<body><div class="bg"></div>
</body>

重复径向渐变

 <style>.box {width: 300px;height: 200px;border: 1px solid #000;margin: 0 auto;/* background: radial-gradient(circle  farthest-corner at 100px 50px  , blue ,red) *//* background: radial-gradient(ellipse closest-corner at center center , yellow 20% ,red 50%); */background: repeating-radial-gradient(farthest-side at 40px 50px ,#fff 10% ,#000 20%)}/* (形状 大小 坐标,颜色)  */</style>
</head>
<body><!-- 径向渐变  background:radial-gradient() (1)形状  圆形 circle （默认） 椭圆  ellipse 当盒子是正方形时候circle 和ellipse是一样的形状 都是圆形在长方形的时候 circle圆形渐变 ellipse 椭圆形的渐变(2) 大小 size（停止位置）     closest-corner 最近的角closest-side 最近的边farthest-corner 最远的角(默认值)farthest-side 最远的边(3)径向的中心位置 at position  30px 40px   默认在中心点 起始位置 (4)颜色 停止位置--><div class="box"></div>

新盒模型

*盒模型宽度 = width 不用内减 width包含padding和border

box-sizing:border-box;//声明新盒模型
box-sizing: content-box //声明旧盒模型

css3 属性适合现在的高版本浏览器 ie10+ 适用在移动端

PC端界面还是要使用旧盒模型

div {box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;
}

多列布局 (文字)

column-width: 列宽
column-count: 列的个数
column-gap: 列间隙
column-rule: 列边框的样式

如果你设置了列数会有默认的列宽

如果你设置的列宽 > 默认的列宽最终取设置的列宽改变相应的列数

如果你设置的列宽 < 默认的列宽最终还是取默认的列数列宽也是默认的列宽

移动端布局之弹性盒（flex Box）

Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。该布局模型在主流浏览器中都得到了支持。

传统布局的局限性:

Flex布局相较于传统布局方式有哪些优点；
为什么我们要采用Flex布局来进行页面设计；
我们如何通过Flex布局来设计页面。

传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。

但是，Flex布局就就可以避免这种情况：
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性都将失效!!!

那么如何实现Flex布局，它可以帮助我们实现什么效果呢

容器属性：

flex-direction属性：决定主轴的方向（即项目的排列方向）;
flex-wrap属性：规定如果一条轴线排不下，如何换行；
flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap；
justify-content属性：定义了项目在主轴上的对齐方式；
align-items属性：定义项目在交叉轴上如何对齐；
align-self属性：定义了单独子项的对齐方式；
flex:n 是三个属性的集合 “flex-basis”、“flex-grow"和"flex-shrink”。

容器属性具体实现效果：

一、flex-direction属性：决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。

简介

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

图 1. 弹性盒布局模型相关的概念

弹性盒布局的容器（flex container）指的是采用了弹性盒布局的 DOM 元素，而弹性盒布局的条目（flex item）指的是容器中包含的子 DOM 元素。图中的最外围的边框表示的是容器，而编号 1 和 2 的边框表示的是容器中的条目。

所有代码示例中，容器的 CSS 类名统一为 flex-container，而条目的 CSS 类名则为 flex-item。

基本布局

首先从最基本的布局开始介绍弹性盒布局模型。要实现的布局效果是一个简单的图片缩略图预览页面。

简单的图片缩略图预览页面的 HTML 代码

<ul class="flex-container"><li class="flex-item"><img src="http://placehold.it/300&text=1"></li><li class="flex-item"><img src="http://placehold.it/300&text=2"></li><li class="flex-item"><img src="http://placehold.it/300&text=3"></li><li class="flex-item"><img src="http://placehold.it/300&text=4"></li><li class="flex-item"><img src="http://placehold.it/300&text=5"></li><li class="flex-item"><img src="http://placehold.it/300&text=6"></li>
</ul>

该页面的基本 HTML 是很简单的。在一个

元素下面有 6 个
元素。每个
元素中包含一个大小为 300x300 的缩略图图片。
- 元素作为弹性盒布局的容器，而
- 元素则是容器中的条目。

简单的图片缩略图预览页面的 CSS 代码

.flex-container {list-style: none;display: flex;flex-direction: row;flex-wrap: wrap;
}.flex-item {padding: 5px;
}

在代码2 中，对于弹性盒布局的容器，使用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向，从而确定基本的条目排列方式。"flex-direction"属性的可选值及其含义如表1所示。

表 1. “flex-direction”属性的可选值及其含义

属性值	含义
row（默认值）	主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
row-reverse	主轴为水平方向。排列顺序与页面的文档顺序相反。
column	主轴为垂直方向。排列顺序为从上到下。
column-reverse	主轴为垂直方向。排列顺序为从下到上。

默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如表2所示。

表 2. “flex-wrap”属性的可选值及其含义

属性值	含义
nowrap（默认值）	容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
wrap	当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse	与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。

可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，如下代码所示。

3. “flex-flow”属性的使用示例

flex-flow: row wrap;

容器中的条目

除了弹性盒布局模型中的容器之外，容器中的条目也可以通过 CSS 属性来改变其布局行为。下面介绍容器中的条目可以使用的 CSS 属性声明。

条目的顺序

默认情况下，容器中条目的顺序取决于它们在 HTML 标记代码中的出现顺序。可以通过"order"属性来改变条目在容器中的出现顺序。对于代码中的 HTML 标记添加4中的 CSS 声明，运行之后的效果是最后一个

元素出现在了其他
元素的最前面。

4 “order”属性的使用示例

.flex-item:last-child {order: -1;
}

"order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备，如屏幕阅读器，都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说，在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中，在源代码中把商品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取；而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。

条目尺寸的弹性

弹性盒布局模型的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态地调整条目的尺寸。当容器中有空白空间时，条目可以扩展尺寸以占据额外的空白空间；当容器中的空间不足时，条目可以缩小尺寸以防止超出容器范围。条目尺寸的弹性由 3 个 CSS 属性来确定，分别是"flex-basis"、“flex-grow"和"flex-shrink”。

"flex-basis"属性声明接受的值与"width"属性是一样的，用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。如果"flex-basis"的值为 auto，则实际使用的值是主轴尺寸属性的值，即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定。

"flex-grow"属性的值是一个没有单位的非负数，默认值是 0。"flex-grow"属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3，那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2，如代码清单 5所示。预览的页面见这里。

清单 5. “flex-grow”属性的使用示例

.flex-item:nth-child(1) {flex-grow: 1;
}.flex-item:nth-child(2) {flex-grow: 2;
}.flex-item:nth-child(3) {flex-grow: 3;
}

“flex-shrink"属性在使用上类似于"flex-grow”。该属性的值也是无单位的，表示的是当容器的空间不足时，各个条目的尺寸缩小的比例。在进行尺寸缩小时，条目的缩小比例与"flex-basis"的值相乘之后，就得到了应该缩小的尺寸的实际值。例如，在容器中有 3 个条目，其"flex-shrink"属性的值分别为 1，2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时，比如变成了 540px 之后，则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px，主轴尺寸分别变为 190px、180px 和 170px。预览的页面见这里。

使用属性"flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值，格式是"none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时，相当于"0 0 auto"。当组成部分"flex-basis"被省略时，其值为 0%。代码清单 6给出了属性"flex"的使用示例。

清单 6. 属性“flex”的使用示例

.flex-item:nth-child(1) {flex: 1 1 auto;
}flex: 1;  // flex-grow 的值为 1，flex-shrink 的值为 1，flex-basis 的值为 0%。

需要注意的是，在容器分配额外空间时是以"行"为单位的。容器先根据"flex-wrap"的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。如代码清单 7中的 CSS 声明示例，在容器中有 4 个条目。

清单 7. 多行布局的 CSS 声明

.flex-container {width: 990px;
}.flex-item {width: 300px;flex: auto;
}

由于容器的宽度只有 990px，所以在一行中只能排列 3 个条目，而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中，多余的空间 90px 被平均分配给 3 个条目；而在一个条目单独的行中，多余的 690px 被该条目完全占据。

条目对齐

当容器中的条目的尺寸确定之后，可以设置这些条目在容器中的对齐方式。对齐条目的方式有 3 种。

第一种方式是使用自动空白边，即"margin: auto"。在使用自动空白边时，容器中额外的空白空间会被声明为 auto 的空白边占据，如代码清单 8所示。CSS 声明 profile 中通过"margin-left: auto"使得该条目左边的空白边会占据额外的空间，从而"Profile"文本会靠右显示。预览的页面见这里。

清单 8. 使用自动空白边进行条目对齐

<div class="flex-container"><div class="logo">Logo</div><div class="profile">Profile</div>
</div>
.flex-container {display: flex;
}
.profile {margin-left: auto;
}

第二种方式是在主轴方向上的对齐。这是通过容器上的"justify-content"属性来进行设置，可以调整条目在主轴方向上的对齐方式。这种条目对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸，或是已经达到了它们的最大尺寸时，在这一行上可能还有额外的空白空间。使用"justify-content"属性可以分配这些空间。该属性还可以控制当条目超出行的范围时的对齐方式。"justify-content"属性的可选值和含义如表3所示，实际的布局效果见图 2。

表 3. “justify-content”属性的可选值和含义

属性值	含义
flex-start	条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
flex-end	条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
center	条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
space-between	第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
space-around	类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

第三种方式是交叉轴方向上的对齐。除了在主轴方向上对齐之外，条目也可以在交叉轴方向上对齐。容器上的属性"align-items"用来设置容器中所有条目在交叉轴上的默认对齐方向，而条目上的属性"align-self"用来覆写容器指定的对齐方式。属性"align-items"的可选值和含义如表4所示，实际的布局效果见图 3。

表 4. 属性“align-items”的可选值和含义

属性值	含义
flex-start	条目与其所在行在交叉轴起始方向上的边界保持对齐。
flex-end	条目与其所在行在交叉轴结束方向上的边界保持对齐。
center	条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
baseline	条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
stretch	如果条目的交叉轴尺寸的计算值是"auto"，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

属性"align-self"的可选值除了表中列出的之外，还可以设置为"auto"。当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。

交叉轴空白处理

当容器在交叉轴方向上有空白空间时，属性"align-content"用来对齐容器中的行。该属性的作用类似于"justify-content"，只不过"justify-content"是在主轴方向上对齐行中的条目。当容器中只有单行时，该属性不起作用。属性"align-content"的可选值和含义如表5所示，实际的布局效果见图 4。

表 5. 属性“align-content”的可选值和含义

属性值	含义
flex-start	行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
flex-end	行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
center	行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
space-between	行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
space-around	类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
stretch	伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

应用示例

下面通过一个示例来具体说明弹性盒布局在实际开发中的应用。该示例是一个博客帖子的典型页面布局。在展示一个博客帖子时，页面上通常包括标题、发表者、日期和时间、评论数量、正文、插图、评论列表等元素。这些元素基本上按照从上到下的顺序依次排列。

<div class="post"><h1>This is my first blog post</h1><div class="post-meta"><div class="author">Alex Cheng</div><div class="datetime">2014-07-02 10:10 am</div><div class="comments-count">2 comments</div></div><div class="post-body">
My first blog post.</div><div class="post-image"><img src="http://placehold.it/500x200&text=1"></div><div class="post-comments"><h3>Comments</h3><ul><li><div class="author">Bob</div><div>This is a good post.</div></li><li><div class="autho">David</div><div>Good post.</div></li></ul>  </div>
</div>

清单 10. 博客页面的 CSS 代码

.post {display: flex;flex-flow: column wrap;
}
.post-meta {display: flex;flex-flow: row wrap;order: 1;
}
.post-body {order: 3;
}
.post-comments {order: 4;
}
.comments-count {margin-left: auto;
}
.post-image {order: 2;align-self: center;
}

该示例中主要使用了"order"属性来改变条目的显示位置，以及使用"align-self"来使得图片居中显示。

less

vscode 使用的less的步骤

1:安装 easy less

2:file —> 首选项 —>设置 —>搜索 less complie —>

移动端布局

像素单位（相对单位）以下是1英寸下像素分布为10的分布图（10px/1英寸）

PPI（Pixels Per Inch）每一英寸的像素数量称为像素密度。

Retina即视网膜屏幕，苹果注册的命名方式，意思是具有高PPI的屏幕一般大于320px

主流设备的化分

四大类

大屏设备 PC >1200px

中屏设备 992px—1200px

小屏设备 768px-992px ipad 768px

超小屏 <768px 320px,375px,414px,…

主流的适配方案

1：流式布局大盒子给百分比 (100% ) 尽量不出现px单位

max-width:640px ; min-width:320px;

图片固定height 宽度% max-width:100% —>不完美 (用户看到的图片变形) ？

2：rem单位布局+ 媒体查询+ less

查询屏幕宽度  设置不同样式 ---> 后期不好维护 @media screen and (min-width:320px) and (max-width:640px) {屏幕在320px和640px之间是满足条件  则执行{ }里代码.box {min-width:320px;max-width:640px;width:100%;}}
@media screen and (device-width:320px) {.box {width:300px;height:200px;}.box1 {}.box2 {}
}
@media screen and (device-width:375px) {.box {width:330px;height:230px;}.box1 {}.box2 {}
}

rem布局

1：当前设备宽度的字体基值 px = 当前预设字体基础值(100px)*当前屏幕宽度/UI设计稿的宽度

缺点：就是设备按区间换分不精确

<style>@media screen and (min-width:320px)  {html {/* 字体基础值  10px  1rem = 100px  rem单位是相对于html的单位 */font-size: 50px;}}@media screen and (min-width:375px)  {html {/* 字体基础值  10px  1rem = 120px  rem单位是相对于html的单位 */font-size: 58.59px;}}@media screen and (min-width:414px)  {html {/* 字体基础值  10px  1rem = 10px  rem单位是相对于html的单位 */font-size: 64.6875px;}}.box {/* 32rem 28rem 320 320px*280px375 32rem = 32*12= 384px 28rem = 28*12 =336px414   w * h */width: 3.2rem;height: 2.8rem;font-size: 1rem;background-color: pink;}</style>

2;js查询当前设备的宽度，根据设备宽度动态计算字体基值

<script>// 实时监控屏幕宽度的变化 监听器//代表设计稿的宽度 var UIw = 640;var prev_fs = 100;window.onresize = function(){//获取当前设备的屏幕宽度  保存到 deviceWidth这个 变量里var deviceWidth = document.documentElement.clientWidth;//   console.log(deviceWidth);// 公式 计算当前屏幕宽度对应的html字体大小值fsvar fs = deviceWidth*prev_fs/UIw + 'px';//设置html标签的字体基值为fsdocument.documentElement.style.fontSize = fs ;console.log(fs)}</script>

主流适配：弹性盒、流式布局（宽度百分比，必须限定区间，高度auto ）、rem+媒体查询

响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。(原始视口980px 展示出来的界面是图和字特别小----》设置视口为屏幕宽度)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。）

2. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {#head { … }#content { … }#footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。·

3. 设置多种视图宽度

假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

一些注意的

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }
#content { width: 50%; }

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

table th, table td { padding: 0 0; text-align: center; }

CSS3动画

一：过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

补间动画是各个状态的连接（关键帧）

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

案例：手风琴

二：变形 transform

2D 转换：平移translate、旋转rotate、缩放scale、倾斜skew

2D 转换方法：

translate()

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）


:smiling_imp:案例： 盒子居中- rotate()可以对元素进行旋转，正值为顺时针，负值为逆时针；1. 当元素旋转以后，坐标轴也跟着发生的转变2. 调整顺序可以解决，把旋转放到最后3. 注意单位是 deg 度数4. 默认的旋转中心在中心点#### 变形中心点默认都是中心  切换变形参考点  transform-origin:center center 方向值 / px     transform-origin:top left / right bottom/ left bottom / right top    20px 30px****- scale()```css
transform:scale(0.8,1);

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

skew()

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

5.transform-origin可以调整元素转换的原点

div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

三：3D变形

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

rotateX()

就是沿着 x 立体旋转.

img {transition:all 0.5s ease 0s;
}
img:hove {transform:rotateX(180deg);
}

rotateY()

沿着y轴进行旋转

img {transition:all 0.5s ease 0s;
}
img:hove {transform:rotateY(180deg);
}

rotateZ()

沿着z轴进行旋转

img {transition:all .25s ease-in 0s;
}
img:hover {/* transform:rotateX(180deg); *//* transform:rotateY(180deg); *//* transform:rotateZ(180deg); *//* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为transform属性的一个值，做用于元素自身

理解透视距离原理：

3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换元素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

?旋转立方体盒子

动画(CSS3)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;
animation-iteraction-count: n 5/infinite  无限次执行
animation-direction:normal 奇数偶数次动画 不区分  最初状态--->最终alternate 奇数次的时候  最初状态--->最终偶数次的时候  最终 --->最初
animation-play-state: paused/running;

orm:rotateY(180deg);
}


### rotateZ()沿着z轴进行旋转```css
img {transition:all .25s ease-in 0s;
}
img:hover {/* transform:rotateX(180deg); *//* transform:rotateY(180deg); *//* transform:rotateZ(180deg); *//* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}