~初始前端，在新手村生存的第二天（盒子模型、浮动、定位、伪类、伪元素）~

内容区域（content area）也就是元素：包含了元素的文本、图像、视频等内容。

内边距（padding）：位于内容区域与边框之间，用于控制内容区域与边框之间的距离，内边距是透明的。

边框（border）：位于内边距和外边距之间，用于定义元素的边界和外观。

外边距（margin）：位于边框与相邻元素之间，用于控制元素与其他元素之间的距离，同样，外边距也是透明的，因此不会遮挡其后的任何元素。

背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，但是，许多元素将由用户代理样式表设置外边距和内边距，也就是说，由于浏览器的内核不同，针对内边距、外边距的制定的标准不同，这意味着你在你的默认浏览器可以使用，但是移动到别的浏览器就不是原来你想要设计的样式了。

这时我们可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式，也可是我们所说的初始化。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{
     margin: 0;
     padding: 0;
 }

1.边框（border）

在CSS中，border 属性允许我们设计指定的元素边框的样式、宽度和颜色。

**边框样式

我们通常使用 border-style 属性来制定要显示的边框样式，可以设置一到四个值：用于上边框、右边框、下边框和左边框

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框 -------------------------------------参考自W3school

下面我们来上机操作一下吧：

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h1>border-style 属性</h1>

<p>此属性规定要显示的边框类型：</p>

<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>

</body>
</html>

效果如下：

这里小ben解释一下其中出现的(p. 和 class）：用于“查找”（或选取）要设置样式的 HTML 元素的我们称之为CSS选择器。这里的class就属于CSS选择器中的一种，是类选择器。如需选择拥有特定 class 的元素，需要用写一个句点（.）字符，后面跟类名。废话少说，跟着小ben看一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

效果：

我们还可以指定特定的HTML元素来使用该类的效果：

p.center {
  text-align: center;
  color: red;
}

在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐,颜色变红；其他的例如<h2>等元素使用该类会没有任何变化，因为我们一开始已经特定类的对象了，其他人不允许使用。

而我们在文章开始时举的例子中用到 *{.......} 的也属于CSS选择器的一种，叫做通用选择器，影响的是页面上所有HTML元素。

好了，回归正题，继续来说这个边框。

不仅如此，我们还可以单独对每个边框的顶部、右侧、底部和左侧进行样式的设计，他的设计原理是这样的：

如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;

上边框是虚线
右边框是实线
下边框是双线
左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

上边框是虚线
右和左边框是实线
下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线
右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

四条边均为虚线

**边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h1>border-width 属性</h1>

<p>此属性规定四条边框的宽度：</p>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p class="four">一些文本。</p>
<p class="five">一些文本。</p>
<p class="six">一些文本。</p>

<p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>

</body>
</html>

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 10px 5px; /* 上、下边框 10 像素，左、右边框 5 像素 */
}

p.two {
  border-style: solid;
  border-width: 25px 15px 5px 39px; /* 上 25 像素、右 15 像素、下 5 像素、左 39 像素 */
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>


</body>
</html>

效果如下：

**边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent

注释：如果未设置 border-color，则它将继承元素的颜色 -----------摘自W3

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），如下：

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
  text-align:center;
}
</style>
</head>
<body>

<p class="one">看我，看我，看我！！！！！</p>

</body>
</html>

效果如下：

如果想要了解更多有关HEX、RGB 和 HSL 值的知识，点击这里了解详细吧！https://www.w3school.com.cn/css/css_colors.asp

**简写边框属性

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需，如果不写他，其他属性无法显示）
border-color

例如：

p {
  border: 5px solid red;
}

这里就对边框同时定义了三个属性：宽度（5px），实线，红色。

也可以只为一个边指定所有单个边框属性：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 20px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<p>今天您吃了吗？</p>

</body>
</html>

效果如下：

**所有CSS边框属性

补充：小ben感觉 border-radius：8px 圆角效果更好看一些

**自我练习

2.外边距（margin）

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

我们可以使用 margin 属性一次控制一个元素的所有边距，或者每边单独控制，例如：

margin-top
margin-right
margin-bottom
margin-left

（啊啊啊啊之前没有存档，好不容易写的从这里开始都没了，啊啊啊啊~~~~~）

下面我们来分析单独控制的情况：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
 
</style>
</head>
<body>



<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

</body>
</html>

效果如下：

为了缩减代码，可以在一个属性中指定所有外边距属性：

如果 margin 属性有四个值：

margin: 25px 40px 72px 105px;
上外边距是 25px
右外边距是 40px
下外边距是 72px
左外边距是 105px

如果 margin 属性设置三个值：

margin: 25px 5px 75px;
上外边距是 25px
右和左外边距是 5px
下外边距是 75px

如果 margin 属性设置两个值：

margin: 5px 30px;
上和下外边距是 5px
右和左外边距是 30px

如果 margin 属性设置了一个值：

margin: 45px;
所有四个外边距都是 45px

**auto 属性值

我们如果将 margin 属性设置为 auto，也就是：margin : auto ，就可以使元素在其容器中水平居中，然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。让我们看看下面的例子：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 5px solid yellow;
}
</style>
</head>
<body>

<div>
今天的菜有：蒸羊羔、蒸熊掌、蒸鲈鱼、烧花鸭。。。。。。
</div>

</body>
</html>

