简介
- CSS，即层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素
- 外部样式表可以极大提高工作效率，通常存储在 CSS 文件中。
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
p {color:red;text-align:center;}
- CSS注释以 / 开始, 以 / 结束。
选择器
1. id选择器
可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS 中id选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。#para1{text-align:center;color:red;}
2. class选择器
class 选择器用于描述一组元素的样式，在 CSS 中，类选择器以一个点“.”号显示。
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用class=”center” 让该元素的文本居中:.center {text-align:center;}
p.center {text-align:center;}
3. 元素选择器
元素选择器通过标签名选择元素。 ```css
p元素
p元素
p元素
<a name="wjTQD"></a>
# 背景
1. 背景颜色：background-color
1. 背景图像：background-image
（1）默认背景图像水平或者垂直方向平铺重复显示；css
body {background-image:url(‘paper.gif’);}
（2）如果图像只在水平方向平铺(repeat-x),则：background-repeat:repeat-x;<br />（3）取消平铺：background-repeat:no-repeat;<br />（4）改变图像在背景中的位置: background-position<br />（5）CSS3允许在元素上添加多个图像css
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
3. background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
3. 简写属性
body {background:#ffffff url('img_tree.png') no-repeat right top;}<br />简写时属性顺序：background-color>image> repeat> attachment> position
5. 背景平铺background-size：contain
通过拉伸实现，会有失真<br />同时，在CSS3中，background-size可以设置背景图像的大小，可以指定像素或百分比大小。css
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
6. background-origin 属性指定了**背景图像的位置区域**。
content-box, padding-box和 border-box区域内可以放置背景图像。<br />css
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
7. **渐变**
1）CSS3 定义了两种类型的渐变（gradients）：
- **线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向**
- **径向渐变（Radial Gradients）- 由它们的中心定义**
以线性渐变为例，从上到下（默认情况下），语法：**css
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
//从上到下的线性渐变
#grad {
height: 200px;
background-image: linear-gradient( red , yellow);
}
//从左到右的线性渐变
#grad1 {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
//从左上角到右下角的线性渐变
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
2）**角度**是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。<br />css
//语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
//从右到左：red—>yellow
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
<a name="6CtKx"></a>
# 文本
1. **文本颜色**：color
1. **文本对齐方式**：text-align
当text-align设置为"justify"，为两端对齐
3. **文本修饰**：text-decoration
overline 上划线<br /> line-through 删除线<br /> underline 下划线<br />从设计的角度看，text-decoration属性主要是用来删除链接的下划线，不建议强调指出不是链接的文本，因为这常常混淆用户。
4. **文本转换**：text-transform用来指定在一个文本中的大写、小写字母和首字母大写。
（uppercase、capitalize、lowercase）css
This is some text.
This is some text.
This is some text.
5. 文本缩进：text-indent用来指定文本的首行缩进。
5. 行高：line-height
5. 字符间距：letter-spacing
5. 字间距：word-spacing
5. 垂直对齐：vertical-align
5. 文本阴影：text-shadow
5. 文本方向：direction
5. 空白格：white-space
normal 默认。多个空白格或者换行符会被合并成一个空白格<br />pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。<br />pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。<br />nowrap 一直不换行，直到使用br
13. **字体**
- 字体系列：font-family
（1）font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。<br />（2）注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
- 字体样式：font-style
如：normal标准字体；italic 斜体
- 字体大小：font-size
1em的默认大小是16px，通过下面这个公式将像素转换为em：px/16=em
- 字体粗细：font-weight
- 字体转变：font-variant
<a name="cmxST"></a>
# 链接
1. 链接样式
（1）a:link - 正常，未访问过的链接<br />（2）a:visited - 用户已访问过的链接<br />（3）a:hover - 当用户鼠标放在链接上时<br />（4）a:active - 链接被点击的那一刻<br />当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
<a name="6cNPE"></a>
# 列表样式
1. 列表项标记list-style-typecss
2. 列表项图片标记list-style-imagecss
ul
{
list-style-image: url(‘sqpurple.gif’);
}
3. 列表项标志位置list-style-position
4. 列表-简写属性
优先顺序：list-style-type >list-style-position >list-style-imagecss
ul
{
list-style: square url(“sqpurple.gif”);
}
5. **CSS3多列**
CSS3 可以将文本内容设计成像报纸一样的多列布局，有以下几个 CSS3 的多列属性:
- column-count 需要分割的列数
- column-gap 列与列间的间隙
- column-rule-style 列与列间的边框样式
- column-rule-width 列与列间的边框宽度
- column-rule-color 列与列间的边框颜色
- column-rule 是column-rule-* 所有属性的简写
- column-span 指定元素跨越多少列
- column-width 指定列的宽度
<br />
<a name="hPUZ4"></a>
# 表格
1. 表格边框border：1px solid black
2. 折叠边框（折叠成一个单一的边框）border-collapse
separate:边框分隔；collapse:边框合并<br />
<a name="ZDHvc"></a>
# 盒子模型
1. 盒子模型
<br />Margin(外边距) - 清除边框外的区域，外边距是透明的。<br />Border(边框) - 围绕在内边距和内容外的边框。<br />Padding(内边距) - 清除内容周围的区域，内边距是透明的。<br />Content(内容) - 盒子的内容，显示文本和图像。
2. 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距css
<!DOCTYPE html>
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。
3. **Margin & padding**margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。<br /><br />单外边距margin-top/bottom/left/right<a name="A8s4Z"></a># 边框1. 边框样式border-style（1）border-style:dotted solid double dashed; //上右底左<br />（2）border-style:dotted solid double; //上（左右）底<br />（3）border-style:dotted solid; //（上底）（右左）<br />（4）border-style:dotted; //四边2. 边框宽度border-width为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。3. 边框颜色border-color3. 各边样式border-top/bottom/left/right-style3. 简写属性：border：width style color<a name="l7CY2"></a># 选择器分组和嵌套1. 分组选择器每个选择器用逗号分隔。2. **嵌套选择器**p{ }: 为所有 p 元素指定一个样式。<br />.marked{ }: 为所有class="marked" 的元素指定一个样式。<br />.marked p{ }: 为所有class="marked" 元素内的 p 元素指定一个样式。<br />p.marked{ }: 为所有 class="marked"的 p 元素指定一个样式。<br />**<a name="D2VQN"></a># Display&Visibility1. display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。1. 使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了；使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”。3. display可以更改内联元素和块元素：内联元素：没有换行符<br />块元素：默认前后都有换行符<a name="5A2Hs"></a># 定位Position<br />1. Position有五个属性：static（默认）、fixed、relative、absolute、sticky1. fixed元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。```cssp.pos_fixed{position:fixed;top:30px;right:5px;}
- relative 定位
相对定位元素的定位是相对其正常位置，相对定位元素经常被用来作为绝对定位元素的容器块。
- absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
- sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
- 重叠的元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
注意：如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
- 子绝父相
Overflow
- 当我们设定的容器不足以放下一些内容时，会产生溢出。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
- overflow属性有以下值： | 值 | 描述 | | :—- | :—- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
<head>
<meta charset="utf-8">
<style>
#overflowTest {
background: #4CAF50;
color: black;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
</body>
Float
- CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
margin：auto；如
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px; //可没有
}
</style>
<div class="center">
<p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>
- 文本居中对齐
text-align: center;
- 图片居中对齐
要让图片居中对齐, 可以使用margin: auto; 并将它放到块元素中:
img {
display: block;
margin: auto;
width: 40%;
}
<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris">
- 垂直居中对齐
1）使用padding
.center {
padding: 70px 0;
border: 3px solid green;
}
2）使用**line-height**
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
3）使用 position 和 transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：
- 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
- 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。
**
组合选择符
- 后代选择器(以空格 分隔)用于选取某元素的后代元素。包含间接子元素 ```css
段落 1。 在 div 中。
段落 2。 在 div 中。
段落 3。不在 div 中。
段落 4。不在 div 中。
2. **子元素选择器(以大于号>分隔)**只能选择作为某元素**直接子元素**的元素。
```css
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
- 相邻兄弟选择器（以加号+分割）可选择紧接在另一元素后的元素，且二者有相同父元素。 ```css
文章标题
DIV 内部标题
DIV 内部段落。
DIV 之后的第一个 P 元素。
DIV 之后的第二个 P 元素。
4. **普通兄弟选择器（以破折号~分隔）**选取**所有**指定元素之后的相邻兄弟元素。
```css
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
伪类
- CSS伪类是用来添加一些选择器的特殊效果。
selector:pseudo-class {property:value;}
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后&& a:active必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。CSS :first-child 伪类
可以使用 :first-child 伪类来选择父元素的第一个子元素。
1) 匹配第一个
元素
p:first-child
{
color:blue;
}
2）匹配所有
元素中的第一个元素
p > i:first-child
{
color:blue;
}
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
3) 匹配所有作为第一个子元素的
元素中的所有 元素
p:first-child i
{
color:blue;
}
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
- p:first-line 选择每个
元素的第一行
“first-line” 伪元素只能用于块级元素。
- p:first-letter 选择每个
元素的第一个字母
- p:before 在每个
元素之前插入内容
p:after 在每个
下拉菜单&提示文本
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 ```css <!DOCTYPE html>
下拉菜单
鼠标移动到按钮上打开下拉菜单。
 2. 基础提示框 ```css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* 定位 */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div> </body> </html>
