white-space:nowrap 文字强制一行内显示

---

HTML标签

Html 参考：https://www.w3school.com.cn/index.html

1.普通标签

<h1> - <h6>   独占一行
<p>   段落标签
<br/>   换行标签   （break的意思）    单标签
<div>     盒子标签，用来布局网页    独占一行
<span>    盒子标签，用来布局网页    行内元素
<a>     超链接标签
<table>/<tr>/<td>/<th>(居中加粗)/<thead>/<tbody>/<tfoot>     表格标签
<label>     label标签
<select>   <option>     下拉菜单标签
<textarea>       文本域标签    （属性：cols 每行字数   rows  行数）

1.文本格式化标签

2.图像标签

3.特殊(转义)字符

4.表格标签

<table>/<tr>/<td>/<th>(居中加粗)/<thead>/<tbody>/<tfoot>

5.列表标签

无序列表：<ul> <li>

/*去掉li的小圆点*/
li {list-style: none
}

有序列表：<ol> <li>

自定义列表：<dl> <dt><dd>

列表总结：

6.表单标签

1.<form>标签

2.<input>标签

3.<select>标签

4.<textarea>标签

字体文本

1.字体复合属性

通常我们对字体进行修饰时，使用的是如下方式：

body {font-style: normal;       /**该属性设置使用斜体、倾斜或正常字体*/font-weight: 700;font-size: 18px;line-height: 40px;font-family: "Microsoft Yahei";
}

字体复合属性可以把以上文字样式综合来写，这样可以更节约代码：

body {font: font-style font-weight font-size/line-height font-family;
}

• 使用 font 属性时，必须按照上面语法格式中的顺序来书写，不能更换顺序，并且各个属性间以空格隔开；
• 不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family属性，否则 font 属性将不起作用。

2.对齐方式

设置元素内文本内容的水平对齐方式
text-align ： center、left、right；

3.装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下滑吸纳、删除线、上划线等。

div {text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接 a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.文本首行缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {text-indent: 2em;
}

em 是一个相对 单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小 ，则会按照父元素的1个文字大小。

5.行间距

line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

p {line-height: 26px;
}

CSS复合选择器

1.后代选择器（重要）

  后代选择器又称为包含选择器，可以选择父元素里面的所有子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2(后代元素)

例如：

/* 选择 ul 里面所有的 li 标签元素*/
ul li { 样式声明
}

• 元素1 和 元素2 中间用空格隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 可以是儿子，也可以是孙子等，只要是元素 1 的后代即可
• 元素1 和 元素2 可以使任意基础选择器(标签选择器、类选择器、id选择器等等等)

2.子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代（子元素）元素2

例如：

/* 选择 div 里面所有最近一级 p 标签元素*/
div > p {样式声明
}

• 元素1 和 元素2 中间用大于号隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 必须是亲儿子，其孙子、重孙自雷的都不贵他管。你也可以叫它为亲儿子选择器

3.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是各种选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式 声明 }

上述语法表示选择了元素1 和 元素2

例如：

/* 选择 ul 和 div 标签元素*/
ul,
div {样式声明
}

• 元素1 和 元素2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明
• 并集选择器通常一个选择器独占一行

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover、:first-child。

4.1 链接伪类选择器(重点)

/*选择所有未被访问的链接*/
a:link
/*选择所有已被访问的链接*/
a:visiter
/*选择鼠标指针位于其上的链接*/
a:hover
/*选择活动链接（鼠标按下未弹起的链接）*/
a:active

链接伪类选择器注意事项：

1. 为了确保生效，请按照LVHA的顺序声明:link、:visited、:hover、:active。否则会有可能不生效。
2. 记忆法：LV 包包 HAO
3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

4.2 :focus伪类选择器

:focus伪类选择器，用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input:focus {background-color: red;
}

CSS元素显示模式

1.块元素

   h1 ~ h6、p、div、ul、ol、li 等，都是块元素，其中<div>标签是最典型的块元素。

块元素的特点：

1. 比较霸道，子级独占一行；
2. 高度、宽度、外边距、内边距，都可以控制；
3. 宽度默认是容器（父级宽度）的100%；
4. 是一个容器及盒子，里面可以放行内元素或者块元素

注意：

• 文字类的元素内，不能使用块级元素；
• <p> 标签主要用于存放文字，因此<p> 里面不能放块元素，特别是不能放<div>；
• 同理，h1~ h6 等都是文字类块级标签，里面也不能放其他块级元素

2.行内元素

  常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span 等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素特点：

1. 相邻行内元素在一行上，一行可以显示多个；
2. 高、宽直接设置是无效的；
3. 默认宽度就是它本身内容的宽度；
4. 行内元素只能容纳文本或其他行内元素。

注意：

• 链接里面不能再放链接；
• 特殊情况链接<a> 里面可以放块级元素，但是给 <a>转换一下块级模式最安全。

3.行内块元素

  在行内元素中有几个特殊的标签——<img>、<input>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素：

