一.CSS三种样式表。
在HTML中引入CSS共有三种方式：
行内样式就是把样式写在HTML元素里面，用style属性声明样式。
1.1行内样式表(内联样式)。
hello world
1.2内部样式表。
内部样式就是把CSS代码写在HTML文件里面，不同于行内样式，它是把CSS代码集中写在HTML文件的头部，就是
标签里面，用标签注明。
hello
hello
1.3外部样式表(常用)。
在实际开发当中，一般使用外部样式，就是把HTML和CSS分别写在不同的文件里，然后在HTML中用link标签来引用。这种方式能提高网站的性能，并且能方便网站的维护。
.wxml文件
//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下
.wxss文件
.outter{
padding: 20px;
background-color: #2980B9;/*深蓝色*/
}
.inner{
margin-top: 50px;
width: 50px;
margin: 50px;
height: 50px;
background-color: blueviolet
}
二.css选择器。
1.1 常用css选择器。
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
例如:
.wxml
hello
.wxss
/* 类选择器 */
.classStyle{
padding: 20px;
background-color: #2980B9;/*深蓝色*/
}
/* id选择器 */
#idStyle{
margin-top: 50px;
width: 50px;
margin: 50px;
height: 50px;
background-color: blueviolet
}
/* 元素选择器 */
text{
color:red;
background-color:blue
}
1.2 样式选择器的优先级。
内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器
三.盒子模型。
3.1盒子模型。
html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）
3.2文档流。
文档流，又称为普通流或者常规流。
在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。
四.块元素和行内元素。
HTML的大多数元素都是块级(block)元素或行内(inline)元素
4.1块级元素
定义:
正常流时，每个块级元素默认占一行高度 ，一行内添加一个块级元素后一般无法添加其他元素，元素样式的display:block都是块级元素。
特点：
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
示例
div、h1（大标题） 、 p（段落） 、hr、table
4.2行内元素
定义:
行内元素不会另起一行,只占据它对应的标签的边框所包含内容的空间,元素样式的display : inline的都是行内元素。
特点:
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
示例:
a、 span、iframe、br（换行）、em（强调）、img（图片）、input、label、select 、textarea（多行文本输入框）
4.3display属性,块级/行内元素转换。
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block或 inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
| 块级元素 | 行内元素 |
|---|---|
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display:block | 对应于display:inline； |
display:block; 转化为块状元素；一个块状元素独占一行；可设宽、高、行高、顶和底边距离；宽默认为父元素的100%；
display:inline;转化为行内元素；和其他元素共处一行；不可设宽、高、行高、顶和底边距离；宽即所包含的文字图片之宽；
display:inline-block:可用{display:inline-block;}转化为内联块状元素；和其他元素共处一行；可设宽、高、行高、顶和底边距离；
五.position定位。
文档普通流:就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。
css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。
5.1 position。
| 属性 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。； |
| relative | 生成相对定位的元素，相对于其所在普通的文档流位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。； |
| static | 默认值，没有定位，元素出现在正常的文档流中; |
| fixed | 老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； |
| sticky | (CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。 |
5.1.1相对定位
position: relative
元素相对于它自己原来的位置进行移动。
注意，相对定位使元素仍然占据原来的位置。
如果将div2设置为相对定位，它会相对自己原来的位置移动，且会发现它原来的位置仍然占据着,不会被别的标签占据。
Title
1
2
3
5.1.2 绝对定位。
position: absolute
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
如果将div2设置为绝对定位，会发现它会相对于HTML定位，因为没有已经定位的祖先元素，且原来的位置被div3补上了。
Title
1
2
3
六 浮动。
6.1 浮动基础
float: left;
定义:
浮动,float，浮动的元素可以向左或向右移动，直到它的外边缘碰到包含的元素边框或另一个浮动元素的边框为止。
注意:
浮动会脱离标准文档流，所以文档的普通流的其他元素表现得就像浮动元素不存在一样。
例子1:
解释:当框1向右浮动的时候,他会脱离文档流向右移动,直到他的右边缘碰到包含框的右边缘。
例子2:
解释:当框1向左浮动时,他脱离文档流并且向左移动,知道他的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以他不占据空间,框2就会替代框1的位置,而由于框1浮在上方就会将框2覆盖住,使框2从视图中消失。
例子3
解释:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其他的浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其他元素"卡住"。
6.2 float实现文字环绕。
![]()
时光的单车飞快驶去，岁月的倒影也将消失，白天与黑夜不停的交替，轮回的四季斑驳了谁的岁月，
蹉跎了谁的年华。一个人静静地与岁月交错，于平淡之中细细体会生活的深意，去注视，去聆听，
去感受那些带着希望的别离以及那些经受沧桑的相逢，不论时光如何飞转，那些落花一样的往事，
依然鲜活地存在于我的脑海之中。当岁月和美丽的回忆已成为风中的叹息，我们伤感的眼里也许依
然残存旧时的泪痕，模糊了视线，不敢轻易触碰。
6.3 清除浮动。
为何要清除浮动?
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
例如:
创建给父容器设置边框和背景色。
big
small
将子控件设置为浮动
big
small
当父元素不给高度的时候，内部元素不浮动时会撑开而浮动的时候，父元素变成一条线。
6.3.1解决方式:
方式一:给父级元素设置高度，但一般写页面高度都是不固定的。
#father {
height: 300px;
}
方式二:给父级元素设置overflow:hidden或overflow:auto,zoom:1是为了浏览器的兼容性（IE大家都懂的），这种方法要注意溢出的元素。
#father{
overflow:hidden;
zoom:1;
}
方式三:给父级设置浮动，这种方法适用于本来父级就需要浮动的，如果父级不需要浮动，影响布局，还是没解决根本问题。
#father{
float:left;
}
方式四:使用before和after双伪元素清除浮动（推荐）
这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第三种方法是一样的道理。
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { /*照顾ie6*/
zoom: 1;
border-style: outset;
width: 400px;
background-color: darkorange;
}
big
small
七 弹性布局flex。
7.1 基础使用。
网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。
概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。（任何一个容器都可以指定为Flex布局，块级元素，行内元素也可。）
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
主轴和交叉轴
主轴和交叉轴取决于flex-direction的取值.如果flex-direction=raw那么水平方向上面的轴是主轴,垂直方向上面的轴是交叉轴。如果flex-direction=column那么垂直方向上面的轴是主轴,水平方向的轴是交叉轴。
justify-content:用于主轴上的子元素的对齐方式。
align-items:用于交叉轴上的子元素的对齐方式。
注意
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
display: flex; 将对象作为弹性伸缩盒展示，用于块级元素
display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素
例子:
1
2
3
.box {
width: 200px;
height: 200px;
background-color: #58a;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
background-color: #fb3;
}
7.2 Flex 作用于Box容器上的属性。
7.2.1. flex-direction
定义:
用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
取值:
row , row-reverse , column , column-reverse
代码:
box {
width: 200px;
height: 200px;
background-color: chartreuse;
display: flex;
flex-direction: column-reverse;
border: 5px solid red;
}
1. row：
默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴
2. row-reverse：
与row相反,主轴为水平方向，起点在容器的右端。
3. column：
表示垂直方向从上到下排列，此时垂直方向轴线为主轴
4. column-reverse：
与column相反,主轴为垂直方向，起点在容器的下沿。
7.2.2. flex-wrap
定义:
用于指定Flex子项是否换行。
取值:
nowrap , wrap , wrap-reverse
代码:
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
display: flex;
flex-wrap: wrap;
border: 5px solid red;
}
1. nowrap
默认值，表示不换行，Flex子项平均分配。(不换行，在一行显示，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)
2. wrap
表示换行，溢出的Flex子项会被放到下一行。(解决间距的方式就是将Flex子项的父项目的高度设置为两行的高度)
3. wrap-reverse
表示反方向换行(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)
7.2.3. justify-content
定义:
用于指定主轴(水平方向)上Flex子项的对齐方式
取值
flex-start , flex-end , center , space-between , space-around
代码:
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
display: flex;
justify-content:flex-start;
border: 5px solid red;
}
1. flex-start
start侧对齐，左对齐
2. flex-end
end侧对齐，右对齐
3. center
中心对齐
4. space-between
左边的靠左对齐,右边的靠右对齐,中间的等距排列。(两端对齐)
5. space-around
对于flex的子元素他们每侧的距离均相等(等距分布)
1和2之间的距离包含了1的下边距和2的上边距。
7.2.4.align-items
定义
用于指定交叉轴(又叫侧轴指的是垂直方向)上Flex子项的对齐方式
取值
stretch , flex-start , flex-end , center , baseline
代码
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
display: flex;
align-items:flex-start;
border: 5px solid red;
}
1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度
2. flex-start
表示与侧轴开始位置对齐
3. flex-end
表示与侧轴的结束位置对齐
4. center
表示与侧轴中间对齐
5. baseline
表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start。
7.2.5.align-content
定义:
该属性只作用于多行的情况下，用于多行的对齐方式
取值:
stretch , flex-start , flex-end , center , space-between , space-around
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
display: flex;
align-content:flex-start;
border: 5px solid red;
}
1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
2. flex-start
表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
3. flex-start
表示各行与侧轴中间对其
4. space-between
表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start
space-around：表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center
再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。
7.3 Flex 作用于子项上的6个属性介绍
7.3.1 order
该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数
取值：数值，默认值为0
7.3.2 flex-grow
用来指定Flex子项的扩展比例，不可以为负数，Flex容器会根据Flex子项设置的扩展比例作为比率来分配剩余空间
取值：数值，默认值为0，表示即使存在剩余空间，Flex子项也不会扩展
7.3.3 flex-shrink
用来指定Flex子项的收缩比例，不可以为负数，Flex容器会根据Flex子项设置的收缩比例作为比率来收缩各个Flex子项
取值：数值，默认值为1，表示所有子项在剩余空间为负数时，等比例收缩
注意：flex-shrink只能在不换行的情况下使用
7.3.4 flex-basis
用来指定Flex子项的占据的空间，不可以为负数
取值：auto | length | percentage | content
auto：默认值，计算规则：检索Flex子项是否设置了width值（或者height值，取决于flex-direction），如果设置了非auto的值，则使用width值（或者height值），若没有则使用content
length：用长度值定义宽度，不可为负数
percentage：使用百分比定义宽度，不可为负数
容器宽度为200px，Item1原始宽度为50px，设置 flex-basis: 50%;后宽度变成100px，扩展后宽度为110.5px；而Item2原始宽度为50px，扩展后为81.5px，比例正好是1:3
参考文献:
Flex 布局教程：语法篇
# CSS Flex布局属性整理