css
CSS
CSS ：层叠样式表 (Cascading Style Sheets)
HTML 标签被设计为用于定义文档内容，样式表定义如何显示 HTML 元素。样式通常保存在外部的 .css 文件中。只需要编辑CSS文档就可以改变所选元素的布局和外观。
CSS语法
CSS 语法规则由两个主要的部分构成：选择器，以及一条或多条声明，每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute），每个属性有一个值且属性和值被冒号分开。
选择器{
属性：值;
属性：值;
···}
属性选择器和派生选择器
派生选择器
外层标签 内层标签{
属性:值}
外层标签和内层标签之间用空格分开
属性选择器
在标签内部设置目标属性并进行选择
[title]{
属性:值} /*属性选择器*/
<p title='t'>属性选择器</p> [title=te]{
属性:值} /*属性和值选择器*/
<p title='te'>属性选择器</p>
id选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
#id {
属性：值;
属性：值;
···}
注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式，而且id是唯一的。
目前常用的方式是id选择器尝尝用于建立派生选择器
id选择器 目标标签{
属性:值}
类(class)选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用(class不是唯一的)。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
.class {
属性：值;
属性：值;
···}
注：类名的第一个字符不能使用数字，无法在 Mozilla 或 Firefox 中起作用。
类选择器和派生选择器结合使用
.class 目标选择器{
属性：值;}
CSS创建
插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，一般引入外部样式表。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
注：不要在属性值与单位之间留有空格
内部样式表
当单个文档需要特殊的样式时，可以使用内部样式表。可以通过
<head> <style> hr {
color:sienna;}
p {
margin-left:20px;}
body {
background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会丢失样式表的许多优势。不推荐使用这种方法。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color:red;
text-align:left;
font-size:8pt; }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align:right;
font-size:20pt; }
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
css 7 种基础选择器：
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href=“segmentfault.com”]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
CSS 优先规则：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了样式表本来的级联规则，从而使其难以调试。
经验法则：
- Always 要优化考虑使用样式规则的优先级来解决问题而不是
!important - Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important - Never 永远不要在全站范围的 css 上使用
!important - Never 永远不要在你的插件中使用
!important
css背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
body {
background-color:#b0c4de;}
背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {
background-image:url('paper.gif');}
若不需要重复显示，则加入声明：background-repeat:no-repeat;
若只需要沿水平方向平铺，则加入声明：background-repeat:repeat-x;
若只需要沿垂直方向平铺，则加入声明：background-repeat:repeat-y;
若需要改变图像的位置，则加入声明：background-position: right top;(右上显示)
背景- 简写属性
为了简化代码，可以将背景属性合并到"background"属性中.
body{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px; /*(非背景属性)*/
}
当使用简写属性时，属性值的顺序为：:3
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
css文本格式
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
注： 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
选择器 {
color:red;}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
选择器 {
text-align:center;}
### 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
选择器 {
text-decoration:overline;}
选择器 {
text-decoration:line-through;}
选择器 {
text-decoration:underline;}
选择器 {
text-decoration:none;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
选择器 {
text-transform:uppercase;}
选择器 {
text-transform:lowercase;}
选择器 {
text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
选择器 {
text-indent:50px;}
css文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
css字体属性
| 属性 | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
css链接
不同的链接可以有不同的样式，比如任何CSS属性（如颜色，字体，背景等）
四个链接状态：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
css列表
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
ul.类属性名 {
list-style-type: circle;}
ul.类属性名 {
list-style-type: square;}
/*无序列表*/
ol.类属性名 {
list-style-type: upper-roman;}
ol.类属性名 {
list-style-type: lower-alpha;}
/*有序列表*/
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
ul
{
list-style-image: url('sqpurple.gif');
}
列表简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
ul
{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
- list-style-type
- list-style-position
- list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
移除默认设置
list-style-type:none 属性可以用于移除小标记。默认情况下列表
- 或
- 还设置了内边距和外边距，可使用
margin:0和padding:0来移除:
- 还设置了内边距和外边距，可使用
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
CSS列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
css表格
使用 CSS 可以使 HTML 表格更美观。
表格边框
指定CSS表格边框，使用border属性。
table, th, td
{
border: 1px solid black;
} /*指定表格的Th元素和Td元素的黑色边框*/
上例表格有双边框，因为表和th/ td元素有独立的边界。
若需要显示表的单个边框，则使用 border-collapse属性。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}/*设置100％的宽度，50像素的th元素的高度的表格*/
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
td
{
text-align:right;
}
vertical-align属性设置垂直对齐方式，比如顶部，底部或中间：
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：
td
{
padding:15px;
}
表格颜色
指定边框的颜色，和th元素的文本和背景颜色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
css轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
CSS 轮廓（outline）属性
“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit | 2 |
| outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit | 2 |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit | 2 |
| outline-width | 设置轮廓的宽度 | thin medium thick length inherit | 2 |
CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距，边框，填充，和实际内容。
盒模型允许在其它元素和周围元素边框之间的空间放置元素。
盒子模型(Box Model)：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素的宽度和高度
当指定 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整的元素还必须添加内边距，边框和外边距。
div {
width: 300px;
height: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}/*内容宽度300px高度300px，边框25px实线绿色，内边距25px，外边距25px*/
元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
css边框
边框样式
边框宽度
可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，分别是 thick 、medium（默认值） 和 thin。
**注：**CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
选择器
{
border-style:solid;
border-width:5px;
}
选择器
{
border-style:solid;
border-width:medium;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。
注： border-color单独使用是不起作用的，必须先使用border-style来设置边框样式。
选择器
{
border-style:solid;
border-color:red;
}
选择器
{
border-style:solid;
border-color:#98bf21;
}
单独设置边框
选择器
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
也可以设置一个单一属性：
border-style:dotted solid;
border-style属性可以有1-4个值：
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
- border-style:dotted;
- 四面边框是 dotted
也可以和border-width 、 border-color一起使用。
简写属性
可以在一个属性中设置边框，即在"border"属性中设置：
- border-width
- border-style (required)
- border-color
border:5px solid red;
CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
css外边距
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
单边外边距属性
可以指定不同的侧面不同的边距：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
简写属性
为了简化代码，可以使用margin属性指定的所有边距属性。
margin:100px 50px;
margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
CSS边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
css填充
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
可以指定不同的侧面不同的填充：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
可以在padding属性中指定的所有填充属性：
padding:25px 50px;
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
css定位
position 属性指定了元素的定位类型。
position 属性的五个值：
元素可以使用顶部，底部，左侧和右侧属性定位。
static定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fix定位
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative
相对定位是相对其正常文档流对象位置的定位。
即使移动相对定位元素，但它原本所占的空间不会改变(空间不改变，内容位置改变)。
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位元素的位置是相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 定位
粘性定位是基于用户的滚动位置来定位。
粘性定位的元素依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
当页面滚动在目标区域内时，相当于 position:relative; 而当页面滚动超出目标区域时，相当于position:fixed;，会固定在目标位置。
元素定位表现为在跨越特定阈值之前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
选择器 {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重叠元素
元素的定位与文档流无关，可以覆盖页面上的其它元素
z-index属性指定了元素的堆叠顺序（哪个元素应该放在前面，或后面），元素可以有正数或负数的堆叠顺序。
选择器
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS定位属性
“CSS” 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit | 2 |
| clip | 剪辑一个绝对定位的元素 | shape auto inherit | 2 |
| cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit | 2 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit | 2 |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto hidden scroll visible no-display no-content | 2 |
| position | 指定元素的定位类型 | absolute fixed relative static inherit | 2 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit | 2 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit | 2 |
| z-index | 设置元素的堆叠顺序 | number auto inherit | 2 |
css浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。
如果把几个浮动的元素放到一起，且有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
选择器
{
clear:both;
}
CSS 浮动属性
“CSS” 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
选择器进阶
- 元素选择器
- 选择器分组
- 类选择器
- id选择器
- 属性选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
h1{
}、 a{
}...
*{ }通配符选择器默认表示选择所有元素
2、选择器分组即可以同时选择多个元素添加样式
h1、h2{
}...
3、类选择器是最常用的选择器，允许以一种独立与文档元素的方式来指定样式。类选择器还可以结合元素选择器使用。
.class{
} a.class{
}
4、多类选择器
若有元素继承了多个类的样式，又想单独给这个元素添加样式则可以使用多类选择器。
.class.class
<p class="p1"><p/>
<p class="p2"><p/>
<p class="p1 p2"><p/> /*同时继承p1和p2类的样式*/
.p1{
color:blue;}
.p2{
font-size:30px;}
.p1.p2{
font-style:italic;} /*只更改(p1 p2)类的样式*/
5、ID只能在文档中使用一次，而类可以多次使用。ID选择器不能结合使用。
#id{
}
6、属性选择器不仅可以选择属性，还可以选择具有特定属性值的元素。属性和属性值必须完全匹配。
[href] /*属性选择器 */ a[href="ch1762.top"] /*具有特定属性值的属性选择器 */
7、后代选择器可以选择 作为某元素后代的元素，可以隔代选择后代元素。
<p>this is
<strong>this is<i>this is son</i>father</strong>grandfather
</p>
p strong i{
} /*选择p标签中strong标签的后代i标签里的元素*/
p i{
} /*与上面效果相同*/
8、与后代选择器相比，子元素选择器只能选择作为某元素子元素里的元素，不能隔代选择后代元素。
p>strong>i /*不能隔代选择*/
9、相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者有相同父元素。
h1 + p{
} /*选择紧接在h1元素后出现的元素，且h1和p元素拥有共同的父元素*/
li + li{
} /*选择第一个li元素后的所有兄弟li元素，且li和li元素拥有共同的父元素*/
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {
} /*选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。 相当于body元素是table元素和ul元素的公共父元素*/
css对齐
元素居中对齐
要水平居中对齐一个元素(如
设置到元素的宽度将防止溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配。
注: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
左右对齐
可以使用 position: absolute; 属性来对齐元素:
注：绝对定位元素会被从正常流中删除，并且能够交叠元素。
当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
也可以使用 float 属性来对齐元素，并对 元素的外边距和内边距进行预定义可以避免在不同的浏览器中出现可见的差异。
注：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以使用 “clearfix(清除浮动)” 来解决该问题。可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题。
当使用position或 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明。
垂直居中对齐
头部顶部使用 padding可以实现垂直居中对齐，如果要水平和垂直都居中，可以使用 padding 和 text-align: center，使用 line-height属性可以设置垂直居中。
设置容器相同的上下 padding 实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：
- 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
- 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。
除了使用 padding 和 line-height 属性外，还可以使用 transform 属性来设置垂直居中。
css伪类
CSS伪类是用来添加一些选择器的特殊效果，伪类可以看作以选中元素为基准点，此元素的一些状态或属性。**注：**在IE8的之前版本必须声明!，这样伪类才能生效。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
伪类可以与 CSS 类配合使用：
a.red:visited {
color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
/*如果在上面的例子的链接已被访问，它会显示为红色。*/
可以使用 :first-child 伪类来选择父元素的第一个子元素。
p:first-child i
{
color:blue;
}/*选择器匹配所有<p>元素中第一个<p>元素里的所有<i>元素*/
p > i:first-child
{
color:blue;
}/*选择器匹配不同<p>元素里的第一个 <i> 元素*/
p:first-child
{
color:blue;
}/*选择器匹配<p>元素的第一个<p>元素*/
:lang 伪类可以为不同的语言定义特殊的规则
q:lang(no) {
quotes: "~" "~";}
/*:lang 类为属性值为 no 的q元素定义引号的类型*/
CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not§ | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个 元素的第一个字母 |
| :first-line | p:first-line | 选择每个 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 |
| :before | p:before | 在每个 元素之前插入内容 |
| :after | p:after | 在每个 元素之后插入内容 |
| :lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
css导航栏
导航栏==链接列表
导航条基本上是一个链接列表，所以使用
- 和
- 元素非常有意义。
导航栏常用设置：
-
list-style-type:none 可以移除列表前小标志。导航栏并不需要列表标记
-
移除浏览器的默认设置将边距和填充设置为0
-
可以在
- or 上添加text-align:center 样式使链接居中。
-
可以在 border
- 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个
- 元素上添加border-bottom 。
-
通过 border-right 样式给
- 添加分割线:
使用**内联(inline)或浮动(float)**的列表项可以创建横向导航栏。但如果想链接具有相同的大小，你必须使用浮动的方法。可以设置页面的导航条固定在头部或者底部：
css媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
@media 规则允许在相同样式表为不同媒体设置不同的样式。
媒体类型
**注意：**媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
css 2D 3D转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。可以使用 2D 或 3D 转换来转换元素。
2D转换属性
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
以下列出了所有的转换属性:
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许更改转化元素位置 | 3 |
2D 转换方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
3D转换属性
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
<div></div>
下表列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
3D 转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
css过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
如果未指定持续时间，transition将没有任何效果，因为默认值是0。
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
<div></div>
过渡属性
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
css动画
CSS3 可以创建动画，可以取代许多网页动画图像、Flas***和 JavaScript 实现的效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
要创建 CSS3 动画，需要了解 @keyframes 规则。
-
@keyframes 规则是创建动画。
-
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画时，需要将其绑定一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
注意: 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {
background:red; left:0px; top:0px;}
25% {
background:yellow; left:200px; top:0px;}
50% {
background:blue; left:200px; top:200px;}
75% {
background:green; left:0px; top:200px;}
100% {
background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {
background:red; left:0px; top:0px;}
25% {
background:yellow; left:200px; top:0px;}
50% {
background:blue; left:200px; top:200px;}
75% {
background:green; left:0px; top:200px;}
100% {
background:red; left:0px; top:0px;}
}
<div></div>
CSS3的动画属性
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 |
css多列
CSS3 可以将文本内容设计成像报纸一样的多列布局。column-rule 属性是 column-rule-* 所有属性的简写。
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
CSS3 多列属性
| 属性 | 描述 |
|---|---|
| column-count | 指定元素应该被分割的列数。 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns | column-width 与 column-count 的简写属性。 |
CSS3 用户界面
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
css3框
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
不使用 CSS3 box-sizing 属性
默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
这就意味着在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。此时如果想要获得较小的框且包含内边距，就不得不考虑边框和内边距的宽度。
CSS3 的 box-sizing 属性很好的解决了这个问题。
使用 CSS3 box-sizing 属性
CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
当然也可以修改排列方式。如果设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变。
flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction语法如下：
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
-
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
-
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
-
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
-
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
-
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items语法如下：
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
flex-wrap语法如下：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
- nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content语法如下：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch- 默认。各行将会伸展以占用剩余的空间。flex-start- 各行向弹性盒容器的起始位置堆叠。flex-end- 各行向弹性盒容器的结束位置堆叠。center-各行向弹性盒容器的中间位置堆叠。space-between-各行在弹性盒容器中平均分布。space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
弹性子元素属性
order属性
order 属性设置弹性容器内弹性子元素的属性。
弹性子元素排序 ：：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
弹性子元素对齐设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
align-self属性
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
align-self语法如下：
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
- auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex属性
flex 属性用于指定弹性子元素如何分配空间。
flex语法如下：
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
- auto: 计算值为 1 1 auto
- initial: 计算值为 0 1 auto
- none：计算值为 0 0 auto
- inherit：从父元素继承
- [ flex-grow ]：定义弹性盒子元素的扩展比率。
- [ flex-shrink ]：定义弹性盒子元素的收缩比率。
- [ flex-basis ]：定义弹性盒子元素的默认基准值。
CSS3 弹性盒子属性
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
查看26道真题和解析
投递阿里国际数字商业集团等公司10个岗位 >