一、Flex-弹性盒布局
弹性盒定义了子元素如何在弹性盒中布局。
1. flex-direction ，设置主轴，定义了子元素在弹性盒中的位置
row，设置主轴为从左到右，默认值。
row-reverse，设置主轴为从右向左。
column，设置主轴为从上到下。
column-reverse，设置主轴从下往上纵向排列，最后一项在最上面。
2. justify-content，子元素在主轴上的对齐方式。
flex-start，子元素在行头紧挨着填充，默认值。
flex-end，子元素在行尾紧挨着填充。
center，子元素居中紧挨着填充。
space-between，两边对齐，剩下的子元素间隔相同的平分。
space-around，子元素平分，子元素的左右两边有同样的间距。
3. align-items，子元素在交叉轴上的对齐方式。
flex-start，子元素紧靠交叉轴轴的起始边界。
flex-end，子元素紧靠交叉轴轴的结束边界。
center，子元素在交叉轴上居中放置，如果超出则会两个方向都溢出相同长度。
baseline，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch，拉伸，如果大小为auto，则会拉伸成纵轴大小；如果大小有限制，则会遵守大小限制；此为默认值。
4. flex-wrap，子元素的换行方式。
nowrap，默认值，单行，太长会溢出。
wrap，多行，到边界会换行。
wrap-reverse，多行反转排布。
5. align-content，设置各行的对齐方式。
stretch，默认值，各行会伸展，以占用剩余空间。
flex-start，各行向弹性盒的起始位置堆叠。
flex-end，各行向弹性盒的结束位置堆叠。
center，各行向中间位置堆叠。
space-between，各行在弹性盒中平均分布。
space-around，各行在弹性盒中平均分布，两端保留子元素与子元素之间间距大小的一半。
6. align-self，用于设置子元素自身的，在交叉轴上的对齐方式，会覆盖容器的align-items属性。
auto，会设置为父元素的align-items属性，如果没有父元素，则会为stretch。
flex-start，该子元素会紧靠交叉轴轴起始位置。
flex-end，该子元素会紧靠交叉轴轴的结束位置。
center，该子元素会在交叉轴居中位置。
baseline，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch，如果大小为auto，则该子元素的大小就是交叉轴的尺寸大小，但会遵守min/max-width/height的限制。
7. flex，设置子元素如何分配空间
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值是0 1 auto。
flex-grow，相对于其他子元素的放大量，0代表最小长度，其他数字代表相对长度，值越大代表放大的越大，默认值为0。
flex-shrink，相对于其他子元素的缩小量，值越大就代表收缩的越多，默认值为1。
flex-basis，子元素的初始长度，合法值：auto、number、百分比，长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定，默认值为auto。
auto，就是1，1，auto;
none，就是0，0，auto;
inherit，就是从父元素继承该属性。
需要注意的是，flex可以进行简写：
- 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
- 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
- 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
- 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
二、CSS选择器
1. 点代表类选择器
为class="hometown"的所有p标签设定样式
p.hometown{
background-color:yellow;
}
2. 空格代表后代选择器
空格代表后代选择器
h1 em {color:red;}
作为h1元素后代的任何em元素的颜色为红色色。
3. #代表ID选择器
ID选择器名称必须是唯一的
#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>
4. []代表属性选择器
给带有href和title属性的a标签设置颜色为红色
a[href][title] {color:red;}
给class为important warning的p标签设置颜色为红色
p[class="important warning"] {color: red;}
给class属性中包含important的p标签设置颜色为红色
p[class~="important"] {color: red;}
把class="sidebar"的div中的
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
5. ：>代表子元素选择器
h1 > strong {color:red;}
h1标签之后紧跟strong标签的会变红
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
h1标签嵌套子标签再嵌套strong标签的不会变红
<h1>This is <em>really <strong>very</strong></em> important.</h1>
6. ：+代表兄弟元素选择器
用一个+结合符只能选择两个相邻兄弟中的第二个元素
li + li {font-weight:bold;}
<div>
<ul>
<li>List item 1 此行 不会 加粗</li>
<li>List item 2 此行会加粗</li>
<li>List item 3 此行会加粗</li>
</ul>
<ol>
<li>List item 1 此行 不会 加粗</li>
<li>List item 2 此行会加粗</li>
<li>List item 3 此行会加粗</li>
</ol>
</div>
7. 冒号 : 代表伪类和伪元素
-
p:first-child，
:first-child代表第一次出现的某标签，而不是某标签之后的第一个元素！切记！切记！切记！！！！
例子1：
将第一次出现的p标签的字体设置为红色
p:first-child {
color: red;
}
<p>some text 此处字体会变红</p>
<p>some text 此处字体不会变红！！！</p>
例子2：
将p标签的第一个子标签i的字体加粗
p > i:first-child {
font-weight:bold;
}
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>
例子3:
将 第一个p标签的后代i标签 的颜色变成蓝色
p:first-child i {
color:blue;
}
<p>some <i>text 此处会变蓝</i>. some <i>text 此处会变蓝</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
只有上述两处会变蓝色，其他地方不会变，
:first-line伪元素用于向文本的首行设置特殊样式。:first-letter伪元素用于向文本的首字母设置特殊样式。:before伪元素可以在元素的内容前面插入新内容。
在h1标签之前插入图片
h1:before{
content:url(logo.gif);
}
会在这里插入一张图片
<h1>This is a heading</h1>
:after伪元素可以在元素的内容之后插入新内容。
三、常用的CSS
1. position
static，默认值，没有定位
absolute，相对于父元素进行绝对定位，通过left、right、top、bottom属性来调整；absolute不会占用空间，下一个元素可能会跟它重叠。
注意：absolute是相对于 static 定位以外的第一个父元素进行定位，可以理解为相对于第一个relative定位的元素进行定位。
h2.pos_abs{
position:absolute;
left:100px;
top:150px
}
- relative，相对于正常位置进行定位，通过left、right、top、bottom属性来调整。relative会占用空间。
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px
}
h2.pos_right{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
</body>
- fixed，相对与浏览器窗口定位，通过left、right、top、bottom属性来调整。
2. display
none，此元素不会显示
block，块元素，元素前后会带有换行符
1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。
- inline，默认值，内联元素，前后没有换行符，也就是默认不会换行
1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- inline-block，行内块元素
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
3. margin，外边距，可以有1到4个值
margin:10px 5px 15px 20px; 指距离上边10px，右边5px，下边15px，左边20px，记住4个值时的顺序是上右下左，顺时针方向。
margin:10px 5px 15px; 指距离上边10px，左右均为5px，下方15px，记住3个值时的顺序是上、左右、下。
margin:10px 5px; 指距离上下均为10px，左右均为5px。
margin:10px; 指距离四个边都是10px。
auto，浏览器计算外边距。
4. box-sizing，指内边距和边框与宽度、高度的关系
content-box，默认值，在宽度和高度之外，绘制元素的内边距和边框。
border-box，为元素指定的任何内边距和边框都在已设定的宽度和高度内绘制。
5. word-wrap，有时候会遇到英文或者url链接不换行的情况，需要使用此属性使之换行
normal，默认值，只在允许的断字点换行（浏览器保持默认处理）。
break-word，允许长单词或 URL 地址换行到下一行。
6. overflow，规定了内容溢出时，如何处理
visible，默认值，内容不会被裁切，会呈现在元素之外。
hidden，超出的部分会被裁剪。
scroll，超出的部分会被裁剪，但是会以滚动条的形式查看剩余部分。
auto，如果内容被裁剪，则剩余部分会以滚动条的形式查看。
inherit，从父元素继承overflow属性的值。
7. box-shadow，为边框增加阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
两个必填值：h-shadow-代表水平阴影位置，v-shadow-代表垂直阴影位置。
四个可选值：blur-模糊距离，spread-阴影的尺寸，color-阴影的颜色，inset/outset-内部阴影/外部阴影。
例如：box-shadow: 3rpx 3rpx 10rpx rgba(0,0,0,0.2);
四、易混淆的知识
1. 标准文档流，就是默认的排列规则
块级元素，小程序中很多组件默认就是块级元素（display:block）
默认为块级元素有：小程序：<view>、；网页：<p>、<div>、<h1>、<li>、
-
块级元素总是从新行开始
块级元素的宽度默认是父元素的宽度
块级元素的宽度 = width + marginLeft + marginRight + paddingLeft + paddingRight块级元素高度默认是由子元素决定，默认随子元素的变化而变化，也可以自己设置高度。
块级元素的
宽度、高度、内边距、外边距都可以控制。
行内元素，小程序中很多组件默认就是行内元素（display:inline）
默认为行内元素有：小程序：<text>、<image>、；网页：<img>、<a>、<em>
-
行内元素总是和其他非块级元素在一行上，一行满了会换行
-
行内元素的高度、宽度、上下外边距、上下内边距均无效，只有左右外边距和左右内边距可以生效。
行内元素的宽度和高度均随着内容变化而变化，不能设置。
一般情况下，行内元素中只能放行内元素，不能放块元素。