图像透明
Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }属性选择器
把包含标题（title）的所有元素变为蓝色： ```css
Will apply to:
Hello world
runoob.com2. 改变了标题title='runoob'元素的边框样式: ```css [title=runoob] { border:5px solid green; }- [attribute~=value]属性中包含独立的单词为 value，例如： ```css
Hello world
Hello CSS students!
4. [attribute|=value]属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：css将适用:
Hello!
Hi!
Ello!
5. 属性选择器样式无需使用class或id的形式:<br />css <a name="fBVqp"></a> # 边框 1. 在 CSS3 中 border-radius 属性被用于创建圆角：css div { border:2px solid; border-radius:25px; }如果你要在四个角上一一指定，可以使用以下规则： - **四个值:** 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 - **三个值:** 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 - **两个值:** 第一个值为左上角与右下角，第二个值为右上角与左下角 - **一个值：** 四个圆角值相同 还可以创建椭圆边角:css #rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; }椭圆边框 - border-radius: 50px/15px:
椭圆边框 - border-radius: 15px/50px:
椭圆边框 - border-radius: 50%:
 2. CSS3 中的 box-shadow 属性被用来添加阴影: ```css div { box-shadow: 10px 10px 5px #888888; }border-image 属性允许指定一个图片作为边框:
div { border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }转换&过渡
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div { transform: translate(50px,100px); /* 沿X从左移动50px，沿Y从顶部移动100px */ -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 标准语法 */skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(
);表示只在X轴(水平方向)倾斜。 - skewY(
);表示只在Y轴(垂直方向)倾斜。 div { transform: skew(30deg,20deg); /*元素在X轴和Y轴上倾斜20度30度。 */ -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
//利用matrix()方法旋转div元素30° div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
下表列出了所有的过渡属性://应用于宽度属性的过渡效果，时长为 2 秒： div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ }
属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 动画
- CSS3 @keyframes 规则
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。@keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { from {background: red;} to {background: yellow;} }当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } //当动画完成时，会变回初始的样式。- 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
//把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ }分页
```css <!DOCTYPE html>点击及鼠标悬停分页样式
移动鼠标的分页的数字上。
 <a name="isq1K"></a> # 弹性盒子 1. CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当**页面需要适应不同的屏幕大小****以及设备类型**时确保元素拥有恰当的行为的布局方式。<br />2. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 **display** 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。<br />3. 下表列出了在弹性盒子中常用到的属性: | 属性 | 描述 | 备注 | | :--- | :--- | :--- | | [display](https://www.runoob.com/cssref/pr-class-display.html) | 指定 HTML 元素盒子类型。 | | | [flex-direction](https://www.runoob.com/cssref/css3-pr-flex-direction.html) | 指定了弹性容器中子元素的排列方式 | row | row-reverse | column | column-reverse | | [justify-content](https://www.runoob.com/cssref/css3-pr-justify-content.html) | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 | flex-start 弹性项目向行头紧挨着填充。这个是默认值。 | | [align-items](https://www.runoob.com/cssref/css3-pr-align-items.html) | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 | | | [flex-wrap](https://www.runoob.com/cssref/css3-pr-flex-wrap.html) | 设置弹性盒子的子元素超出父容器时是否换行。 | nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 | | [align-content](https://www.runoob.com/cssref/css3-pr-align-content.html) | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 | stretch - 默认。各行将会伸展以占用剩余的空间。<br /> | | [flex-flow](https://www.runoob.com/cssref/css3-pr-flex-flow.html) | flex-direction 和 flex-wrap 的简写 | | | [order](https://www.runoob.com/cssref/css3-pr-order.html) | 设置弹性盒子的子元素排列顺序。 | 用整数值来定义排列顺序，数值小的排在前面。可以为负值 | | [align-self](https://www.runoob.com/cssref/css3-pr-align-self.html) | 在弹性子元素上使用。覆盖容器的 align-items 属性。 | | | [flex](https://www.runoob.com/cssref/css3-pr-flex.html) | 设置弹性盒子的子元素如何分配空间。 | |  <a name="pHAlN"></a> # 多媒体查询 1. `@media` 规则，针对不同媒体类型可以定制不同的样式规则。媒体查询可用于检测很多事情，例如： - viewport(视窗) 的宽度与高度 - 设备的宽度与高度 - 朝向 (智能手机横屏，竖屏) - 分辨率 2. **多媒体查询语法** 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。 ```css @media not|only mediatype and (expressions) { CSS 代码...; }除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
- not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
- only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
- all: 所有设备，这个应该经常看到。
- not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
若有收获，就点个赞吧
0 人点赞
