第三周预习内容

什么是css

• CSS是层叠样式表（ Cascading Style Sheets）的缩写。
• 它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。
• CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。

---

css选择器

引用链接：link.

一、基础选择器

1.id选择器

• 一个元素只能拥有一个唯一的ID属性。
• 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

在使用ID选择器前首先要在元素中添加ID属性:

<p id="top-para">...</p>
<p id="foot-para">...</p>

使用ID选择器的方法为：井号 "#"后面跟id值
现在我们使用id选择器选择以上2个p元素如下：

#top-para {}
#foot-para {}

2.类选择器（class）

首先对文件元素添加一个class属性
比如截至日期可能会出现在以下元素中:

<p class="deadline">...</p>
<h2 class="deadline">...</h2>

这样我们就可以用以下方式使用类选择器了：

p.deadline { color: red;}
h2.deadline { color: red;}

3.标签选择器（元素选择器）

• 标签器是指用HTML标签名称作为选择器，按标签名称分类
• 其基本语法格式如下：
  标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …}
• 优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式

p {
			color:green;
			font: italic 700 32px "微软雅黑";
		}

4.通配选择器 （*）

单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。

让页面上的所有文本都为黑色：

* { color: black; }

• 也可以选择某个元素下的所有元素。
• 在与其他选择器结合使用时，通配选择器可以对特定元素的所有后代应用样式。

• 以下代码为 .demo 元素的所有后代，添加一个灰色背景：

.demo * { background: gray; }

• 虽然通配选择器的功能强大，但是出于效率考虑，很少有人使用它。
• 由于各个浏览器对每个元素上的默认边距都不一致，为了保证页面能够兼容多种浏览器，通常在Reset样式文件中，使用通配选择器进行重置，来覆盖浏览器的默认规则

* { margin: 0; padding: 0; }

二、关系选择器

1.包含选择器（后代选择器）（E F）

• 英文名称：descendant selector

比如我们要选择在li元素中包含a标签的链接（不是所有的链接），取消下划线的默认样式，我们可以这样代码实现：

li a {
text-decoration: none;
}

2.子元素选择器 （E>F）

有时候我们不想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素

比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是曾经更深的后代元素比如li里的ul：

html文档结构：

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

css代码如下:

div#container > ul {
border: 1px solid black;
}

结构图：

效果如下：

3.相邻选择器（紧邻同胞选择器） （E+F）

• （adjacent selector）
• 选择同一个父元素中，相邻的同级别的元素

如若想把紧跟在h1元素的段落上外边距去掉，你可以这么写：

h1 + p { margin-top:0 }

4.兄弟选择器（后续同胞选择器） （E~F）

• 选择一个元素后面同属一个父元素的另一个元素。
• 这个选择器和 X + Y 很像，但没那么严格。
• 后续同胞选择器应用会更广泛。

比如下面这个例子，我们选择所有ul后面的P元素。

html文档结构：

   <div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>

<p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

css代码如下:

ul ~ p {
 color: red;
}

文档选择树形结构：

三、属性选择器

1.X[title] （简单属性选择器）

如果想选择具有某个属性的元素，而不管属性的值是什么，我们可以使用简单属性选择器。

例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响。可以这么写代码：

a[title] {
 color: green;
}

2.X[href=“foo”] (精准属性值选择器)

比如我们想把特定网址的链接变成绿色，如下代码所示：

a[href="http://www.qianduandaren.com"] {
color: #1f6053; /* green */
}

3.X[foo~=“bar”] (匹配带有空格属性的值)

波浪号可以选择带有空格的属性

比如我们的自定义属性data-info含有external，image 这两个值，并以空格隔开，html结构如下段代码所示：

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

接下来使用波浪号，进行选择其中的一个属性值，css代码如下：

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
 color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}

4.X[href^=“http”] (匹配属性值开头的选择器)

让所有链接旁边加个小图标提示用户是外部链接

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

5.X[href$=".jpg"] (匹配属性值结尾的选择器)

比如我们将要匹配所有指向以jpg结尾的图片链接的文本为红色:
(要记住的是这些样式对gif和png结尾的图片链接是无效的)

a[href$=".jpg"] {
 color: red;
}

6.X[href*=“xxx”] (匹配部分属性值选择器)

有时候我们只需要匹配属性值的一部分，我们可以使用*号的语法

如下段代码所示：

a[href*="qianduandaren"] {
color: #1f6053; /* nettuts green */
}

