CSS 入门指南：Box 模板、浮动和排水

terry 2年前 (2023-09-27) 阅读数 127 #数据结构与算法

Box 模板

Ns。框模板是浏览器为页面上的每个 HTML 元素创建的矩形框。这些框必须根据页面上显示的布局模型进行排列。

可见页面布局主要由三个属性控制：位置、显示、浮动。

位置：控制页面上元素的位置关系
显示：选择元素是否堆叠、相邻或不显示在页面上
浮动：提供控制方法，使元素能够在页面上显示形成多列布局

元素框功能可分为三组：

边框（板）。您甚至可以调整边框
填充的宽度、样式和颜色。你甚至可以设置盒子的内容区域和边框之间的边距
。可以设置盒子与相邻元素之间的间距

盒子模板图显示了HTML元素的边框、内边距和外边距之间的关系

元素盒子还有一个可以改变颜色的背景层并添加图像。

缩写样式

CSS 定义了边框、内边距和边距的缩写属性。在每个缩写声明中，属性值的顺序是上、右、下、左。

例如：

{
  margin-top: 5px; 
  margin-right: 10px;
  margin-bottom: 12px; 
  margin-left: 8px;
}

缩写如下：

{
    margin: 12px 10px 12px 8px;
}

如果不写值，则使用对侧的值。

例如：

{margin: 12px 10px 12px;}
/*等同于*/
{
    margin: 12px 10px 12px 10px;
}

如果仅输入一个值，则所有四边均采用该值。

{margin: 12px;}
/*等同于*/
{margin: 12px 12px 12px 12px;}

另外，每个盒子的属性分为三个精度。这三种精度从一般到具体的示例如下：

{
    border: 2px dashed red;
}

混合三种精度的速记属性来实现设计目标是很常见的。例如，您想在框的顶部和底部添加 4px 的红色边框，向左侧添加 1px 宽的红色边框，右侧不添加任何边框。可以这样写：

{border: 4px solid red;} /* 先给4条边设置相同的样式*/
{border-left-width: 1px;} /* 修改左边框宽度*/
{border-fight: none;} /*移出右边框*/

Box border

border 有三个相关的属性。

宽度（边宽）。您可以使用薄、中、厚等文本值，或除百分比和负值之外的任何绝对值。
风格（边框风格）。文本有无、隐藏、虚线、点线等值。
Color（边框颜色）。可以使用任何颜色值，包括 RGB、HSL、十六进制颜色值和颜色关键字。

盒子内边距

内边距是盒子的内容区域与盒子边缘之间的距离。

上图的样式是：

p {
    font: 16px helvetica, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff;
}

可以看到，当不设置padding时，内容就在边框旁边。

放置边框后：

p {
    font: 16px helvetica, arial, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff; 
    padding: 10px;
}

效果如下，可以看到样式好看多了：添加padding后轻松了

填充物在盒子里面，所以盒子的背景也获得。换句话说，额外的填充不会压缩文本内容，而是添加到框的声明宽度中。

框边距

边距示例

上例中，第一组是默认情况，第二组在第一组的基础上添加边框，第三组又添加边框。组边距设置为 0，标题和段落紧挨着。

向大家推荐此规则，作为样式表上的第一条规则：

* {margin: 0; padding: 0;}

此规则将所有元素的默认边距和填充设置为 0。这样我们就可以为那些真正需要它们的元素设置边距。

边框遮蔽

例如以下样式：

p {
    height: 50px;
    border: 1px solid #000;
    backgroundcolor: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

如果我们将此样式应用到连续的三块上，因为上边距和下边距彼此相邻，你可以认为它们的 Border 是80（50+30）像素，但实际上它本身就是50像素。这是边际覆盖率。

垂直边距与水平边距重叠
边框单位 根据经验，水平边距可以使用像素，以便文本始终与包含元素保持固定距离。它不受骄傲增加或减少的影响。至于上下边距，以em为单位，可以让段落间距随着字体大小的变化而相应增大或减小。

盒子有多大？

没有宽度的盒子

如果元素的宽度属性没有单独指定，我们说盒子没有宽度。
如果没有设置宽度，该属性默认为auto，它将元素的宽度扩展到与父元素相同的宽度。

看个例子？：

<body>
<p> 这个元素没有设置宽度</p>
</body>

设置样式：

body {
    font-family: helvetica, arial, sans-serif;
    size: 1em;
    marging: 0px;
    background-color: #caebff;
}

p {
    margin: 0;
    background-color: #fff;
}

不设置宽度的样式

可以看到，如果不设置段落的宽度，则段落会填充body元素。

为了更清晰，我在作品的左右两侧添加了边框，并添加了外边框。

p {
    margin:0 30px; 
    background-color:#fff; 
    padding:0 20px; 
    border: solid red; 
    border-width: 0 6px;
}

为段落添加左右边框

此时段落内容区域变成288像素（我手动调整浏览器宽度为400像素，400-（20+6+ 30)x2)。

结论：没有宽度的元素总是会扩展，直到填满其父元素的宽度。添加水平边框、内边距和边距会减少内容的宽度，其宽度等于水平边框、内边距和边距之和。

宽度为

的盒子继续上面的示例，我们首先删除外边框并将宽度设置为 400 像素。

