- 盒子模型

最新推荐文章于 2023-12-20 20:59:16 发布

Lazy_idle

最新推荐文章于 2023-12-20 20:59:16 发布

阅读量89

点赞数

分类专栏： Web前端文章标签： html css css3

本文链接：https://blog.csdn.net/kokomo_tender/article/details/115224932

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

- 盒子模型

一、初识盒子模型
1、深入理解块标签和行标签
浏览器在显示HTML文档时，由于浏览器会自上而下，自左至右的读取HTML文档，所以默认情况下元素会自动从上而下分成一行行，并在每行中按从左至右的顺序排放。这种从左往右，从上往下的流式排列方式，我们称之为文档流。

1.1、块标签
块标签会尽可能占据外层容器的整个宽度，所以，之后的标签自然的被显示在下一行；另外，块标签可以设置自己的宽度（width）和高度（height）。我们之前看到的

到

标签、
标签、

标签、
标签、
标签、
标签等，都属于块标签。

1.2、行标签（内联标签）
行标签（内联标签）不会占据容器的一整行，它会和它周围的内容一起，在一行内，从左至右自然的依次显示，如果没有更多的空间，剩下的内容会自动摆放在下一行；并且，对于行标签设置宽度（width）和高度（height）一般并不会起作用，行标签的宽度和高度决定于标签中内容的高度和宽度，我们之前学习的标签、标签、标签、、标签均是行标签。

注意：、、、、、等标签也可以设置宽度或高度，但它们仍然是行标签。

1.3、display属性

标签是否是行标签或块标签均可以使用CSS样式表的display属性进行设置。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> display属性 </title>
    <meta charset="utf-8">
	<style type="text/css">
	  ul li {
	    display: inline;
	  }
	</style>
  </head>
  <body>
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">校友档案</a></li>
      <li><a href="#">添加校友</a></li>
    </ul>
  </body>
</html>

说明：

上例中，

标签默认为块标签，通过样式表display: inline;，将
标签设置成了行标签。
默认情况下，块标签的display属性值为block，行标签的display属性值为inline。
我们还可以通过display属性将标签设置为内联块（inline-block）标签，设置为内联块标签后，标签不会尽可能的占据外层容器的整个宽度，但是它仍然可以设置宽度（width）和高度（height）。
2、什么是盒子模型

HTML中所有元素都可以看作一个盒子，这个盒子对该HTML元素进行封装，包括：边距、边框、填充和内容区域。而在所有的元素中，尤其以块级元素的盒子最为标准。在CSS中，盒子模型（box model）这一术语常常用来设计和布局。
下面是一个示例：
```
<!DOCTYPE html>
<html>
  <head>
    <title> 盒子模型 </title>
    <meta charset="utf-8">
  </head>
  <body>
    <h2>李白</h2>
    <p>字太白，号青莲居士，又号“谪仙人”，是伟大的浪漫主义诗人，被后人誉为“诗仙”。</p>
    <p>点击查看校友录<a href="#">免责声明</a></p>
    <h3>兴趣爱好</h3>
    <ul>
      <li>饮酒</li>
      <li>赋诗</li>
      <li>游历山水</li>
    </ul>
    <h3>成长足迹</h3>
    <ol>
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
      <li>732年：《蜀道难》</li>
      <li>736年：《将进酒》</li>
      <li>759年：《早发白帝城》</li>
    </ol>
  </body>
</html>
```
二、盒子模型的结构

盒子模型总共有四部分组成，如下：

1、内容

内容区域中包含的是盒子中真正的内容（文本，图片等），需要注意的是，内容区域的默认高度由内容的高度决定。

2、填充

填充包围在内容区域的边缘，分为上、右、下、左四个区域。

说明：
- 样式表中的padding属性用来设置元素的填充。样式padding: 5px 10px 15px 20px;表示在内容区域的上部填充5像素，右部填充10像素，下部填充15像素，左部填充20像素。
- 填充有多种设置方式，下面是一些例子：
3、边框

边框包围在填充的边缘，也分为上、右、下、左四个区域。

说明：

样式表中的border系列属性设置元素的边框，样式border: 5px solid #FFFFFF;表示元素在上、右、下、左方向都有5像素的边框，边框为实线，白色。
边框可以用不同的样式属性分别设置宽度、风格、颜色，也可以像上例中一样在border样式属性中一起设置，下面是几个例子：

4、边距

边框包围在边框的周围，也分为上、右、下、左四个区域。

说明：

样式表中的margin属性用来设置元素的边距。样式margin: 20px 15px 10px 5px;表示边框的上部离其他元素有20像素的距离，边框右部离其他元素有15像素的距离，边框下部离其他元素有10像素的距离，边框左部离其他元素有5像素的距离。
同填充一样，边框也有类似的多种设置方式，下面是一些例子：

三、计算盒子大小

默认情况下，盒子尺寸的计算方式如下：

整个盒子的宽度 = 内容区域的宽度 + 左padding + 右padding + 左border + 右border + 左margin + 右margin
整个盒子的高度 = 内容区域的高度 + 上padding + 下padding + 上border + 下border + 上margin + 下margin

四、默认的属性

不同的浏览器都会默认给不同的标签一定的盒子属性值，当我们没有设置这些标签的盒子属性值时，会应用浏览器的默认样式。一般情况下，我们需要自由的控制网页，所以经常在样式表的最上面覆盖浏览器的默认样式。
示例如下：
```
*{
padding:0;
margin:0;
border:0;
}
```
的盒子属性值，当我们没有设置这些标签的盒子属性值时，会应用浏览器的默认样式。一般情况下，我们需要自由的控制网页，所以经常在样式表的最上面覆盖浏览器的默认样式。
示例如下：
```
*{
padding:0;
margin:0;
border:0;
}
```

Lazy_idle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
- 盒子模型

HTML及CSS学习笔记 07 - 盒子模型一、初识盒子模型1、深入理解块标签和行标签浏览器在显示HTML文档时，由于浏览器会自上而下，自左至右的读取HTML文档，所以默认情况下元素会自动从上而下分成一行行，并在每行中按从左至右的顺序排放。这种从左往右，从上往下的流式排列方式，我们称之为文档流。1.1、块标签块标签会尽可能占据外层容器的整个宽度，所以，之后的标签自然的被显示在下一行；另外，块标签可以设置自己的宽度（width）和高度（height）。我们之前看到的到标签、标签、标签、标签、标签、标
复制链接

扫一扫