1. 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）；
2. 默认宽度就是它本身内容的宽度（行内元素特点）；xd
3. 宽度、高度、行高、外边距、内边距都可以控制（块级元素特点）

(常用)4.元素显示模式转换

特殊情况下，我们需要元素模式的转换。即：一个模式的元素需要另外一种模式的特性。比如想要增加链接<a>的触发范围。

1. 转换为块元素： display:block;
2. 转换为行内元素： display:inline;
3. 转换为行内块元素： display:inline-block;

CSS背景图片设置相关

1.背景颜色

 background-color

2.背景图片

 background-image

3.背景图片平铺

4.背景图片位置

利用background-position属性，可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标 和 y 坐标。可以使用方位名词 或者 精确单位

参数值	说明
length	百分数。由浮点数字和单位标识符组成的长度值
position	top、center、bottom、left、right 方位名词

可通过三种情况设置：

• 参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如：left top 和 top left 效果一直；
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
• 参数是精确单位
  • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一共是 y 坐标；（background-position:20px 50px）
  • 如果只指定一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中。
• 参数是混合单位
  • 如果指定的两个值是精确单位和方位名词，则第一个值是 x 坐标，第二个值是 y 坐标 （background-position:20px center）

5.背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定，或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

background-attachment: scroll | fixed

参数值	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

6.背景的复合写法

对背景进行设置样式 css 代码：

div {background-image: url(...);background-repate: no-repate;background-position: top center;
}

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，并没有特定的书写顺序。实际开发中，一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

7.背景半透明

CSS3 为我们提供了背景颜色半透明的效果；

div {/*设置背景颜色透明度0.3(四个数字分别代表 r(红色)/g(绿色)/b(蓝色)/a(透明度) 对应的数值)*/background: rgba(0, 0, 0, 0.3);
}

• 最后一个参数是 alpha 透明度，取值范围在 0 ~ 1 之间；
• 我们习惯把 0.3 的 0 省略掉，写成 background:rgba(0,0,0,.3)；
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；
• CSS3 新增属性，是IE9 + 版本浏览器才支持的；
• 现在实际开发，我们不太关注兼容性写法，可以放心使用。

8.背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色 / 十六进制 / RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x /repeat-y
background-position	背景位置	length / position 分别是 x 和 y 坐标
background-attachment	背景附着	scroll（背景滚动）/ fixed（背景固定）
background-size	按比例缩放	background-size:100% 100%;
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是 4 个值

背景图片的设置，在实际开发中用的最多。常见于logo或者一些修饰性的小图片，或者超大的背景图片。

优点： 便于控制图片的位置（CSS精灵图就是一种运用场景）

CSS三大特性

CSS 三大特性：层叠性、继承性、优先级

1. 层叠性

<head><style>div {border: 1px solid red;}div {border:10px dashed blue;}</style>
</head>
<body><div>内容部分</div>
</body>

该div边框最终为 10px 。即：哪个样式离得使用代码近，就使用哪个样式。

2.继承性

1.基础继承

2.行高的继承性

body {font: 12px/1.5 "Microsoft YaHei";
}

• 行高可以跟单位，也可以不跟单位；
• 如果子元素没有设置行高，则会继承父元素的行高的 1.5
• 此时子元素的行高是：当前子元素的文字大小 * 1.5；
• body行高 1.5 ，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

3.优先级

选择器权重，如下表所示:

选择器	权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	∞ 无穷大

注意点：

1. 权重是有 4 组数字组成，但是不会有进位；
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推…
3. 等级判断从左到右，如果某一位数值相同，则判断下一位数值；
4. 可以简单记忆法：通配符和继承权重为0，标签选择器为 1，类（伪类）选择器为 10，id选择器为 100，行内样式选择器为 1000，!important 无穷大；
5. 继承的权重是0，如果钙元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

3.1 示例：

1.<p>显示的是什么颜色？（答案：蓝色。这里就是你加 !important 也是无效的原因）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*父类的权重，无限大*/#father {color: red !important;}/*p标签继承父类的 color 属性，过来权重就是 0*//*所以以后我们看这个标签最终执行哪个样式，就直接看这个标签有没有被单独重定义*/p {color: blue;}</style>
</head>
<body>
<div id="father"><!--此处<p>标签显示为蓝色，因为<p>标签继承了父类#father的color属性,权重为0.<p>标签又自定了一个蓝色样式，优先级为1，所以显示粉色。此处就算你用了 !important，照样是不起作用的--><p>这里是APP页面</p>
</div>
</body>
</html>

2.<a>标签为什么永远是蓝色带下划线的？

  <a>标签链接，如果你不在当前类对其进行重新定义css 样式，他就永远是带下划线的蓝色。因为这个蓝色下划线样式，是浏览器默认为其制定的一个样式。这里就和优先级有关系

3.2 权重叠加