上述代码，只有网址链接属性里含有qianduandaren这样值，链接文本的颜色替换成绿色。

7.X[data-*=“foo”] (自定义属性选择器)

我们要匹配所有指向图片链接的进行应用样式，我们该怎么做？
(图片的格式比较多，包括Png,jpeg,jpg,gif等等)

我们可以先在图片的链接标签中添加data-filetype属性，如下所示：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

再使用精准属性值选择器进行匹配了，如下段代码所示：

a[data-filetype="image"] {
 color: red;
}

四、伪类选择器

1.X:link

a:link {color:#FF0000;} /* 未访问的链接 */

2.X:visited

a:visited {color:#00FF00;} /* 已访问的链接 */

3.X：focus

input:focus{    }        /*focus表示当前拥有焦点的元素*/

4.X:hover （鼠标悬停状态选择器）

正式的叫法应该是用户操作交互伪类：user action pseudo class 想给用户鼠标悬停的元素加上样式，就可以使用此选择器

小提示：在旧版的IE里，:hover只能用于链接标签

最常见的交互效果就是，鼠标滑过，链接下面显示下划线：

a:hover {
 border-bottom: 1px solid black;
}

小提示：

border-bottom: 1px solid black；

比

text-decoration: underline;

效果更好。

5.X:active

a:active {color:#0000FF;} /* 已选中的链接 */

顺序要求：

• 在CSS定义中，a:hover要放在a:link和a:visited之后才有效；

• a:active要放在a:hover后面才有效，

• 需要严格按顺序才能看到效果

6. X:not(selector) （否定伪类选择器）

选择不满足条件的元素

比如我们希望选中所有的div,除了一个 id 为 container 的div

div:not(#container) {
 color: blue;
}

7.X：root选择器

• 将样式绑定到页面的根元素中
• 根元素是指位于文档树中最顶层结构的元素
• 在HTML页面中就是指包含整个页面的部分

<style type="text/css">:root{
background:yellow;
}
body{
background:green;
}
</style>

注意：不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成了绿色。

8.X:empty选择器

适用empty选择器来指定当元素中内容为空白时使用的样式。

p:empty{
  background:yellow;
}

9.X：target选择器

使用target选择器来对页面中某个target元素（该元素的id被当做页面的超链接来使用）指定样式，该样式只在用户点击了页面的超链接，并且跳转到target元素后起作用。

<style type="text/css">:target{
 background:yellow;
}
</style>
<a href="#text1">文字1</a>
<div id="text1">
<h1>文字1</h1>
<p>此处省略100个字</p>
</div>

10.X:first-child （第一个子元素选择器）

这个选择器通常选择第一个子元素
我们常常为第一个或者最后选项卡设置默认的视觉效果

比如去掉元素的边框，示例代码如下：

ul >li:first-child {
 border-top: none;
}

假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。这样的话第一个和最后一个元素并不需要这么设置区分分割线。我们会通过给第一个和最后一个元素添加样式来解决。

11. X:last-child （最后一个子元素选择器）

示例代码如下：

ul > li:last-child {
 color: green;
}

比如下面一个例子：
我们创建一个无序列表的样式，需要加上边框的深度，让层次更明显（分割线），又不想让第一个元素上边框和最后一个元素下边框有线条的感觉，这两个伪类就派上用场了，示例代码如下：

<style>
ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}
 
li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

li:first-child {
  border-top: none;
}
 
li:last-child {
 border-bottom: none;
}
</style>

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

效果如下：

12.X:only-child （选择唯一的子元素）

这个伪类一般不常用，only-child可以让你匹配唯一的子元素

比如，选择当div中只有一个p子元素的时候段落字体才是红色的，只要子元素超过一个就不会应用样式。示例代码如下：

<style>
div p:only-child {
 color: red;
}
</style>

<div><p> My paragraph here. </p></div> 
/*只有这行应用样式*/
 
<div>
 <p> Two paragraphs total. </p>
 <p> Two paragraphs total. </p>
</div>

13.X:checked （选中状态选择器）

css单选按钮和复选按钮的默认样式很有限，我们想定义个性化的选择后的状态样式，可以使用选中状态选择器

示例代码如下：

input[type=radio]:checked {
 border: 1px solid black;
}

这个伪类可以用来定义选中（checked）的元素 比如单选按钮（radio）或多选按钮（checkbox）

14.X:nth-child(n) （选择每第 n 个元素选择器）

• 匹配一组序列元素每第几个元素 。
• 注意：nth-child指序列里的第n个元素，从1开始。
• 如果你要匹配第二个元素，可以使用li:nth-child(2)。
• 我们甚至可以用按倍数进行匹配，比如选择所有4的倍数元素，li:nth-child(4n)。
• 我们常用这个做奇偶交替的样式，但是更常用的是这两个特殊的关键词字：even(偶数) 后 odd (奇数)。

常用写法示例：

li:nth-child(3) {
 color: red;
}

奇数样式匹配：

li:nth-child(odd) {
 background: red;
}

15.X:nth-last-child(n) （从后往前计算选择每第 n 个元素选择器）

X:nth-last-child(n) 与 X:nth-child(n)
相反，这里从后往前数，比如你的元素很多，你不会一个一个从前往后数吧，li:nth-child(397)，使用 nth-last-child
这个伪类更会方便些

代码示例：

li:nth-last-child(2) {
   color: red;
}

16.X:nth-of-type(n)（选择每第n个某种元素选择器）

想通过元素类型type进行选择，而不是子元素 child。
假设有5个无序列表。如果你想定义第三个ul的样式，但又没有id来进行匹配，那么可以使用伪类nth-of-type(n)。

代码可以这么写：

ul:nth-of-type(3) {
 border: 1px solid black;
}

17.X:nth-last-of-type(n)（从后往前计算选择每第n个某种元素选择器）

比如我们可以使用nth-last-of-type来选择倒数第n个元素。

如下段代码所示：

ul:nth-last-of-type(3) {
 border: 1px solid black;
}

18.X:only-of-type（匹配父元素里没有邻近兄弟元素的选择器）

only-of-type会匹配父元素里没有邻近兄弟元素的子元素（即同胞中唯一的那种元素，没有兄弟）。

例如，匹配所有只有一个列表元素的 li 和 div里只有一个p标签 ，让其应用样式，示例代码如下：

<style>
      div p:only-of-type {
         color: red;
      }

      li:only-of-type {
         font-weight: bold;
      }
</style>

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
   <ul>
      <li> List Item </li>
   </ul>
</div>

示例效果如下：

19.X:first-of-type（选择该类型的第一个元素选择器）

通常用这个选择器来选择该类型的第一个元素

如下结构的HTML代码：

<div>
 <p> My paragraph here. </p>
 <ul>
    <li> List Item 1 </li>
    <li> List Item 2 </li>
 </ul>
 
 <ul>
    <li> List Item 3 </li>
    <li> List Item 4 </li>
 </ul>   
</div>

比如我们有一个这样的需求? 怎么选中"List Item 2"。
先别着急往下看？你会如何做呢？

实现的方法比较多，如下所示：

方案1

ul:first-of-type > li:nth-child(2) {
 font-weight: bold;
}

上述代码，首先找到页面中的第一个无序列表，然后找到它的直接子元素，然后选择第二个元素。

方案2 ：

使用紧邻同胞选择器

p + ul li:last-child {
 font-weight: bold;
}

上述代码先找到紧跟在p后面的ul，然后找到li序列的最后的元素。

方案3：

多种选择器的组合，示例代码如下：

ul:first-of-type li:nth-last-child(1) {
 font-weight: bold;   
}

五、伪元素选择器

更多详细内容见：link

1. X:: (pseudoElement)（伪元素选择器）

我们可以使用伪元素（用::表示）来定义某些片段元素 比如第一行或第一个字母。 要记住的是这只能用于块状（block）元素。

比如我们要匹配第一个字母：

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

上述代码会匹配所有的P标签，然后匹配所有段落开头的第一个字母。一般用于比较个性的类似杂志排版风格的网站。

比如我们要匹配段落的第一行内容：

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

这里使用::first-line来定义段落的第一行的样式。

为了兼容现有的样式标准
CSS1和CSS2里使用单冒号来表示伪元素（比如:first-line，:first-letter，:before和:after）

2.X::before （伪元素前置元素选择器）

要求：在段落的前面添加一东西

p::before{
	content: "泰山冲冲冲！"
	/*content是一种固定写法，表示在段落之前需要添加的内容*/
}

效果：在每个<p>的前面添加"泰山冲冲冲！"

3.X::after （伪元素后置内容元素选择器）

最简单的直接的用法，就是在某个元素结束前插入内容

如下段代码所示，在文档末尾加入结束语：

body::after {content: "The End"}

我们还会经常用这个属性清除浮动，代码如下：

<style>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
}
</style>

<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>

---

css常用属性

一、CSS背景属性(Background)

属性与描述

1. background：在一个声明中设置所有的背景插件
2. background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
3. background-color：设置元素的背景颜色
4. background-image：设置元素的背景图像
5. background-position：设置背景图像的开始位置
6. background-repeat：设置是否及如何重复背景图像

二、CSS边框属性(Border和Outline)

属性与描述

1. border：在一个声明中设置所有的边框属性
2. border-bottom：在一个声明中设置所有的下边框属性
3. border-bottom-color：设置下边框的颜色
4. border-bottom-style：设置下边框的样式
5. border-bottom-width：设置下边框的宽度
6. border-color：设置四条边框的颜色
7. border-left：在一个声明中设置所有的左边框属性
8. border-left-color：设置左边框的颜色
9. border-left-style：设置左边框的样式
10. border-left-width：设置左边框的宽度
11. border-right：在一个声明中设置所有右边框的属性
12. border-right-color：设置右边框的颜色
13. border-right-style：设置右边框的样式
14. border-right-width：设置右边框的宽度
15. border-style：设置四条边框的样式
16. border-top：在一个声明中设置所有上边框的属性
17. border-top-color：设置上边框的颜色
18. border-top-style：设置上边框的样式
19. border-top-width：设置上边框的宽度
20. border-width：设置四条边框的宽度
21. outline：在一个声明中设置所有的轮廓属性
22. outline-color：设置轮廓的颜色
23. outline-style：设置轮廓的样式
24. outline-width：设置轮廓的宽度

三、CSS文本属性(Text)

属性与描述

1. color：设置文本的颜色
2. direction：规定文本的方向/书写方向
3. etter-spacing：设置字符间距
4. line-height：设置行高
5. text-align：规定文本的水平对齐方式
6. text-decoration：规定添加到文本的装饰效果
7. text-indent：规定文本块首行的缩进
8. text-shadow：规定添加到文本的阴影效果
9. text-transform：控制文本的大小写
10. unicode-bidi：设置文本方向
11. white-space：规定如何处理元素中的空白
12. word-spacing：设置单词间距1

四、CSS字体属性(Font)

属性与描述

1. font：在一个声明中设置所有字体属性
2. font-family：规定文本的字体系列
3. font-size：规定文本的字体尺寸
4. font-size-adjust：为元素规定aspect值
5. font-stretch：收缩或拉伸当前的字体系列
6. font-style：规定文本的字体压实
7. font-variant：规定文本的字体样式
8. font-weight：规定字体的粗细

五、CSS外边距属性(Margin)

属性与描述

1. margin：在一个声明中设置所有的外边距属性
2. margin-bottom:设置元素的下外边距
3. margin-left:设置元素的左外边距
4. margin-right:设置元素的右外边距
5. margin-top:设置元素的上外边距

六、CSS内边距属性(Padding)

属性与描述

1. padding:在一个声明中设置所有的内边距属性
2. padding-bottom:设置元素的下内边距
3. padding-left:设置元素的左内边距
4. padding-right:设置元素的右内边距
5. padding-top:设置元素的上内边距

七、CSS列表属性(List)

属性与描述

1. list-style:在一个声明中设置所有的列表属性
2. list-style-image:将图像设置为列表项标记
3. list-position:设置列表项标记的放置位置
4. list-style-type:设置列表项标记的类型

八、 CSS尺寸属性(Dimension)

属性与描述

1. height:设置元素高度
2. max-height:设置元素的最大高度
3. max-width:设置元素的最大宽度
4. min-height:设置元素的最小高度
5. min-width:设置元素的最小宽度
6. width:设置元素的宽度

九、CSS定位属性(Positioning)

**　属性与描述**

1. bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移
2. clear:规定元素的哪一侧不允许其他浮动元素
3. clip:剪裁绝对定位元素
4. cursor:规定要显示的光标类型(形状)
5. display:规定元素应该生成的框的类型
6. float:规定框是否应该浮动
7. left:设置定位元素左外边距边界与其包含块左边界之间的偏移
8. overflow:规定当内容溢出元素框时发生的事情
9. position:规定元素定位类型
10. right:设置定位元素右外边距边界与其包含块右边之间的偏移
11. top:设置定位元素上外边距边界与其包含块上边之间的偏移
12. vertical-align:设置元素的垂直对其方式
13. visibility:规定元素是否可见
14. z-index:设置元素的堆叠顺序

十、CSS表格属性(Table)

属性与描述

1. border-collapse:规定是否合并表格边框
2. border-spacing:规定相邻单元格边框之间的距离
3. caption-side:规定表格标题的位置
4. empty-cells:规定是否显示表格中的空单元格上的边框和背景
5. table-layout:设置用于表格的布局算法

---

盒子模型

引用链接：link.

一、什么是盒子模型

CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

网页中所有元素都具备以下四个属性：

1. 内容(content)，也就是元素的 width、height
2. 内边距(padding)
3. 边框(border)
4. 外边距(margin)

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

二、标准盒子模型和怪异盒子模型（IE盒子模型）

• 在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)
  

