补一补
# <meta>标签
让我康康！
<meta charset="utf-8"> //语言
<meta name="keywords" content="前端,HTML,CSS,JavaScript"> //关键词
<meta name="description" content="正在补HTML和CSS的知识"> //描述# 语义化标签
让我康康！
<em> 标签事内联标签(inline element)，内联标签不会独占一行。em是emphasize的缩写。
<blockquote>这是长引用</blockquote>
<q>行内元素，这是内联的引用</q>
<span>行内元素，没有语义，就是在网页中选中文字</span>
<div>没有语义，表示块</div>网页一般通过块元素来对页面进行布局。一般不会在行内元素放块元素。p元素中不能放任何的块。
布局：
<body>
<div id="map" style="width: 800px; height: 400px">sdf</div>
<header></header>
<main></main>
<footer></footer>
</body>列表：
//无序列表
<ul>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ul>
//有序列表
<ol>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ol>
//定义列表
<dl>
<dt>这里是标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
</dl># 超链接
让我康康！
<a> 是个行内元素，并且可以放除了自身的任何东西。
<a href="https://baidu.com">跳绝对路径</a>
<a href="/r.html">相对路径</a>
/*相对路径一般以./或者../开头。
* ./可以省略不写。
* ./表示当前文件所在目录
* ../表示当前文件所在目录的上一级
* ../../表示当前文件所在目录的上两级超链接的其它用法：
<a href="https://baidu.com" target="_self">不打开新页面跳转，这个是默认值</a>
<a href="https://baidu.com" target="_blank">打开新页面进行跳转</a>
<a href="#">回到页面顶部</a>
<a href="#id">去到该id处</a>
<a href="#p3">去第三个自然段</a>
<a href="javascript:;">什么也不会发生</a># <img>标签
让我康康！
<img width="500" src="./image.png" alt="withd/height的单位是像素，修改其中一个，另一个会等比例缩放。若两个都设置，则图片会被缩放为指定像素。alt是图片描述，<img>标签为自结束标签">图片格式有jpeg、gif、png、webp、base64
base64能把图片加密后放在网页里，随网页一起加载。
# 内联框架
让我康康！
不怎么用了
<iframe src="https://atlas.moe" width="100px" height="100px" frameborder="0"></iframe># 音视频
让我康康！
音频：
<audio src="./sample.mp3" controls autoplay loop></audio> //controls等是不用给值的
//另一种写法
<audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器。
<source src="./sample.mp3">
<source src="./sample.ogg">
</audio>视频：
<video controls>
<source src="./sample.webm">
<source src="./sample.mp4">
</video># 表格
让我康康！
使用表格表示格式化数据
<table>
<!-- 在table中用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!-- 如希望一个数据占两个单元格，则需用到colspan属性 -->
<td colspan="2"></td>
</tr>
</table>长表格：
<!--
可以将表格拆分成三部分，
头部 thead
主体 tbody
底部 tfoot
好处就是，头部主体底部的位置固定了，可以更改标签的位置而不影响表格的内容排列
在thead中用th,单元格的值会加粗
-->
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期一</td>
<td>100</td>
<td>200</td>
<td>-100</td>
</tr>
<tr>
<td>星期二</td>
<td>200</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>星期三</td>
<td>100</td>
<td>100</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td>合计</td>
<td>0</td>
</tfoot>
</table>单元格的样式：
table {
width: 70%;
border: 1px black solid;
/* border-spacing 指定边框之间的距离 */
/* border-spacing: 0px */
/* border-collapse 设置边框的合并 */
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px black solid;
height: 100%;
/* 默认情况下元素在td中是垂直居中的，可以通过vertical-align来设置。水平居中用text-align设置。
可以利用这一性质，将一个div设置成display:table-cell，然后设置vertical-align:middle来使子元素垂直居中。
*/
vertical-align: bottom;
text-align: center;
}
/* 注意，网页会在tr前自动创建tbody，因此tr的父元素是tbody而不是table */
tr:nth-child(2n+1) {
background-color: grey;
}# 表单
让我康康！
表单将数据提交给服务器。使用form标签来创建一个表单。
表单：
<!-- 表单：
在网页中表单用来提交数据
form的属性：
action 表单要提交的服务器的地址
-->
<form action="target.html">
<!-- 文本框
注意：数据要提交到服务器中，必须指定name值，根据提交的是什么数据来填写 -->
<input type="text" name="xxx" id="" value="默认值">
<!-- 密码框 -->
<input type="password" name="pwd" id="">
<!-- 提交按钮 -->
<input type="submit" value="点我提交">
<!-- 单选按钮
如果要单选，则需要填入同样的name属性值
需要指定value属性的值服务器才知道选的是什么
checked属性可以指定默认选中-->
<input type="radio" name="question" id="" value="a">
<input type="radio" name="question" id="" value="b" checked>
<!-- 多选框
同样需要填入同样的name属性值
指定value服务器才知道选的是什么
checked属性可以指定默认选中-->
<input type="checkbox" name="task" id="" value="1">
<input type="checkbox" name="task" id="" value="2">
<input type="checkbox" name="task" id="" value="3" checked>
<!-- 下拉列表
添加selected来指定默认选项-->
<select name="下拉选项" id="">
<option value="选项1"></option>
<option selected value="选项2"></option>
<option value="选项3"></option>
</select>
</form>表单补充：
<form action="target.html">
<!-- 普通按钮
按下此按钮没有任何效果，可以通过JavaScript来添加效果-->
<input type="button" value="我是一个普通按钮">
<!-- 重置按钮
重置表单内的所有数据到默认值 -->
<input type="reset" value="我是一个重置按钮">
<!-- 按钮标签 -->
<button type="submit">我是一个提交按钮</button>
<button type="reset">我是一个重置按钮</button>
<button type="button">我是一个普通按钮</button>
<!-- 颜色选择框 -->
<input type="color" name="" id="">
<!-- 邮件输入框 -->
<input type="email" name="" id="">
<!-- 手机号输入框 -->
<input type="tel" name="" id="">
</form>input和form的属性：
<form action="target.html" autocomplete="off">
<!--
autocomplete: 自动补全历史，on为开启，off为关闭。
readonly： 只读，数据会提交。
disable: 禁用，数据不会提交。
autofocus: 表单项自动获取焦点
-->
<!-- 对kuang1这个文本框关闭自动补全，其它文本框则不会印象，如果form里没有关闭自动补全的话 -->
<input type="text" name="kuang1" id="" autocomplete="off">
</form># CSS的编写位置
让我康康！
<div style="display: none;">a div not displayed</div> //内联样式表
//内部样式表
<head>
<style>
*{
padding: 0;
margin: 0;
}
p{
color:yellow;
}
</style>
</head>使用 <link rel=”stylesheet” href=”ol.css”> 来引入外部样式表。
# CSS的基本语法
让我康康！
简单选择器：
p{
color: yellow;
} //p是选择器，选择所有的p标签。{}是声明块。通过声明块来为选中元素添加样式，由一个个声明组成。
//元素选择器，根据标签选择元素
p{
color: yellow;
}
div{
}
span{
}
//ID选择器，根据ID选择元素
#box1{
}
//类选择器，根据class选择元素
.boxClass{
}
//通配选择器，选择所有元素
*{
}
可以为一个元素指定多个class。 <div class=”boxClass waterClass”></div>
复合选择器：
/* 交集选择器，用法：选择器1选择器2选择器3...选择器n */
div.box1{
} /* 表示选择有box1类的div元素 */
.a.b.c{
} /* 表示选择既有a类又有b类又有c类的元素 */
h1, span{
} /* 同时选择多个选择器对应的元素 */关系选择器：
/* 子元素选择器 */
div.box > span{
} /* 选择类为box的div的子元素span */
/* 后代元素选择器 */
div span{
} /* 选择div下所有后代span */
/* 兄弟元素选择器 */
p + span{
} /* 选择紧挨着p的下一个兄弟span，如果不挨着就没有，而且仅选一个 */
P ~ span{
} /* 选择p下面的所有兄弟span */复合选择器：
[title]{
} /* [属性名]{}就是选择所有含该属性的所有元素，p[属性名]{}就是选择p标签所有含该属性的元素 */
p[title="abc"]{
} /* [属性名=属性值]{}就是选择含有指定属性和属性值的元素 */
p[title^="abc"]{
} /* [属性名^=属性值]{}就是选择属性值以指定值开头的元素 */
p[title$="abc"]{
} /* [属性名$=属性值]{}就是选择属性值以指定值结束的元素 */
p[title*="abc"]{
} /* [属性名*=属性值]{}就是选择属性值包含指定值的所有元素 */伪类选择器：
/*
伪类：不存在的类，特殊的类
- 比如：第一个子元素、被点击的元素..
- 伪类一般情况下是以: 开头
:first-child 第一个子元素下
:last-child 最后一个子元素
:nth-child() 第n个子元素，还可以填odd或者even
:nth-last-child() 倒数第n个子元素
:first-of-type 同类型的第一个元素
:last-of-type 同类型的最后一个元素
:nth-of-type() 同类型的第n个元素
*/
ol > li:nth-child(3){
} /* ol下的第三个子元素会被选择，若第三个子元素不是li，则不会有影响。 */
ul > li:not(:nth-child(3)){
} /* 选择ul下的li子元素但是不选择第三个 */
a:link{
color: yellow;
} /* 正常链接的颜色 */
a:visited{
color: blue;
} /* 访问过的链接 */
a:hover{
} /* 鼠标放上去时，链接的样式 */
a:active{
} /* 鼠标点击链接时，链接的样式 */伪元素选择器：
/*
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊位置）
伪元素用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
*/
div::before{
content: 'abc';
color: blue;
} /*在div前面加了一个红色的abc，这个伪元素必须加content属性。且在页面复制的时候复制不了，可以结合::after用来放引用 */
/* 通过.box的:hover控制它的::before */
.box:hover::before{/* CSS */}选择器的优先级：
/*
选择器的权重
- 内联样式 1,0,0,0
- ID选择器 0,1,0,0
- 类和伪类选择器 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承的样式 没有优先级
*/
#box1{
color: red;
}
div#box1{
color: yellow;
}
/* 这时box1显示黄色。当在比较优先级时，需要将所有选择器的优先级进行相加计算，最后值越高，越优先显示。 */
div,#box1,p{
}
/*
分组选择器会将每一个选择器单独计算，不会合一块儿算
选择器的值再高，也不会超过更高一级
如果优先级值计算相等，则优先使用靠下的样式
可以在某个样式后面加 !important，则此时该样式会获取到最高的优先级，甚至超过内联样式，但是在开发中一定慎用
*/# 样式的继承
让我康康！
样式的继承，为一个元素设置的样式的同时，它的后代也会继承它的样式。
继承是发生在祖先元素和后代元素之间的。
<div>
我是div
<span>我是div中的span
<em>我是span中的em</em>
</span>
</div>
// 若为div设置了样式，span和em都会继承div的样式。em会继承span的样式。
// 但不是所有的样式都会被继承，比如背景相关的和布局相关等的样式都不会被继承。# 长度、颜色单位
让我康康！
长度单位：
/*
像素：基本单位
百分比：相对于父元素大小的百分比，可以跟随父元素变化
em：相对于元素的字体大小来设置，1em=1 font-size
rem：相对于html的字体大小来设置
*/
div{
width: 100px;
height: 10em;
padding: 10%;
margin: 10rem;
}颜色：
/*
颜色单位：
- 在CSS中可以用颜色名来设置各种颜色，如red、green、chocolate等
RGB值：
- RGB通过三种颜色的浓度来调配出不同高度颜色
- rgb(22,22,22)
RGBA：
- 多的A表示透明，opacity
- rgba(22,22,22,.8)
十六进制的RGB
- #ff0000
- 如果两位两位重复，则可以简写 #ff0000 --> #f00
- #bbffaa --> #bfa 护眼色
HSL HSLA:
- H 色相,0 - 360
- S 饱和度，颜色的浓度，0% - 100%
- L 亮度，颜色的亮度，0% - 100%
*/
div{
background-color: #bfa;
color: rgb(22, 22, 22);
stop-color: rgba(22, 22, 22, .8);
flood-color: red;
border-color: hsl(22, 66%, 88%);
}# 文档流
让我康康！
<!--
文档流（normal flow）
- 网页是一个多层结构，一层堆一层
- 通过CSS来为每一层设置样式
- 作为用户只能看到最顶上那一层
- 这些层中，最底下的一层为文档流，文档流是网页的基础
创建的元素默认都是在文档流中进行排列
- 对于我们来说元素主要有两个状态
在文档流中
不在文档流中（脱离文档流）
- 元素在文档流中的特点
- 块元素
- 块元素在页面中单独占一行（自上向下垂直排列）
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度是被内容撑开
- 行内元素
- 行内元素不会独占页面的一行，只占自身大小
- 行内元素在页面中自左向右排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行再自左向右排列（书写习惯一直）
- 行内元素的默认宽度和高度都是被内容撑开
--># 盒子模型
让我康康！
<!--
盒子模型（box model）
CSS将所有元素都设置成了一个矩形的盒子
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
共同决定盒子的大小。
-->
.box{
/* 内容区 */
width:200px;
height:200px;
background-color:#bfa;
/* 边框 */
border-width:10px; /*border-width:10px 10px 10px 10px表示上下左右都是10px的边框。若只有三个值则表示上 左右 下的像素，若只有两个则表示 上下 和 左右 */
border-color:red;
border-style:dotted;
/* border-top-color\border-top-width\border-top-style 可以单独指定上下左右的颜色和宽度 */
}边框一般就写 border:10px red solid; ，没有顺序要求，便可以设置边框样式了。也可以对一个边进行这种设置。如 border-top: 10px solid red;
内边距（padding）：
内容区的背景颜色会衍生到内边距部分。所以可以新建一个inner的类，width和height设置成100%把父元素的内容区撑满，然后把颜色设置成另一个颜色。这样内边距的部分就很明显了。 padding:上 右 下 左;
盒子的可见大小是内容区+内边距+边框的大小。
外边距（margin）：
不会影响盒子的大小，但会影响盒子的位置,以及盒子的实际大小。也可以设置四个方向的margin，其中margin-top和margin-left是移动自己的位置，margin-bottom是移其他块。默认情况下margin-right不会产生任何效果，因为水平布局的原因。
margin:上 右 下 左;盒子的水平方向布局：
在一个父元素中，其子元素的margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素的内容区的宽度。在这七个值没有auto的情况下，如果不等于，则自动调整margin-right。如果有auto，则先调整auto的值。width的值默认是auto。若指定width的值，将margin-left和margin-right设置为auto，则auto的值会相等。用此方法来设置父元素中子元素的水平居中，margin:0 auto;
盒子的垂直方向布局：
不用满足那个等式。默认情况下父元素高度被内容撑开。若父元素高度设置了，子元素高度大于父元素设置的高度，则会溢出。使用 overflow 来对父元素设置如何应对元素的溢出。使用 overflow:auto; 来自动生成所需的滚动条。
垂直外边距的重叠：
相邻的垂直外边距会发生重叠现象。
若是兄弟元素，且都为正值，则取较大值。如果是一正一负，则取两者的和。如果两者都为负值，则取绝对值较大的值。
若为父子元素，子元素的相邻外边距会传递给父元素，比如上边的外边距。处理方法：
盒子的大小：
box-sizing 的值默认是content-box，这时width和height是设置内容区的大小。若将 box-sizing 的值设置成border-box，则width和height是设置整个盒子的大小。border与outline:
border与outline的用法一样，但效果不同。border会影响到页面布局，而outline（轮廓）不会影响布局，不会挤压其它块。
# 行内元素的盒子模型
让我康康！
.inline{
/*
行内元素的盒子模型：
- 行内元素不支持设置宽度和高度。如果想设置宽高，则可以设置 display: block（或者inline-block，inline-block既可以设置宽高，又不会独占一行，但能不用尽量不用）;把它设置为块元素来设置宽高。
- 行内元素可以设置padding，但垂直方向padding不会影响页面布局
- 行内元素可以设置border，但垂直方向border不会影响页面布局
- 行内元素可以设置margin，但垂直方向margin不会影响页面布局
*/
visibility: hidden; /* hidden后在页面中隐藏，但仍占据位置 */
display: none; /* 元素隐藏后不占位置 */
}# 浏览器的默认样式
让我康康！
浏览器一般都有默认样式，默认样式会影响布局，所以可以去掉。PC端去得比较多，移动端去得比较少。引用 reset.css 可以重置所有样式，引用 normalize.css 可以统一默认样式。
补充：要想文字垂直居中，把height和line-height设置成一样的值就可以了。
# 一些CSS样式
让我康康！
设置阴影：
/*第一个值：水平偏移量，正值向右。
第二个值，垂直偏移量，正值向下。
第三个值，阴影模糊半径。
第四个值，颜色。
*/
box-shadow: 0px 0px 20px black;
设置圆角：
/* 第一个值，圆的一个半径。
第二个值，圆的第二个半径。
*/
border-top-left-radius: 20px 10px;
/* 四个值分别是：左上 右上 右下 左下 */
border-radius: 11px 11px 22px 22px;
/* 设置成圆形 */
border-radius: 50%;
/* 横向 / 纵向 */
border-radius: 20px / 40px;设置元素的水平垂直居中：
.box1{
position:absolue;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
} /* 确保元素大小为0，如果大小是auto的话则会撑开整个页面 */如果这个方法用不了，则使用水平平移，在#变形处讲。
看body的大小：
不能通过给body设置background-color来看大小，因为这颜色是设置给html的。因此需要给body设置border来查看body的实际大小。
给文字设置渐变的颜色：
.cycloneWrapper .iconfont {
/* 就是设置一个渐变背景色，然后设置文字遮罩，再给文字弄透明 */
font-size: 200px;
background-image: radial-gradient(circle at 100px 100px, red 0%, yellow 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}将文字的颜色设置成背景图片：
.divBox{
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}# Float
让我康康！
- 设置float之后，不用强制满足等式。元素将完全从文档流中脱离，不占用文档流中的位置。下面的元素会补上来，会造成重叠。
- 如果想要两个元素水平挨着，则两个元素都要设置浮动。因为浮动元素向左或向右浮动时，不会超过前边或后边的浮动元素。
- 浮动默认不会从父元素中移出。
- 若浮动元素上边有没有浮动的块元素，则该浮动元素不会浮上去。
- 浮动元素不会超过他上边的浮动的兄弟元素，最多就是和它一样高。
- 浮动元素不会盖住文字。可以利用这一特性来设置文字环绕图片。
脱离文档流的特点：
/*
块元素：
1、块元素不在页面中占一行。
2、宽度和高度默认都被内容撑开。
行内元素：
1、特点会变成块元素的特点。
脱离文档流后，不用区分块和行内元素。
*/# 网页的布局
让我康康！
HTML：
<!-- 创建头部 -->
<header></header>
<!-- 网页的主体 -->
<main>
<nav></nav>
<article></article>
<aside></aside>
</main>
<!-- 创建页脚 -->
<footer></footer>CSS：
header, main, footer{
width: 1000px;
margin: 0 auto;
}
header{
height: 150px;
background-color: pink;
}
main{
height: 500px;
background-color: white;
}
nav, article, aside{
float: left;
height: 100%;
}
nav{
width: 200px;
background-color: tomato;
}
article{
width: 600px;
background-color: violet;
}
aside{
width: 200px;
background-color: yellow;
}
footer{
height: 150px;
background-color: yellowgreen;
}
body::-webkit-scrollbar{
display: none;
}浮动本身是用来使文字围绕图片的，不是用来布局的。所有用浮动来布局会出现高度塌陷的问题。
高度塌陷：
浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其下的元素会自动上移，导致页面布局混乱
所以需要解决这个问题，父元素的高度不能写死。BFC（Block Formatting Context）：
BFC是一个CSS中的一个隐含的属性，可以为元素开启BFC，开启后该元素会变成独立的一个布局区域.
开启BFC后的特点：
- 不会被浮动元素所覆盖
- 可以包含浮动子元素
- 开启BFC的元素的子元素和父元素外边距不会重叠
开启BFC的方式：
- 设置元素的浮动（不推荐）
- 将元素设置为行内元素（不推荐）
- 将元素的overflow设置成一个非visible的值
解决高度塌陷的其它方式：
如果不希望某个元素因为其它元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素产生的影响。
clear
- 作用：清楚浮动元素对当前元素的影响
- 可选值：left\right\both，分别清除左侧浮动元素的影响 \ 右侧浮动元素的影响 \ 清除两侧在影响最大的那一侧最推荐使用的解决高度塌陷的方式：
.ele::after{
content: '';
display: block;
clear: both;
}最推荐使用的解决外边距重叠的方式：
.ele::before{
content: '';
display: table;
}既可以解决高度塌陷又可以解决外边距重叠的方式：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
谁高度塌陷，给谁加clearfix。# 定位
让我康康！
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。使用 position 来设置定位。
定位：
定位是一种更加高级的布局手段。
通过定位可以将元素摆放到页面的任意位置。
使用position来设置定位。
可选值：
- static 默认值，元素是静止的没有开启定位
- relative 开启相对定位
- absolute 开启绝对定位
- fixed 开启固定定位
- sticky 开启粘滞定位相对定位：
- 开启相对定位，如果不设置偏移量的话，元素不会发生任何变化。
- 相对定位是参照元素在文档流中的位置定位的。也就是它开启定位前的位置。
- 相对定位会提升元素的层级。
- 相对定位不会使元素脱离文档流。‘
- 也不会改变元素的性质，块元素还是块元素。
偏移量：当元素开启相对定位后，要设置偏移量。偏移量就是top\bottom\left\right，比如top: 100px;
绝对定位：
- 不设置偏移量，元素的位置不会发生变化。
- 会使元素脱离文档流。
- 改变元素的性质，行内元素变为块元素，块的宽高被内容撑开。
- 会使元素提升层级。
- 绝对定位是相对于其包含快进行定位的。
包含块（containing block）：正常情况下，包含快就是离当前元素最近的开启了定位的祖先块元素。如果所有祖先块元素都没开启定位，则相对于根元素HTML（初始包含块）定位。
绝对定位元素的位置：
在绝对定位中设置水平居中，需要加上left: 0px; right: 0px。
设置垂直居中，可以设置margin-top: auto; margin-bottom: auto。
设置水平+垂直居中，则设置margin: auto; left: 0px; right: 0px; top: 0px; bottom: 0px。
固定定位：
- 固定定位也是一种绝对定位，所以固定定位大部分特点和绝对定位一样。
- 唯一不一样的是，固定定位永远参考浏览器的视口进行定位。就定在浏览器的一个地方，不会随滚动条滚动。
粘滞定位：
比如最上面的导航条，网页往下滚的时候能够在滚下去的时候，粘滞在最顶部。可以设置一个top:0px。
元素的层级：
- 对于开启了定位的元素，可以通过设置 z-index 属性来设置层级。
- 若不设置z-index，则元素的层级一样，优先显示靠下的元素。
- 祖先元素层级再高，也不会盖住后代元素。
对于网页布局，大体用float，细节用定位来微调。
# 字体
让我康康！
字体族：
font-family:
可选值：
- serif: 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
- cursive 草书字体
- fantasy 虚幻字体
font-family: 'my font', 'SimSun New', serif, cursive;
三者都是字体名，加''是因为SimSun New之间有空格。意思是优先使用第一个，若没有则使用第二个...最后一个字体是兜底的，若前面都没有的话。让用户使用服务器上的字体：
@font-face{
/* 指定字体的名字，自己取 */
font-family: 'my font';
/* 指定字体的路径，若第一个不能用就用第二个。format是不必要写的。 */
src:url('./font.ttf') format("truetype"),
url('./font.woff') format("woff");
}
图标字体：
- 在网页中经常使用小图标
- 但图片本身较大，并且不灵活。
- 所以在使用图标时，可以将图标设置为字体，然后通过font-face的形式来对字体进行引入。
- 然后以字体的形式使用图标。
iconfont和font-awesome都是图标字体。接下来说font-awesome。
font-awesome使用：
将css和webfonts移动到项目中的同一目录下。
将all.css引入到网页中。
使用：
- 通过类名使用。
<i class="fas fa-bell"></i> 可以用i标签，也可以用span标签
<span class="fab fa-accessible-icon"></span> fas或者fab是固定的。用法就是fas/fab + 另一个名字。
<i class="fas fa-bell" style="font-size:18px; color: red"></i> 还可以设置大小和颜色。
iconfont使用：
将除了html和demo的文件都移动到项目的一个同一目录下。
将iconfont.css引入到网页中。
使用方式和font-awesome差不多。若使用伪元素的方式的话，font-family的值为iconfont。font-awesome的其他使用方式：
.class::before{
content:'\f1b0'; /* 可以在Zeal中找一下 */
font-family: 'Font Awesome 5 Free'; /* 根据不同格式设置不同字体。如果是FAS则写'Font Awesome 5 Free'，并加上font-weigh。如果是FAB，则只需要写一个'Font Awesome 5 Brands' */
font-weight: 900;
color: blue;
} /* 通过伪元素加到某个类上。 */
使用实体的方式使用图标字体：
<span class="fas"></span> <!-- &#x图标的编码 &#x是实体的意思-->
.xm-logo::before {
content: '\f0f3';
font-family: 'iconfont';
}行高和字体框：
line-height:
指文字占有的实际高度
行高可以指定大小，可以说px、em和整数。如果是整数的话，行高将会是字体的指定倍数。
行高经常用来设置行间距。
行间距 = 行高 - 字体大小
字体框：
字体框是字体存在的格子，设置font-size实际上是设置字体框的高度。
行高会在字体框的上下平均分配。
div{
/* 可以将行高和高度设置成一个值，使单行文字在一个元素中垂直居中。 */
font-size: 50px;
height: 200px;
line-height: 200px;
}
字体简写属性：
font 可以设置有关字体的所有属性。
font: italic bold 50px/2 'My Font', serif, sans-serif, monospace;
字体大小必须排在倒数第二个，字体族必须排在最后一个。
50px是大小，后面的/2是行高，/2不写的话就是默认行高。
前面还可以加italic bold之类的值。
如果不写其他值，则会以normal覆盖font-weight font-style。文本的水平和垂直对齐：
text-align（文本水平对齐）：
left：默认值 左侧对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
vertical-align（垂直对齐）
baseline：默认值 基线对齐
top: 顶部对齐
bottom: 底部对齐
middle: 居中对齐
图片是沿着基线对齐的，所以会留下缝隙，如果不想有缝隙，就可以通过设置vertical-align来使它不再基线对齐。其它文本样式：
text-decoration:
none: 什么都没有
underline: 下划线
line-through: 删除线
over-line: 上划线
text-decoration: line-through red dotted;
white-space: 设置网页如何处理空白（换行）
normal: 正常
nowrap: 不换行
pre: 保留空白，写多少空格就会显示多少空格。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
设置不换行，溢出的内容用省略号表示# 背景
让我康康！
基本属性的设置：
.imgDiv {
background-color: red;
/* background-image 设置背景图片：
可以同时设置background-color和background-image。
如果背景图片的大小小于元素大小，则背景图片自动在元素中平铺铺满。
如果背景图片的大小大于元素大小，则图片将会显示补全。
如果一眼大， 则会正常显示。
*/
background-image: url('./image.png');
/* background-repeat 设置背景重复的方式
- repeat：默认值，背景将沿x、y双方向重复
- repeat-x: 沿着x方向重复
- repeat-y: 沿着y方向重复
- no-repeat: 背景图片不重复
*/
background-repeat: no-repeat;
/* background-position 设置背景图片位置
- 通过top bottom left right center几个方位词来设置图片的位置
使用方位词时，必须指定两个值。若只写一个，则第二个默认center
- 通过偏移量来指定图片的位置
水平方向的偏移量 垂直方向的偏移量
*/
background-position: top left;
background-position: 10px 10px;
/* */
}另一些关于背景图片的属性设置：
.imgDiv {
background-color: red;
background-image: url('./image.png');
background-repeat: no-repeat;
background-position: 10px 10px;
/* background-clip 设置背景的范围
- border-box: 默认值，背景会出现在边框的下边
- padding-box: 背景不会出现在边框，只出现在内容区和内边距
- content-box: 背景只会出现在内容区
background-origin 背景图片偏移量计算的原点
- padding-box: 默认值，background-position的偏移量从内边距处开始计算
- content-box: 偏移量从内容区开始计算
- border-box: 偏移量从边框开始计算
*/
background-clip: padding-box;
background-origin: content-box;
/* background-size 设置图片大小
第一个值设置宽度
第二个值设置高度
- 如果只设置一个，则第二个值是auto。则图片比例不会变。
- cover: 保持图片比例，将元素铺满。
- contain: 保持图片比例，将图片在元素中完整显示
*/
background-size: contain;
/* background-attachment 设置图片是否跟着元素移动
- scroll: 默认值，跟着元素一起移动
- fixed: 图片固定在页面中，不会随元素移动
*/
background-attachment: scroll;
}简写：
.imgDiv {
/* background简写的注意事项
- background-position必须写在background-size的前面，且用/隔开。background-position/background-size。这两个必须成对出现，且用/连在一起。
- background-origin要在background-clip的前面
*/
background: url('./img.png') red top left/cover border-box content-box no-repeat;
}
渐变色背景：
如果想用上下渐变色的背景，则截取它的一个单位，然后设置repeat-x
超链接link、hover、active状态图片切换：
就a:link a:hover a:active分别设置background-image:url()就行了，但当用户用的时候浏览器才会去加载这些外部资源，所以可能会造成闪烁的问题。因此可以将这表示三个状态的图片合并成一张图片（叫CSS-Sprite，雪碧图）。然后这样设置：
a:link{
display: block;
width: 100px;
height: 66px;
background-image: url('./image.png');
}
a:hover{
background-position: -100px 0px;
}
a:visited{
background-position: -200px 0;
}雪碧图使用步骤：
- 确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设为元素的背景图片
- 设置一个偏移量以显示正确的图片
线性渐变：
.imgDiv {
display: block;
width: 200px;
height: 100px;
/* 渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色到其他颜色过渡的效果。渐变是图片，通过background-image来设置
- linear-gradient(方向，color1,color2,..,colorN) 线性渐变，颜色沿着一条直线变化
color1在开头，colorN在结尾，沿着某一方向等距分配，中间是过渡区域。
方向：
- to top 向上
- to left 向左
- to top left 向左上
- ...
- 20deg deg表示度，20度
- 0.2turn turn表示圈，0.2圈
如不想等距分配，可以写成color 50px，表示在50像素的位置这个颜色是最浓的。如果它是第一个颜色，则从0到50像素都是这个纯色。
- repeating-linear-gradient(方向, color1,color2) 可以平铺的线性渐变
用法和linear-gradient()差不多，但是可以平铺，重复这个渐变。
*/
background-image: linear-gradient(to top right, white, yellow);
}径向渐变：
.imgDiv {
width: 300px;
height: 300px;
/*
radial-gradient() 径向渐变（辐射性的效果）
语法：radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置,..., 颜色 位置)
大小:
- ellipse 椭圆
- circle 圆
- closest-side 以到最近的边的距离为半径
- closest-corner 以到最近的角的距离为半径
- farthest-side 以到最远的边的距离为半径
- farthest-corner 以到最远的角的距离为半径
位置：
- top\bottom\left\right\center
- 10px 20px 像素值确定的位置
*/
background-image: radial-gradient(closest-corner at 100px 200px, red 60px, yellow 100px);
}鼠标平面3D效果：
body {
perspective: 1000px;
overflow: hidden;
// position: relative;
}
.bgImg {
background-image: url('../img/bgimg.jpg');
width: 100vw; //设置bgImg的宽
height: 100vh; //设置bgImg的高
top: 0;
left: 0;
// position: absolute;
background-position: center;
background-size: 80vw; //设置图片的大小
transform: scale(1.5);
// transition: transform 0.1s ease-in-out;
transform-style: preserve-3d;
}合理运用scale，background-position和background-size
# 小米首屏
让我康康！
上三角：
.upTriBox{
width: 0px;
height: 0px;
border: 10px red solid;
border-top: none;
border-color: transparent transparent red transparent;
}
/* 在li里面且居中的小三角 */
.qrli::after {
content: '';
width: 0px;
height: 0px;
border: 5px red solid;
border-top: none;
border-color: transparent transparent white transparent;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
/* 通过自身的hover控制自身的伪元素，则两个选择器应该连在一起*/
.qrli:hover.qrli::afterP{购物车迷你面板：
.cart-panel {
width: 300px;
height: 125px;
background-color: #bfa;
display: none;
float: right;
}
/* 要让面板开启绝对定位且位置变为购物车，就要给父元素开启一个position:relative */
.cart-panel-show {
position: relative;
}
/* 为了不使迷你面板占据位置，要让它脱离文档流，加一个position: absolute */
.cart-panel-show:hover .cart-panel {
display: block;
position: absolute;
left: -180px;
z-index: 2;
}让<img>在某个元素中居中：
/* img是行内元素，先把它设置为块元素，再设置margin:0 auto;或者再加一个left:0px;right:0px; */
.appCode img {
display: block;
width: 90px;
height: 90px;
margin: 0 auto;
}在input里使用字体图标：
<input class="fas" type="submit" value="">二维码、购物车出现的动画效果：
.appCode {
height: 0px;
overflow: hidden;
width: 124px;
background-color: white;
position: absolute;
left: -39.985px;
z-index: 2;
transition: height 3s;
}
.qrli:hover .appCode {
/* display: block; */
height: 148px;
}
/* transition第一个值写发生改变的属性，第二个值写从改变所用的时间。 */元素水平切换动画：
可以在元素旁边挨着写另一个元素，通过left或者right将它放在旁边，然后用transition把它移回来。
使用text-indent: -9999px来隐藏字，只让搜索引擎看到，不让用户看到。
text-indent:xxxpx;
布局的等式：
left+margin-left+margin-right+right = 视口宽度。
设置网站图标：
<link rel="icon" href="./favicon.ico"># 过渡
让我康康！
.trans {
/* 过渡（transition）
通过过渡可以指定一个属性发生变化时的切换方式
*/
/* transition-property: 指定要执行过渡的属性
多个属性用，隔开
如果所有属性都需要，则可以写all。省略不写表示all
大部分属性都支持过渡效果，过渡时是从一个有效值向另一个有效值过渡
*/
transition-property: height, width;
/* transition-duration：指定过渡效果持续的时间
时间单位有s和ms，1s = 1000ms
中间用逗号隔开，可以分别指定时间
*/
transition-duration: 2s, 1s;
/* transition-timing-function：过渡的时序函数
指定过渡的执行方式
- ease：默认值，慢速开始，先加速，后减速到停止
- linear： 匀速运动
- ease-in：加速运动
- ease-out：减速运动
- ease-in-out：先加速 后减速
- cubic-bezier()：通过bezier曲线来指定时序
- steps()：分步执行过渡效果
- steps(2, start)：分两步执行，在分段时间开始时执行
- steps(2, end)：分两步执行，在分段时间结束时执行
*/
transition-timing-function: ease;
/* transition-delay：过渡效果的延迟
等待一段时间后再执行过渡
*/
transition-delay: 2s;
}简写：
.trans {
/* transition：可以同时设置过渡相关的所有属性
只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
*/
transition: margin-left 2s 1s cubic-bezier(.24, .95, .82, -0.88);
}过渡练习：
transition-property: background-position;
//格局要打开# 动画
让我康康！
过渡效果必须要执行某个行为时才会有过渡效果，动画是不去执行操作，它自己在那儿动。
.anime {
width: 100px;
height: 100px;
background-color: red;
/* 设置anime的动画
animation-name：对当前元素生效的关键帧的名字
*/
animation-name: typewriter;
/* animation-duration：动画的执行时间 */
animation-duration: 2s;
/* animation-delay：设置动画延时 */
animation-delay: 2s;
/* animation-timing-function:：设置动画的时序，可选值参照#过渡 */
animation-timing-function: linear;
/* animation-iteration-count：设置动画执行（迭代）次数
直接写个值，表示执行几次
infinite 永远
*/
animation-iteration-count: 3;
/* animation-direction：设置动画方向
normal：默认值 从from到to
reverse：从to到from
alternate：从from到to，但重复执行时，会反向执行
alternate-reverse： 从to到from，然后反向执行
*/
animation-direction: alternate-reverse;
/* animation-play-state：设置动画的执行状态
running：动画执行
paused：动画暂停
*/
animation-play-state: paused;
/* animation-fill-mode：设置动画的填充模式
none：默认值，动画执行完毕，元素回到原来的位置
forwards：动画执行完毕，停止在动画结束位置
backwards：动画延时等待时，元素就会处于动画开始位置
both：结合以上两种，动画延时等待时，元素就会处于动画开始位置。当动画结束时，元素停止在动画结束位置
*/
animation-fill-mode: backwards;
}
/*
动画
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一个步骤
@keyframes identifier，这个identifier指这个关键帧的名字
*/
@keyframes identifier {}
@keyframes typewriter {
/* from表示动画的开始位置 也可以使用0% */
from {
left: 0px;
}
/* to表示动画的结束位置 也可使使用100% */
to {
left: 1000px;
}
}简写：
.anime{
/* animation的简写中，和transition一样
只有一个要求，持续时间要在延时的前面
其它都没要求
*/
animation:jianxie 2s infinite 3s alternate;
}
@keyframes jianxie {
from{
}
to{
}
}关键帧：
动画可以从0%到100%任意设置关键帧。
@keyframes ball {
from {
margin-top: 0;
}
/* 对33%和to设置同样的参数 */
33%,
to {
margin-top: 400px;
/* 下降时加速 */
animation-timing-function: ease-in;
}
66% {
margin-top: 100px;
}
}# 变形
让我康康！
变形就是通过CSS改变元素的形状或位置
- 变形不会影响页面的布局
- 一个元素只会有一个transform生效，如果要写多个效果，则在一个transform里用空格隔开
X轴Y轴的平移：
.box1 {
/* 用transform来设置元素变形的效果
- 平移
translateX() 沿着X轴方向平移
translateY() 沿着Y轴方向平移
translateZ() 沿着Z轴方向平移
平移元素时，百分比是相对于自身计算的
*/
transform: translateX(100px); /* 向右平移100像素，但不会影响其它元素。把100px改成50%也行，这个50%是相对于自己来说的 */
}用X轴Y轴的平移变形来设置元素的水平垂直居中：
.box2 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* 变形不会影响页面的布局一个元素只会有一个transform生效，如果要写多个效果，则在一个transform里用空格隔开 */
}变形也是可以写在transition-property里的：
.box3{
transition-property: transform 3s;
}Z轴的平移：
html {
/* 设置当前网页的视距为800px 人眼离网页的距离 */
perspective: 800px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/* z轴平移：调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须设置网页的视距perspective
*/
transition: 2s;
}
body:hover .box1 {
/* 设置Z轴平移 值越大，离用户眼睛越近 */
transform: translateZ(200px);
}旋转：
html {
/* 设置当前网页的视距为800px 人眼离网页的距离 */
perspective: 800px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
}
body:hover .box1 {
/* 通过旋转可以使元素沿X Y或Z轴旋转指定的角度，为了效果体现出来，必须要设置视距（perspective） */
/* 绕X轴旋，就像一个在眼睛前面的烤肉架对着你烤肉，然后那根棒棒在转，上面的肉就会转。转90度，就从下往上看一个面 */
transform: rotateX(90deg);
/* 绕Y轴旋转，就像星露谷的栅栏上的门，你看着就像绕着门柱旋转。 */
transform: rotateY(45deg);
/* 绕Z轴旋转，就是绕元素的中心旋转 */
transform: rotateZ(45deg);
/* transform里的值，写在前面的会先执行 */
/* 先绕X轴转45度，再沿Z轴平移333像素 */
transform: rotateX(45deg) translateZ(333px);
/* backface-visibility 是否显示元素的背面 */
transform: rotateY(180deg);
backface-visibility: hidden;
}旋转练习：
如果要做一个时钟的话，可以先创建一个正方形，再把秒针分针时针放在正方形中心，长取正方形的一半，然后动画的旋转效果给正方形，就不给指针本身了。
默认的transform是2d效果，若想它成3D效果，则需要写一个transform-style: preserve-3d;
缩放：
.box1{
width: 100px;
height: 100px;
background-color: blanchedalmond;
transition: 2s;
margin: 100px auto;
}
.box1:hover{
/* scale() 对元素进行缩放的函数
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 水平垂直双方向缩放
*/
transform: scaleX(2);
}变形的原点：
transform-origin: 0px 0px;
也可以填写center\top\left\right\bottomperspective：
//在想要呈现3D效果那个元素的父元素里输入perspective属性
.wrapper{
perspective: 1000px;
} //注：开启了perspective后，若还要开启position定位，就要注意width和height的大小。若用%表示长短的话，就要注意定位的父元素是否有宽高。transform-style：
//若想开启透视效果，除了设置perspective，还要设置transform-style。在要开启透视的元素里设置preserve-3d就可以了。
.transBox{
transform-style: preserve-3d;
}# LESS
让我康康！
对CSS的一个小补充，然后是LESS：
<style>
/* less是一门css的预处理语言
less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式 */
html {
/* css原生也支持变量的设置
--变量名:值*/
--height: 60px;
--width: 100px;
--color: #bfa;
}
.box1 {
width: 300px;
/* 变量的使用 */
background-color: var(--color);
/* calc() 计算函数 */
width: calc($width/2); //这个就是300px/2，用$来指代类中width的值
}
</style>LESS的语法：
浏览器不认less文件，所以必须通过 easy LESS 插件来编译。
//LESS的注释，该注释不会被写在生成的css中
/* CSS的注释，该注释会被写在生成的css中 */
.box1{
width: 100px;
height: 100px;
.box2{
width: 10px;
height: 10px;
}
.box3{
width: 50px;
height: 50px;
}
}
//变量，在变量中可以存储任意的值
//并且可以在需要时，任意修改变量的值
//变量的语法：@变量名
@a:100px; //大小
@b: #bfa; //颜色
@c: box5; //类名
.box4{
//使用变量时，如果是直接使用则以@变量名的形式使用即可
//作为类名，或者一部分值使用时，则以@{变量名}的形式使用
width: @a;
color: @b;
// 使用$可以直接引用
height: $a;
.@{c}{
background-image: url("./@{a}/image.png");
}
}父元素和扩展：
.box1 {
// 后代选择器
.box2 {
color: red;
}
// 子元素选择器
>.box3 {
color: red;
// 为box3设置hover
// &表示外层父元素
&:hover {
color: orange;
}
}
}
// :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
// p1也有了.box1>.box3的样式
.p1:extend(.box1 > .box3) {
width: 200px;
height: 200px;
}
// 混合，将一个样式复制到另一个，但是extend更省代码
// p4不会显示，用来和其他类混合
.p4(){
width: 100px;
height: 10px;
}
.p5{
.p4();
}混合函数：
混合函数可以传参
// 设置三个参数，可以指定默认值@w:200px
.colorBox(@w:200px,@h,@boxColor){
width: @w;
height: @h;
border: 1px @boxColor solid;
}
.blackBox1{
// 把盒子的宽高和颜色传过去，这是按顺序传
.colorBox(200px,200px,black);
}
.redBox1{
// 按名传
.colorBox(@boxColor:red,@w:200px,@h:300px);
}LESS的functions:
// 取两个颜色的平均色
span{
color: average(red,yellow);
}
// 颜色加深，设置动画的时候用
.colorBox{
// 第一个值传颜色，第二个值传加深百分之几
background-color: darken(#bfa,20%);
}LESS的补充：
// 引用其它less，可以将css分成不同模块，方便维护
@import url('./style2.less');
.box1{
// 在less中所有数值都可以运算
width: 200px+100px;
height: 100px/2;
background-color: #fafafa;
}
/* 通过.box的hover控制它的::before */
.box{
&:hover::before{/* CSS */}
}# 弹性盒
让我康康！
flex（弹性盒）：
flex(弹性盒)
- 是CSS中的又一种布局手段，它主要用来代替浮动完成网页布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
- 弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 通过display来设置弹性容器
- display: flex; 设置为块级弹性容器
- display: inline-flex; 设置为行内级弹性容器
- 弹性元素
- 弹性容器的子元素叫弹性元素（弹性项）
- 弹性元素可以同时是弹性容器 弹性容器和弹性元素：
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 800px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
/* flex-direction指定弹性元素的排列方式（给容器设置）
可选值：
- row 默认值，弹性元素在弹性容器中水平排列（左向右）。但对有些国家来说是从上向下
- row-reverse 弹性元素在容器中反向水平排列
- column 弹性元素在容器中纵向排列
- column-reverse 弹性元素在容器中反向纵向排列
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的轴称为侧轴*/
flex-direction: row;
}
li {
width: 100px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的属性:
flex-grow 指定弹性元素的伸展系数
- 当父元素有多余的空间时,子元素如何伸展
- 父元素的剩余空间会按照比例分配
flex-shrink 指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩
- 值越大,缩得越多.0的话不收缩 */
flex-grow: 1;
}
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 2;
}
li:nth-child(3) {
flex-grow: 3;
}弹性容器上的样式：
.flexBox {
/* flex-wrap 设置弹性元素是否在弹性容器中自动换行
可选值：
- nowrap 默认值，元素不会自动换行
- wrap 元素沿着侧轴方向自动换行
- wrap-reverse 元素沿侧轴反方向换行
*/
flex-wrap: nowrap;
/* flex-flow 是wrap和direction的简写属性，没有顺序要求 */
flex-flow: wrap row;
/* justify-content 设置如何分配主轴上的空白空间
可选值：
- flex-start 元素沿着主轴的起边排列，有空白的话就在最后
- flex-end 元素沿主轴的终边排列，有空白就在最前
- center 元素居中排列，空白平均分布在两侧
- space-around 空白分布到子元素两侧
- space-evenly 空白分布在子元素单侧，但不挨着
- space-between 空白均匀分布在元素间，每两个元素空白是挨着的 */
justify-content: flex-start;
/* align-items 元素在侧轴如何对齐 设置元素间的关系
可选值：
- stretch 默认值，将子元素的高度设置为相同的值
- flex-start 元素不会拉伸，沿着侧轴起边对齐
- flex-end 沿着侧轴终边对齐
- center 居中对齐
- baseline 基线对齐 */
align-items: center;
/* align-content 侧轴空白空间的分布
可选值：和justify-content一样 */
align-content: space-around;
}弹性元素上的样式：
// 弹性元素
.flexItem {
/* align-self 覆盖当前弹性容器上的align-items的 */
/* 弹性元素的增长系数 */
flex-grow: 1;
/* 弹性元素的缩减系数
- 缩减系数的计算方式比较复杂
- 缩减多少是根据缩减系数和元素大小来计算 */
flex-shrink: 1;
/* 元素基础长度
- 如果主轴是横向的，则该值指定的是元素的宽度
- 如果主轴是纵向的，则该值指定的是元素的高度
- 默认值是auto，表示元素参考自身的宽度或高度
- 如果传递了一个具体的数值，则以该值为准 */
flex-basis: 100px;
/* flex 可以设置弹性元素所有的三个样式
flex 增长 缩减 基础
initial "flex : 0 1 auto"
auto "flex: 1 1 auto"
none "flex: 0 0 auto" 弹性元素没有弹性*/
flex: initial;
}
.flexBox li:nth-child(1) {
/* order 决定弹性元素的排列顺序 */
/* 这样的话第一个li就排到第三个去了 */
order: 3;
}淘宝移动端导航条-练习：
给nav-wrapper设置display:flex;
# 移动端
让我康康！
视口：
<!--移动端默认情况下的视口大小是980px
移动端的默认像素比就是980/移动端宽度
如果直接在网页中编写移动端代码，这样在980视口下，像素比不好，导致网页内容很小
编写移动端时，必须要确保一个比较合理的像素比，
1CSS像素对应2个物理像素
1CSS像素对应3个物理像素
确定一个完美视口，在开发移动端就很有用
可以通过meta标签设置视口大小
可以直接用meta viewport设置完美视口，以后写移动端，先把这个写上
-->
<meta name="viewport" content="width=device-width">VW适配：
在移动端开发时，不能用px来进行布局，因为移动端设备的屏幕不一样
vw 表示的是视口宽度（viewport width）
- 100vw 是一个视口的宽度
- 1vw 1%s视口的宽度示例：
* {
margin: 0;
padding: 0;
}
@total-width: 375;
html {
// 设置rem的比值
font-size: (100vw/@total-width * 40);
}
.box1 {
// 175是在PC上看到的像素值
height: 175/40rem;
}响应式布局：
/* 响应式布局：
- 不同窗口大小呈现不同样式
- 可以使一个网页适用于所有样式
- 响应式布局的关键是媒体查询
- 通过媒体查询可以为不同设别设置不同样式
*/
/* 媒体查询
语法：@media 查询规则{}
媒体类型：
- all 所有设备
- print 打印设备
- screen 带屏幕的设备
- speech 屏幕阅读器
可以用,连结多个媒体类型
可以在媒体前加一个only，使老版本浏览器识别不出，避免出错*/
@media all{
/* 对所有设备都生效 */
body{
background-color: #bfa;
}
}
/* 媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时，样式生效）
max-width 视口的最大宽度（视口小于指定宽度时，样式生效）
，表示或者，and表示同时满足 */
@media only screen and (min-width:500px) and (max-width:700px){
body{
background-color: #bfa;
}
}使用@media还可以设置横屏竖屏情况下的样式：
/* portrait表竖屏情况下 landscape表横屏情况下 */
@media screen and (orientation: portrait) {
.screentip {
display: block;
}
}使手机屏幕撑满（不能再上下左右移动）：
手机的浏览器的地址栏和底边导航栏都要占据位置，所以不要用vw、vh来设置宽高，用百分比。
假设要用一张背景图片来占据整个屏幕大小：
html {
font-size: (100vw/@total-width * 40);
height: 100%;
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.bgImg {
background-image: url('../img/background_Mobile.jpg');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}