复合选择器会有权重叠加的问题（如下示例，li 中元素显示为 绿色）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul li 的权重是0,0,0,1 + 0,0,0,1 =0,0,0,2(不会进位)*/ul li {color: green;}/*li的权重是 0,0,0,1*/li {color: red;}</style>
</head>
<body>
<div><ul><li>AAA</li><li>CCC</li><li>BBB</li></ul>
</div>
</body>
</html>

盒子模型

1.盒子模型组成

  所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、content 实际内容。

2.边框(border)

 边框会影响盒子的实际大小!!!

常用的：solid 实线边框    dashed 虚线边框    dotted 点状边框

边框符合写法：border:1px solid red;

3.合并表格相邻边框(border-collapse)

border-collapse:collapse;

4.内边距（padding）

当我们给盒子指定padding 值之后，发生了来那个件事情：

1. 内容和边框有了距离，添加了内边距；
2. padding 影响了盒子实际大小！！！

也就是说：

1. 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。如果需要保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可；
2. 如果盒子本身没有指定 width/ height 属性，则此时 padding 不会撑开盒子大小。 (就算是width:100%，照样会撑大盒子的)

5.外边距（margin）

外边距可以让块级盒子水平居中，但必须满足两个条件：

1. 盒子必须指定了宽度（width）；
2. 盒子左右外边距都设置为 auto；

.header{width: 960px;margin: 0 auto;
}

注意： 行内元素、行内块元素 要想水平居中，需要给其父元素添加text-align:center;即可。

(重要)6.外边距合并问题（嵌套块元素，父元素塌陷较大值问题）

  使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并问题。即：嵌套块元素垂直外边距的塌陷问题。

  对于两个嵌套关系（父子关系）的块元素，父元素有上外边框，同时子元素也有上外边框，此时父元素会塌陷较大的外边距值。

解决方案：

1. 可以为父元素定义上边框；(如果有边框难看，可以定义 border:1px solid transparent;透明色)
2. 可以为父元素定义上内边框；
3. 可以为父元素添加 overflow:hidden。

还有其他方法，比如浮动的盒子、固定，绝对定位的盒子，都不会有塌陷问题。

7.清除内外边框

  网页元素，很多都带有默认的内外边距，而且不同浏览器默认的也不一样。因此我们在布局前，首先要先清除一下网页元素的内外边距。