• 在怪异模式下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）
  

看下面一段代码：

<style>
    div{
        width:100px;
        height:100px;
        padding:20px;
        border:2px solid #000;
    }
</style>

• 在标准模式下：总宽度为144px;
  

• 在怪异模式下：总宽度为100px;
  

两种模式的转换（通过box-sizing）

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式，可以参考上面的代码案例。

• 当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
• 当设置box-sizing:border-box时，采用怪异模式进行计算；

三、盒子模型的属性

内容的属性

1.宽度

• width：长度值 | 百分比 | auto
• max-width（最大宽度）：长度值 | 百分比 | auto
• min-width（最小宽度）：长度值 | 百分比 | auto

注意：

百分比是该元素相对于父元素的百分比，下同。
如果同时设置了max-width和min-width，且前者小于后者，则前者的值会转换成后者的值并且显示的就是min-width的值，下同。
最值宽度有兼容性问题，IE6下是不兼容这个属性的，下同。

2.高度

• height：长度值 | 百分比 | auto
• max-height（最大高度）：长度值 | 百分比 | auto
• min-height（最小高度）：长度值 | 百分比 | auto

说明 ：设置块级元素和和替换元素的内容高度。

3.边框

• border-width（边框宽度）：thin | medium | thick | 长度值
• border-color（边框颜色）：颜色 | transparent（透明）
• border-style（边框样式）：