p {
    width:400px; 
    margin:0; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

设置宽度、内边距和边框样式

可以看到盒子的宽度。它不是 400 像素，而是 452 像素（400+(20+6)*2）。

向框添加外边框：

p {
    width:400px; 
    margin:0 30px; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

设置宽度、内边距、外边距和边框样式

如您所见，总宽度现在为 512 像素（30+6+20+40+40+ 20+6+30=512)

结论：向具有设定宽度的框添加边框、内边距和边距会加宽框。其实盒子的width属性只是决定了盒子内容区域的宽度，并不是盒子的总宽度

浮动清空

浮动

css 浮动的主要目的design（浮动）属性是实现文本换行排列图像的效果，该属性也是创建多列布局的最简单方式。
首先我们看一个例子：

<img .../>
<p>..the paragraph text...</p>

css规则如下。

p {
    margin: 0;
    border: 1px solid red;
}
img {
    float: left;
    margin: 0 4px 4px 0;
}

本例的样式如图：

这里我们给图片添加样式float: left。目前，浏览器将图像向上推，直到到达顶部元素。内部边界（即身体）。下面的内容不再保留前面的浮动元素，因此它位于主元素的左上角。但是，其内容会覆盖浮动图像。

创建栏目

如何根据上述基础知识将内容划分为栏目？
只需使用另一个 float 属性即可。

p {
    float: left; /* 加上这两行*/
    width: 200px;
    ...
}

同时浮动图像和段落宽度可以消除图像环绕效果，并且浮动的段落也会向左和向上移动。就变成了多列效果。

环绕浮动元素

参见示例：

<section>
    <img >
    <p>It's fun to float.</p>
</section>
<footer>Here is the footer element that runs across</footer>

使用样式如下：

section {
    border: 1px solid blue;
    margin: 0 0 10px 0;
}
p {
    marging: 0;
}
footer {
    border: 1px solid red;
}

效果如图：浮动，但标题向右运行。父元素部分也会缩小以仅包含文本 Height

但我们不希望这样，我们不希望页脚上升。
浮动元素脱离原始文档流，不受主元素控制。如果我们希望父元素也包含浮动子元素怎么办？
有三种方法：

使用 `overflow:hidden`

作为主要元素。只需将这个样式添加到部分：

section {
    overflow: hidden;
    ...
}

现在效果是这样的：部分它包围了浮动图像

隐藏：♿♾❀它的真正目的是防止它包含的元素由于内容过大而拉伸。换句话说，应用此后，包含元素（父元素）将保留设置的宽度。如果子元素太大，就会被截掉。

浮动上层元素

另一种方法是同时浮动上层元素和子元素。

section {
    float: left;
    width: 100%;
    border: 1px solid blue;
}
img {
    float: left;
}
footer {
    border: 1px solid red;
    clear: left;
}

当一个部分浮动时，无论其子元素是否浮动，它的子元素都会被包围。这就是为什么您需要使用 width: 100% 使部件与浏览器一样宽。由于该部分也是浮动的，因此其旁边的页脚会被压缩。这种情况下，需要使用clear:left来保证它不会升到浮动元素的一侧。

将浮动元素添加到主元素内容的末尾，可以直接在标记中添加，也可以通过将clearfix 类添加到主元素来实现。

第三种方式是在父元素上添加一个非浮动子元素，然后清空子元素。

这个方法之所以有效，是因为父元素肯定包围着非浮动子元素，并且清空将子元素放在底部。

这里我们使用神奇的clearfix规则：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }

这个clearfixclearfix♾规则最先由开发

p {
    width:400px; 
    margin:0 30px; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

T。 编的，它只是添加了“清除包含剧集”作为非浮动元素（必须有内容，点数最少）。规则的第二条命是保证这个伪元素没有高度并且不可见。 after 在元素内容之后（不是元素之后）添加伪元素 
 使用clear：both 表示该节的新子元素从左右浮动元素中移除。 
我们研究了三种围绕浮动元素的方法。 
 如果没有top元素，float被清空了怎么办？ 
例如下面的例子： 
<section>
    <img >
    <p>This text sits next to the image and because the text extends below the bottom of the image, the next image positions itself correctly under the previous image.</p>
    <img >
    <p>This text is short, so the next image can float up beside this one.</p>
    <img >
    <p>Because the previous image's text does not extend below it, this image and text move up next to the previous image. This problem can be solved by the use of the clear property.</p>
</section>
样式如下： 
section {
    width:300px; b
    order:1px solid red;
}
img {
    float:left; 
    margin:0 4px 4px 0;
}
p {
    font-family:helvetica, arial, sans-serif; 
    margin:0 0 5px 0;
}
效果如图： 
因为第二张图片下面有空间，所以第三张图片和描述文字浮动到右边第二张图，这不是我们想要的。 
我们想要如下效果： 
如何实现？或者使用 clearfix 规则。向每个段落添加一个clearfix 类。通过 clearfix 类删除元素后，布局就是我们想要的了。 
本文主要介绍箱体模型、上浮和排水。 
作者：goodspeed
链接：https://juejin.im/post/5972ea326fb9a06bb874b78e
来源：掘金
版权所有商业转载请联系作者获得许可。非商业转载请注明出处。