* {padding: 0; /* 清除内边距 */margin: 0;  /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。因为设置也不起作用。但是转换为块级和行内块元素就可以了。

8.圆角边框(重点)

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius属性，用于设置元素的外边框圆角。

语法：

border-radius: 5px;

参数值说明：

• 参数值可以为数值或百分比的形式；
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%；
• 如果是矩形，设置为高度的一半就可以做成左右椭圆形；
• 该属性是一个简写属性，可以跟四个值，分别是左上角，右上角，右下角，左下角；
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 四种

radius 半径（圆的半径）原理：(椭)圆与边框的交际形成圆角效果

/*支持四个参数，分别是左上角，右上角，右下角，左下角 顺时针*/
border-radius: 10px 20px 30px 40px;

9.盒子阴影（重点）

CSS3 中新增了盒子阴影，我们可以使用 box-shadow属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

参数说明:

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。请参阅CSS颜色值（通常使用 rgba（0,0,0,.3） 这种方式）
inset	可选。将外部阴影(outset)改为内部阴影

注意：

1. 默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效；
2. 盒子阴影不占用空间，不会影响其他盒子排列。

10.文字阴影(开发中使用不多)

在CSS3 中，我们可以使用 text-shadow属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

参数说明:

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离
color	可选。阴影的颜色。请参阅CSS颜色值

浮动：

0.什么是浮动

  float 属性用于创建浮动框。将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

1.为什么需要浮动？

  总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。(标准流即：块元素占一行，行内元素一行可有多个)

  浮动最典型的应用：可以让多个块级元素一行内排列显示。

  网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.浮动特性

1. 浮动元素会脱离标准流；(没有了块元素占一行，行内元素一行可有多个的规定，并且不保留原先盒子的位置)
2. 浮动的元素会一行内显示，并且元素顶部对齐；
3. 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有 行内块元素 相似的特性。
   • 如果块级盒子没有设置宽度，默认宽度和父级一样宽；但是添加浮动后，它的大小根据内容来决定；
   • 浮动的盒子中间是没有缝隙的，是紧挨着一起的；
   • 行内元素同理
   • 重点：如果行内元素有了浮动，则不需要转换块级元素、行内块元素，就可以直接给高度和宽度！！！！

3.清除浮动(重点)

3.1 为什么需要清除浮动？

  由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0 时，就会影响下面的标准流盒子，如下图所示：

3.2 清除浮动的本质

• 清除浮动的本质，是清除浮动元素造成的影响；
• 如果父盒子本身有高度，则不需要清除浮动；
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

3.3 清除浮动语法

语法:

选择器 {clear: 属性值
}

参数说明:

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

我们在实际工作中，几乎只用 clear:both;

关闭浮动的策略是：闭合浮动。

3.4 清除浮动方法

1.额外标签法

  额外标签法，也成为 隔墙法，是W3C推荐的做法。实际开发不推荐使用

   额外标签法，也会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>，或者其他标签(如<br/> 等)

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构比较差
• 注意：要求这个新的空标签，必须是块级元素

2.父级添加 overflow 属性

  可以给父级添加 overflow属性，将其属性值设置为 hidden、auto 或 scroll。

• 优点：代码简洁
• 缺点：无法显示溢出的部分
  

3.父级添加 :after 伪元素(推荐)

:after 方式是额外标签法的升级版。也是给父元素添加。

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix { /* IE6、7专有*/*zoom: 1;
}

• 优点：没有增加标签，结构更简单（只需要在父类添加 class=“clearfix” 即可）
• 缺点：照顾低版本浏览器
• 代表网站：百度、淘宝网、网易等；—大厂都在用

4.父级添加 双伪元素(强烈推荐)

  也是给父元素添加 class 样式

.clearfix:before,.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

• 优点：代码更简洁（只需要在父类添加 class=“clearfix” 即可）
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯等

CSS属性书写顺序(优化)

建议尊徐一下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow （建议 display 第一个写，毕竟关系到模式）
2. 自身属性： width / height / margin /padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4. 其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

定位(最重要一个属性)

为什么需要定位

  有些效果，比如当我们滚动窗口时，盒子需要固定在屏幕的某个位置。这种效果：标准流或浮动都无法快速实现，此时就需要定位来实现。

所以：

1. 浮动可以让多个会级盒子一行没有缝隙排列显示，经常用于横向排列盒子；
2. 定位则是可以让盒子 自由的在某个盒子内移动位置 或者 固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

1. 定位模式 用于指定一个元素在文档中的定位方式。
2. 边偏移则决定了该元素的最终位置

1.定位模式

定位模式决定元素的定位方式，它是通过 CSS 的position属性来设置，其值可以分为五个：

属性值	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

2.边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right 4个属性。

属性值	示例	描述
top	top:80px	顶部偏移量。定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量。定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量。定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量。定义元素相对于其父元素右边线的距离

四种定位模式介绍（重点后三个）

1.静态定位(了解，很少用到)

静态定位是元素的默认定位方式，即：无定位的意思。

语法：

 选择器 { position: static;}

• 静态定位按照标准流特性摆放位置，它没有边偏移；
• 静态定位在布局时很少用到。

2.相对定位 relative(重要)

相对定位是元素在移动位置的时候，相对于它原来的位置来说的。

语法：

选择器 { position: relative;}

相对定位的特点：

1. 它是相对自己原来的位置来移动的(移动位置的时候参照点事自己原来的位置)；
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它(不脱标，继续保留原来位置)
   因此，相对定位并没有脱离标准流，它最典型的应用就是给绝对定位当爹的

3.绝对定位 absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)

绝对定位的盒子，不能通过 margin:0 auto;水平居中显示。

绝对定位居中显示实现方式(算法)： {position:absolute;left:50%;margin-left:-(盒子一半宽)}

语法：

选择器 { position:absolute;}

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原先的位置（托标： 脱离标准流）

4.固定定位 fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 { position:fixed;}

固定定位的特点：

1. 以浏览器的可视窗口为参照点移动位置；(和父元素没有任何关系，不随滚动条滚动)
2. 固定定位不再占有原先的位置。

5.粘性定位 sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 { position: sticky;top: 10px;}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）；
2. 粘性定位占有原先的位置（相对定位特点）；
3. 必须添加 top、left、right、bottom 其中一个才有效。

跟页面滚动搭配使用，兼容性较差，IE 不支持。

口诀：子绝父相

“子绝父相”，是学习定位的口诀，是定位中最常用的一种方式。这句话的意思是：子级是绝对定位的话，父级要用相对定位。

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子；
2. 父盒子需要加定位限制子盒子在父盒子内显示；
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

优先级 z-index(定位叠放次序)

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后叠放次序(z轴)。

语法：

选择器 { z-index: 1;}

说明：

• 数值可以使正整数、负整数、0，默认是 auto，数值越大，盒子越靠上；
• 如果属性值相同，则按照书写顺序，后来居上；
• 数字后面不能加单位；
• 注意：只有定位的盒子，才有z-index属性

定位的拓展

1.定位的特殊特性

绝对定位 和 固定定位也和浮动类似；

1. 行内元素添加绝对或者固定定位，可以直接设置 高度和宽度;
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

2.外边距塌陷问题

浮动元素、绝对定位(固定定位)元素，都不会触发外边距合并的问题。

3.绝对定位(固定定位)，会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位(固定定位)会压住下面标准流所有的内容。

浮动之所以不会压住文字，是因为浮动产生的目的：最初是为了做文字环绕效果的。文字会围绕浮动元素。

元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1. display 显示隐藏
2. visibility 显示隐藏
3. overflow 溢出显示隐藏

1.display 属性