**inherit 属性值

就是继承来自父元素的特定的属性。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid red;
  margin-left: 200px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>

<div>
<p class="ex1">本段落继承了 div 元素的左外边距。</p>
</div>

</body>
</html>

这里我们来看，在CSS代码中对<div>进行了定义，因为是块状元素，且对<div>定义了左侧的外边距为200px，如图，很明显方框的左侧发生偏移，对于方框内部也是一样，<p>标签继承了父元素，也就是<div>中的左侧外边距属性，也就是说，里面的文本段落也是左侧外边距为200px，这里也把<p>看作了一个盒子。

**外边距合并（折叠）

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

外边距合并看上去可能有点奇怪，但是实际上，它是有意义的。

以由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和，这意味着段落之间的空间是页面顶部的两倍。

如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

**负属性值

让我们来跟着下面的例子来理解一下：

3.内边距（padding）

内边距位于边框和内容区域之间。与外边距不同，您不能有负内边距值，所以值必须是 0 或正。应用于元素的任何背景都将显示在内边距后面。

我们可以使用padding简写属性控制元素所有边，或者每边单独使用等价的普通属性：

padding-top
padding-right
padding-bottom
padding-left

（单独写和合着写都和外边距的形式一样，详情请参考上面的内容）

**元素宽度与高度的计算

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，如图：

我们再举一个例子：

div {
  width: 400px;
  padding: 50px;
}

在这里，<div> 元素的宽度为 400px。但是，<div> 元素的实际宽度将是 500px（400px + 左内边距50px + 右内边距 50px)。

若要将宽度保持为 400px，无论填充量如何，那么我们可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 400px;
  background-color: yellow;
}

div.ex2 {
  width: 400px;
  padding: 50px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="ex1">这个 div 是 300 像素宽。</div>
<br>

<div class="ex2">div 的宽度保持在 300 像素，尽管总的左右内边距为 50 像素，因为设置了 box-sizing: border-box 属性。</div>

</body>
</html>

&浮动&

最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边，你可能在报纸版面上看到过。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。

1.什么是浮动？

让我们跟着例子来了解浮动，首先让我们来写一个简单的HTML代码，添加以下内容到 HTML 的<body>内，删除之前<body>里面的东西：

<h1>Simple float example</h1>

<div class="box">Float</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>

<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

加入以下CSS代码：

body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.box {
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}

我们会看到什么呢？

图片坐落在文本的上方,很正常，好，我们接着往下来，为了让盒子浮动起来，我们向 .box 里加了 float 和 margin-right 属性：

.box {
    float: left;
    margin-right: 15px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}

结果就变成了：

这里我们的浮动元素，也就是<div>,浮动元素浮动到左边，而在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。

向右浮动则反过来，原理是一样的，把 left 改成 right 即可。

2.浮动可视化

我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。

我们可以看一个例子：

紧随浮动盒子的第一段文字上添加 special 类，然后在你的 CSS 文件中添加如下：

.special {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

可以看到段落的背景色处于浮动盒子之下

目标元素的行内盒子已被缩短，故文字会排布在浮动元素周围，但是浮动元素从正常文档流移出，故段落的盒子仍然保持全部宽度。

3.清除浮动

在前例的 HTML 代码中，向浮动元素下方的第二个段落添加 cleared 类，然后向 CSS 文件中添加以下样式：

.cleared {
  clear: left;
}

该看到，第二个段落已经停止了浮动，不会再跟随浮动元素排布了。clear 属性接受下列值：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

此时还有一个问题，如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外，然后我们可以向包含元素添加 overflow: auto; 来解决此问题：

(这里使用了W3网站的相关样例)

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<h1>Clearfix</h1>

<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>

<div>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>

<div class="clearfix">
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

让我们看看我们的例子：

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

也是一个效果。

还有一种就是(运用了伪类):

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

他和 overflow: auto; 是等效的，但是据说是更流行一点。

4.浮动的布局

通过使用 float 属性，可以轻松地并排浮动内容框（不仅是可以并排等宽的文本框，还可以并排等宽的照片）。

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 50px; /* 如果需要在图片间增加间距 */
}

为什么要使用 box-sizing 呢？当我们想要添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

其他的布局情况请详细参考：

https://www.w3school.com.cn/css/css_float_examples.asp

&定位&

定位小ben也不是很懂，打算培训时重点听一听，这里发一个参考链接：

定位 - 学习 Web 开发 | MDN (mozilla.org)

&伪类和伪元素&

1.伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

button:hover {
  color: blue;
}

这样当鼠标悬停时，标签会变成蓝色！！！！！！！！！！！！！！！！！

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。

下面我们通过几个例子来认识一下伪类：

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

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

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

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

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

我们还可以将伪类和CSS类结合在一起，来进行一个有趣的隐藏效果，例如：

** :first-child 伪类

该伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

p:first-child {
  color: blue;
}

举个例子来说：

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

p i:first-child {
  color: blue;
}

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i {
  color: blue;
}

2.伪元素

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

套用一个学姐的博客里的介绍：

就拿 ：：before举个例子：

h1::before {
  content: url(smiley.gif);
}

综上所见，伪元素就是为模拟标签效果而做出来的人为制造出来的元素。

总结一下，我们这周对于CSS的知识更加丰富了，但是对于定位与文档流的概念还是很模糊，期待接下来的学习。