属性名	描述
dotted	定义点线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义两个边框两个边框的宽度和 border-width 的值相等
groove	定义3D凹边框，效果取决于边框的颜色值
ridge	定义3D凸边框，效果取决于边框的颜色值
inset	定义3D嵌入边框，效果取决于边框的颜色值
outset	定义3D突出边框，效果取决于边框的颜色值

上面所说的都是对整个边框进行修改，如果想要单独修改某一条边的属性，则可表示为border-left/right/top/bottom-width/color/style

4.内边距

• padding-left：长度值 | 百分比
• padding-right：长度值 | 百分比
• padding-top：长度值 | 百分比
• padding-bottom：长度值 | 百分比

说明：值不能为负值

padding的缩写形式有下：

• padding：value1；//四个方向内边距都为value1
• padding：value1 value2；//上下内边距为value1，左右内边距为value2
• padding：value1 value2 value3；//上内边距为value1，左右内边距为value2，下内边距为value3
• padding：value1 value2 value3 value4；//上右下左内边距依次为value1 value2 value3 value4（以上方为起点的顺时针方向）

5.外边距

• margin-left：长度值 | 百分比 | auto
• margin-right：长度值 | 百分比 | auto
• margin-top：长度值 | 百分比 | auto
• margin-bottom：长度值 | 百分比 | auto

说明：值可以为负值

margin的缩写形式有下：

• margin：value1；//四个方向外边距都为value1
• margin：value1 value2；//上下外边距为value1，左右外边距为value2
• margin：value1 value2 value3；//上外边距为value1，左右外边距为value2，下外边距为value3
• margin：value1 value2 value3 value4；//上右下左外边距依次为value1 value2 value3 value4（以上方为起点的顺时针方向）

注意：

• 默认情况下，相应HTML块级元素存在外边距：body、h1~h6、p等。
• 声明margin属性，覆盖默认样式body,h1,h2,h3,h4,h5,h6,p{ margin: 0;}
• 设置margin值为auto时，会实现水平方向居中显示，此时由浏览器计算margin的值。
• 在垂直方向上的两个相邻盒子同时设置了margin，会合并为较大的那一个margin。

—————————————————————————————
2021.4.27