display 属性用于设置一个元素应该如何显示。

• display: none; 隐藏对象
• display: block; 除了转换为块级元素之外，同时还有显示元素的意思

重点：display 隐藏元素后，不再占有原来的位置！！！

2.visibility 可见性

visibility 属性用于指定一个元素应该可见还是隐藏。

• visibility: visible; 元素可见
• visibility: hidden; 元素隐藏

重点：visibility隐藏元素后，继续占有原来的位置！！！

如果隐藏元素想要原来位置，就用 visibility: hidden;
如果隐藏元素不想要原来位置，就用 display: none; （用处更多）

3.overflow 溢出

overflow 属性，指定了如果内容溢出一个元素的框(超过其指定高度、宽度)时，会发生什么？

属性值	描述
visible	不剪切内容，也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出与否，都显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用 overflow:hidden，因为它会隐藏多余的部分。

---

CSS 高级部分

精灵图(sprites)

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图。
3. 移动背景图片，此时可以使用background-position属性。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同。
5. 因为一般情况下都是往上往左移动，所以数值都是负值。
6. 使用精灵图的时候，需要精确测量，每个小背景图片的大小和位置。

字体图标

字体图标的优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
• 兼容性：几乎支持所有的浏览器，请放心使用

注意： 字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标；
2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为问题：

1. 字体图标的下载
2. 字体图标的引入（引入到我们的 html 页面中）
3. 字体图标的追加（以后添加新的小图标）

1.字体图标的下载

推荐下载网站：

1. icommoon字库 http://icommoon.io 推荐指数 ☆☆☆☆☆

  icoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢

1. `阿里 iconfont 字库 http://www.iconfont.cn 推荐指数 ☆☆☆☆☆
      这个是 阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。重点是：免费。

2.字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用

1.把下载包里面的 fonts 文件夹放入页面根目录下

fonts文件夹提供有多个字体文件格式，为了浏览器的兼容性问题啦。

2.字体文件格式

3.字体图标的引入

在 CSS 样式中，全局声明字体：简单理解把这些字体文件通过 CSS 的方式引入到页面中。

一定要注意字体路径问题：

或者在 style.css 中找到这行代码

然后，进入下载的字体 demo.html 查看。

注意：图片中 / 是错误的，应该是朝右的斜杠 \ ,如：“content:\e909”!!!

4.字体的使用

<head><style>span {/*切记：使用字体*/font-family: 'icomoon';font-size: 100px;}</style>
</head>
<body><span></span><span></span>
</body>

3.字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。

CSS 三角生成

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图，你就知道 CSS 三角是怎么来的了，做法如下：

/*四个三角形*/
.box {width: 0;height: 0;border-top: 10px solid red;border-right: 10px solid blue;border-bottom: 10px solid green;border-left: 10px solid purple;
}
/*朝下的三角形(其他边设置成透明色即可)*/
.box {width: 0;height: 0;border:10px solid transparent;border-top-color: red;
}

鼠标样式

li {cursor: pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

以下几个是常用的，还有很多呢：

属性值	描述
default	小白箭头，默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线

给表单添加 outline:0; 或者 outline:none;样式后，就可以去掉默认的蓝色边框。

input {outline: none;
}

文本域防拖拽 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea {resize: none;
}

(重点)元素垂直对齐方式 vertical-align

vertical-align 实现 图片 和 文字 的垂直居中。

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于 行内元素 和 行内块元素 有效。

语法：

vertical-align: baseline | top | middle | bottom

属性值	描述
baseline	默认。元素放在在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与最低的元素的顶端对齐
…	… 还有很多属性呢

1.图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align: middle，就可以让文字和图片垂直居中对齐了。

2.vertical-align 属性来解决图片地步默认空白缝隙问题

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1. 给图片添加 vertical-align: middle | top | bottom等。(提倡使用)
2. 把图片转换为块级元素 display：block；
   

溢出文字省略号显示

1.单行文本

/*1.先强制一行内显示文本*/
white-space: nowrap; /*(默认 normal 自动换行)*/
/*2.超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2.多行文本

多行文本溢出显示省略号，有较大的兼容问题，适合于 webkit 浏览器或移动端（移动端大部分是 webkit 内核）

overflow: hidden;
text-overflow: ellipsis;
/*以下代码有兼容性问题，了解即可*/
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

CSS 初始化公共代码

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 进行初始化操作。

简单理解： CSS 初始化实质重设浏览器的样式(也称为 CSS reset)

如下，以京东 CSS 初始化代码为例。

/*把所有标签的内外边距清零*/
* {margin: 0;padding: 0;/*CSS3 盒子模型*/boxing-sizing: border-box;
}/*em 和 i 斜体的文字不倾斜*/
em,i {font-style: normal
}/*去掉li的小圆点*/
li {list-style: none
}/**/
img {/*为了照顾低版本浏览器，如果图片外面包含了连接会有边框的问题*/border: 0;/*取消图片底层有空白缝隙的问题(让文档居中对齐)*/vertical-align: middle
}/*鼠标经过button 按钮的时候，鼠标变成销售*/
button {cursor: pointer
}a {color: #666;/*取消a链接下划线*/text-decoration: none
}/*a:hover经过时的颜色颜色*/
a:hover {color: #c81623
}/*指定button、input字体*/
button,input {/*"\5B8B\4F53"就是宋体的意思，这样写兼容性好。将汉字转换成浏览器认识的Unicode码，可以有效避免浏览器解释CSS代码时候出现的乱码问题*/font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}body {/*CSS3 抗锯齿形，让文字放大时显示的更加清晰*/-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color: #666
}/*JD 自定义的样式，掩藏*/
.hide,.none {display: none
}/*伪元素方式清除浮动方式*/
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

---

HTML5 新特性(有兼容性，得IE9+)

1.新增语义化标签

以前布局，我们基本用 div 来做，div 对于搜索引擎来说，是没有语义的。

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

HTML 5 新增了语义化标签，如下所示：

注意：

• 这些语义标准主要是针对搜索引擎的；
• 这些新标签可以在页面中多次使用；
• 在IE9中，需要把这些元素转换为 块级元素；
• 其实，移动端还是更喜欢使用这些标签；
• HTML 5 还增加了很多其他标签，可以自行了解。

2.新增多媒体标签

新增的多媒体标签，主要包括两个：

1. 音频：<audio>
2. 视频：<video>

使用这些标签，可以很方便的再页面中嵌入音频 和 视频，而不再需要去使用 Flash 和其他浏览器插件。

参考：

1. https://www.runoob.com/html/html5-audio.html
2. https://www.runoob.com/html/html5-video.html

3.新增的 input 类型

参考：

1. https://www.runoob.com/html/html5-form-input-types.html

4.新增的表单属性

参考：

1. https://www.runoob.com/html/html5-form-attributes.html

我们可以通过以下设置方式来修改 placeholder 里面的字体颜色：

input::placeholder {color: red;
}

---

CSS3 新特性

• 新增的 CSS3特性有兼容性问题，IE9+才支持；
• 移动端支持优于PC端；
• 不断改进中；
• 应用相对广泛；
• 现阶段主要学习：新增选择器、盒子模型以及其他特性。

1.CSS3 新增的选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

1.1 属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者 id 选择器了。

注意： 类选择器、属性选择器、伪类选择器，权重都是 10。

参考：https://www.runoob.com/cssref/css-selectors.html

1.2 结构伪类选择器

结构伪类选择器，主要根据文档结构来选择元素，常用语根据父级选择器来选择里面的子元素。

支持传入公式

nth-child() 还支持传入公式，如下所示：

1. nth-child(even)：选出所有的偶数行；
2. nth-child(odd)：选出所有的奇数行；
3. nth-child(n)：n从0开始，每次+1，往后面计算，这里必须是n，不能是其他字母。这代表选出所有的孩子；
4. nth-child(-n+5)：说明选出前5个孩子
5. nth-child(2n)：选出所有的偶数行

od div 下：非第一个孩子：如何选择
od div:not(:first-child)

nth-child() 和 nth-of-type() 的区别

总结：

(重点)1.3 伪元素选择器(这是个重点！！！)

before 和 after 伪元素，都是行内元素，是不能对其设置大小

伪元素使用场景

2.CSS3 新盒子模型

选择器{/*不会撑大盒子,之前使用padding等会撑大盒子，需要重新计算，这个就不会了*/box-sizing:border-box;
}

3.CSS3其他特性

3.1 calc 函数：

选择器 {/*可以使用 +*-/ 来计算*/width: calc(100%-80px);
}

附参考：

1. CSS 参考手册
2. CSS3 教程

3.2 CSS3滤镜filter（了解）

用法可参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter，更多实例也去网站里面查看吧，很详细的

3.3 CSS3特殊样式修改

(重点)4.CSS3 过渡(transition)

5.1 过渡基本使用

（过渡属性给谁加：哪个元素做过渡效果，就给谁加过渡属性。）

 比如说，鼠标放到 div 上，div 长度变长，就需要给 div 加过渡效果。

5.2 继续使用transition过渡

多个属性过渡，采取如下方式：

div {width: 200px;height:200px;background-color: pink;/*写多个属性，使用逗号分隔*/transition: width .5s,height .5s
}
/*鼠标放到div上,width编程400px,height变成400px*/
div:hover{width: 400px;height: 400px;
}

如果想要所有的属性都变化过渡，写一个all 就可以，如下：

div {width: 200px;height:200px;background-color: pink;/*所有的属性都过渡，写一个all就可以*/transition: all .5s
}
div:hover{width: 400px;height: 400px;background-color: skyblue;
}

参考：https://www.runoob.com/css3/css3-transitions.html

5.2D 转换(transform)

转换 transform 是CSS3中具有颠覆性的特征之一，可以实现元素的移动、旋转、缩放等效果。

转换 transform 你可以简单理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

5.1 移动 translate

• 不会影响其他元素的位置
• 对行内标签没有效果
• 结合position定位 + translate 来实现垂直水平居中效果

使用 translate 解决子盒子垂直水平居中对齐

5.2 旋转 rotate

  默认顺时针旋转

  过渡属性给谁加：哪个元素做过渡效果，就给谁加过渡属性。

2D 旋转 案例：

<head><style>div {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after {content: ""; /*此处也可以使用icomoon字体图标解决,更好写*/position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all .2s;}/*鼠标经过div，里面的三角旋转(带伪元素的是 div:hover::after 这种方式)*/div:hover::after {transform: rotate(225deg);}</style>
</head>
<body><div></div>
</body>

5.3 缩放 scale

5.4 中心点 transform-origin

5.5 转换transform综合写法

  综合写法：中间通过空格隔开

  综合写法，三个属性的编写是有顺序的。当同时有位移和其他属性时，记得将位移放在最前面

5.6 2D转换 transform 总结

6.CSS3动画(animation)

  动画(animation)是CSS3中最具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。（上文介绍的过渡，则需要我们鼠标经过时，执行过渡）

所以说：动画比过渡更强大。

6.1 动画的基本使用

0% 和 100% 有个专门的名字，叫做动画序列

/*1.定义动画*/
@keyframes move{/*开始状态*/0% {transform: translateX(0px);}/*结束状态*/1000% {transform: translateX(1000px);}
}

/*2.使用动画*/
div {width: 200px;height: 200px;background-color: pink;/*2.调用动画*//*动画名称*/animation-name: move;/*动画持续时间*/animation-duration: 2s;
}

6.2 动画多个状态(动画序列)

1. 可以做多个状态的变化 keyframe 关键帧
2. 里面的百分比要是整数
3. 里面的百分比就是 总的时间（如下案例为10s）的划分

/*1.定义动画*/
@keyframes move{/*开始状态*/0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}/*结束状态*/1000% {transform: translate(0, 0);}
}
/*2.使用动画*/
div {width: 200px;height: 200px;background-color: pink;/*2.调用动画*//*动画名称*/animation-name: move;/*动画持续时间*/animation-duration: 10s;
}

6.3 动画属性介绍

6.4 动画属性简写

animation：name duration timing-function delay iteration-count direction fill-mode

name 和 duration 必写。属性有默认值的可以不写。

简写属性中，不包含animation-play-state，就这一个除外。比如说鼠标经过时，动画暂停，则必须单独拿出来写

div:hover {/*鼠标经过div让这个div停止动画，鼠标离开就继续动画*/animation-play-state: paused;
}

6.5 动画速度曲线属性介绍

6.6 多个动画逗号分隔

【预留一个，奔跑的大熊demo】

7.CSS3 3D转换

7.1 3D坐标系介绍

7.2 3D位移 translate3d

基础编写。translateZ(xx) 需要配合 透视属性perspective才能生效

简写方式:transform: translate3d(100px, 100px, 100px);

只要Y轴和Z轴时，X轴不能省略，可以使用0。

7.3 3D透视(perspective)

  生活中3D电影需要3D眼镜，代码中的3D要想实现效果，也需要类似3D眼镜的东西，那就是透视属性(perspective)。这个属性在3D中很是重要哦！！！（图中d就是透视，z就是translateZ，设置perspective:500px应该值得就是中间透视的物体的高度吧！！！ ）

重点：透视属性，要写在被观察元素的符合子上面！！！

**透视：**就是模拟眼镜到屏幕的距离，translateZ 值越大，离屏幕越近，上面的div就会显示的更大。这就是透视的作用

7.4 3D旋转–X轴旋转(rotateX)

<style>body {perspective: 300px;}img {display: block;margin: 100px auto;transition: all 1s;}img:hover {transform: rotateX(45deg);}
</style>
<body><img src="media/pig.jpg alt=""/>
</body>

rotateX();正负值怎么旋转，还是挺重要的哦！！！！！

7.4.1 rotateX()正负值角度旋转方向

rotateX();正负值怎么旋转，还是挺重要的哦！！！！！

7.5 3D旋转–Y轴旋转(rotateY)

类似：钢管舞

7.5.1 rotateY()正负值角度旋转方向

7.6 3D旋转–Z轴旋转(rotateZ)

7.7 3D旋转简写

7.8 3D呈现(transform-style)

一个父盒子有很多个子盒子的情况下，父盒子有了3D效果，那么子盒子会不会有3D效果呢？这就用到了3D呈现(transform-style)

一共3个盒子，父盒子里有2个子盒子，呈现出以上效果

<style>body {/*2.父元素添加透视*/perspective: 500px;}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;/*3.添加过度*/transition: all 2s/*5.让自元素保持3D立体空间环境*/transform-style：preserve-3d }/*4.沿y轴旋转*/.box:hover {transform: rotateY(60deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box div:last-child{background-color: purple;/*1.紫色盒子旋转60deg*/transform: rotateX(60deg);}
</style>
<body><div class="box"><div></div><div></div></div>
</body>

加上 transform-style：preserve-3d 属性后的效果，如下所示：

7.9 3D案例

7.9.1 两面翻转的盒子

7.9.2 3D导航栏

7.9.3 旋转木马

浏览器私有前缀

浏览器私有前缀，是为了兼容老版本的写法，比较新版本的浏览器无需添加。

1.私有前缀

• -moz-：代表 firefox 浏览器私有属性
• -ms-：代表IE浏览器私有属性
• -webkit-：代表 Safari、Chrome 私有属性
• -o-：代表 Opera 私有属性

2.提倡写法

选择器 {-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px; /*微软自己都放弃了IE,所以一般不写 -ms- */
}

Flex 布局

1.flex布局体验

2.flex布局原理

3.flex布局父项常见属性

Flex 属性，有的需要给父亲添加属性，有的需要给孩子添加属性。属性添加介绍如下：

3.1 flex-direction 设置主轴方向

给父级添加 display:flex;

3.2 justify-content 设置主轴上的子元素排列方式

3.3 flex-wrap设置子元素是否换行

  flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，从而放到父元素中

3.4 align-item 设置侧轴上的子元素排列方式(单行)

align-items: 在子项为单项时使用。

stretch : 拉升。如果子盒子不给高度，则会拉升到和父盒子一样的高度。子盒子给了高度，该属性不会拉升(用的较少)

3.5 align-content 设置侧轴上的子元素的排列方式(多行)

3.6 flex-flow 属性(flex-direction和flex-wrap的符合属性)

4.flex布局子项常见属性

4.1 flex属性定义子项目分配剩余空间(剩余空间)

4.2 align-self控制子项在侧轴上的排列方式

4.3 order属性定义项目的排列顺序

---

博主写作不易，加个关注呗

求关注、求点赞，加个关注不迷路 ヾ(◍°∇°◍)ﾉﾞ

我不能保证所写的内容都正确，但是可以保证不复制、不粘贴。保证每一句话、每一行代码都是亲手敲过的，错误也请指出，望轻喷 Thanks♪(･ω･)ﾉ

CSS基础小总结，随手过来翻一翻相关推荐

1. Html+CSS基础知识（一）

   1 前端常识 1.1 HTML的作用 定义网页结构: 1.2 CSS的作用 修饰网页结构和样式: 1.3 javascript 定义网页之间的交互 2 HTML基础 2.1 什么是HTML HTML是 ...

2. html与css项目,项目六HTML与CSS基础.doc

   项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...

3. 学习笔记（二）——CSS基础

   文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...

4. css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识

   好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

5. 〖前端开发〗HTML/CSS基础知识学习笔记

   经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...

6. 两天学会css基础（一）

   什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...

7. html css基础知识

   1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...

8. html笔记（一）html4+css2.0、css基础和属性、盒模型

   w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...

9. DIV+CSS基础教程

   DIV+CSS基础教程 第一节  了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...

最新文章

1. 【组队学习】【31期】水很深的深度学习
2. 贝叶斯定理：AI 不只是个理科生 | 赠书
3. 重磅：某国产操作系统发布，称完全可替代Windows 7，由华为牵头制作！
4. 七夕（情人节）表白女朋友，程序员应该如何装一波13
5. 引用另一模板的宏_生信人值得拥有的编程模板Shell
6. 再见，前端！别更新了，我是学不动了
7. Nodejs学习笔记（十二）--- 定时任务（node-schedule)
8. 一键获取系统特殊权限 - TrustedInstaller权限，可以直接修改hosts等系统文件
9. css ico图标不显示,网站后台ico图标不显示的解决方法
10. 中柏平板u盘启动_中柏A13笔记本如何进bios设置u盘启动
11. QT TCPsocket 封包 粘包分析
12. Python入门刷题第三天（类和对象和继承）
13. 继续安利两个漫画App
14. 避暑山庄消失的三十六景，曾经那么美！
15. 【读书笔记】《结构思考力》——李忠秋
16. Windows bat 循环脚本案例
17. css属性之padding和margin
18. ★☆【二分圖最佳匹配】丘比特的煩惱
19. Android专项测试之崩溃测试（CPU）
20. Nginx实现网站发布

热门文章

1. 关于服务器的负载均衡问题
2. 【一则杂谈】实体真的不行了？
3. 加脱壳、加解密、破解辅助及其源码
4. DeepDive 简介
5. 西门子/SIEMENS SIMATIC S7-200 SMART 部分型号列表
6. linux安装核芯显卡驱动,请问Linux是不是毋须安装Intel核心显卡的驱动？
7. 程序员也有爱情（程序员适合表白的一个句子）
8. 虚拟机软件安装步骤（Vmware）
9. 区块链新思维迅雷同构多链架构实现百万TPS
10. 为什么那么多人建议考研不要考法硕?