HTML及CSS学习笔记 07 - 盒子模型

最新推荐文章于 2022-10-24 16:17:13 发布

chodenke

最新推荐文章于 2022-10-24 16:17:13 发布

阅读量666

点赞数

分类专栏： HTML及CSS学习笔记文章标签： HTML HTML5 盒子模型 display

本文链接：https://blog.csdn.net/cgl125167016/article/details/89675516

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第七课。盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型，本文主要就盒子模型的概念、结构、相关样式属性等进行介绍

一、初识盒子模型

1、深入理解块标签和行标签

浏览器在显示HTML文档时，由于浏览器会自上而下，自左至右的读取HTML文档，所以默认情况下元素会自动从上而下分成一行行，并在每行中按从左至右的顺序排放。这种从左往右，从上往下的流式排列方式，我们称之为文档流。

1.1、块标签

块标签会尽可能占据外层容器的整个宽度，所以，之后的标签自然的被显示在下一行；另外，块标签可以设置自己的宽度（width）和高度（height）。我们之前看到的<h1>到<h6>标签、<p>标签、<ol>标签、<ul>标签、<li>标签、<div>标签等，都属于块标签。如图：

1.2、行标签（内联标签）

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

注意：<img>、<textarea>、<input>、<select>、<video>、<audio>等标签也可以设置宽度或高度，但它们仍然是行标签。

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属性
说明：

上例中，<li>标签默认为块标签，通过样式表display: inline;，将<li>标签设置成了行标签。
默认情况下，块标签的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>

页面浏览效果：
盒子模型
说明：

例子中，我们看到的蓝色部分即为内容区域，橘黄色部分为边距，绿色部分为填充。

二、盒子模型的结构

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

盒子组成部分	说明
内容（content）	盒子中真正的内容（文本，图片等）
填充（padding）	边框以内，内容区域周围的部分，又称为内边距或补白，填充是透明的
边框（border）	边距以内，围绕在填充和内容外的部分
边距（margin）	边框外的区域，又称为外边距，边距是透明的

1、内容

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

<!DOCTYPE html>
<html>
  <head>
    <title> 内容区域 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 64px;
		height: 21px;
		padding: 0;
		border: 0;
	    margin: 0;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

页面浏览效果：
内容区域
盒子模型分析：
内容区域盒子模型

2、填充

填充包围在内容区域的边缘，分为上、右、下、左四个区域。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> 填充 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 64px;
		height: 21px;
		padding: 5px 10px 15px 20px;
		border: 0;
	    margin: 0;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

页面浏览效果：

盒子模型分析：
填充盒子模型
说明：

样式表中的padding属性用来设置元素的填充。样式padding: 5px 10px 15px 20px;表示在内容区域的上部填充5像素，右部填充10像素，下部填充15像素，左部填充20像素。

填充有多种设置方式，下面是一些例子：

属性名称	解释	示例
`padding-top`	设置上填充	`padding-top: 5px;`
`padding-right`	设置右填充	`padding-right: 10px;`
`padding-bottom`	设置下填充	`padding-bottom: 15px;`
`padding-left`	设置左填充	`padding-left: 20px;`
`padding`	按上、右、下、左的顺序（顺时钟顺序）设置填充	`padding: 5px 10px 15px 20px;`
`padding`	按上下、左右两两设置填充，可以在上下填充相同且左右填充也相同的情况下使用	`padding: 5px 10px;`

3、边框

边框包围在填充的边缘，也分为上、右、下、左四个区域。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> 边框 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 64px;
		height: 21px;
		padding: 5px 10px 15px 20px;
		border: 5px solid #FFFFFF;
	    margin: 0;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

页面浏览效果：

盒子模型分析：
边框盒子模型
说明：

样式表中的border系列属性设置元素的边框，样式border: 5px solid #FFFFFF;表示元素在上、右、下、左方向都有5像素的边框，边框为实线，白色。

边框可以用不同的样式属性分别设置宽度、风格、颜色，也可以像上例中一样在border样式属性中一起设置，下面是几个例子：

属性名称	解释	示例
`border-width`	设置边框的宽度	`border-width: 5px;`
`border-style`	设置边框的风格	`border-style: solid;`
`border-color`	设置边框的颜色	`border-color: red;`
`border`	按顺序分别设置边框的宽度、风格、颜色	`border: 5px solid red;`

可以针对边框上、右、下、左中的任意一个方向进行单独设置，下面是几个例子：

属性名称	解释	示例
`border-top`	设置上边框	`border-top: 5px double red;`
`border-right-width`	设置右边框的颜色	`border-right-width: 5px;`
`border-bottom-style`	设置下边框的风格	`border-bottom-style: dotted;`
`border-left-color`	设置左边框的颜色	`border-left-color: red;`

4、边距

边框包围在边框的周围，也分为上、右、下、左四个区域。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> 边距 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 64px;
		height: 21px;
		padding: 5px 10px 15px 20px;
		border: 5px solid #FFFFFF;
	    margin: 20px 15px 10px 5px;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

页面浏览效果：

盒子模型分析：
边距盒子模型
说明：

样式表中的margin属性用来设置元素的边距。样式margin: 20px 15px 10px 5px;表示边框的上部离其他元素有20像素的距离，边框右部离其他元素有15像素的距离，边框下部离其他元素有10像素的距离，边框左部离其他元素有5像素的距离。

同填充一样，边框也有类似的多种设置方式，下面是一些例子：

属性名称	解释	示例
`margin-top`	设置上边距	`margin-top: 20px;`
`margin-right`	设置右边距	`margin-right: 15px;`
`margin-bottom`	设置下边距	`margin-bottom: 10px;`
`margin-left`	设置左边距	`margin-left: 5px;`
`margin`	按上、右、下、左的顺序（顺时钟顺序）设置边距	`margin: 20px 15px 10px 5px;`
`margin`	按上下、左右两两设置边距，可以在上下边距相同且左右边距也相同的情况下使用	`margin: 5px 10px;`

三、计算盒子的尺寸

1、默认情况下的盒子尺寸

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

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

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> 默认盒子尺寸 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 88px;
		height: 35px;
		padding: 5px 10px;
		border: 2px solid #FFFFFF;
	    margin: 10px;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

盒子模型分析：
默认盒子尺寸
说明：

整个盒子的宽度 = 内容区域的宽度（width属性值） 88px + 左padding 10px + 右padding 10px + 左border 2px + 右border 2px + 左margin 10px + 右margin 10px = 132px
整个盒子的高度 = 内容区域的高度（height属性值） 35px + 上padding 5px + 下padding 5px + 上border 2px + 下border2px + 上margin 10px + 下margin 10px = 69px

2、使用box-sizing属性调整盒子尺寸

CSS3中提供了box-sizing属性，用来改变盒模式中盒子的宽度和高度的默认计算方法。其常见属性值如下：

属性及值	说明
`box-sizing: content-box;`	由`width`属性和`height`属性定义的宽度和高度，只包含盒子的内容区域，这也是盒子模型默认的方式
`box-sizing: border-box;`	由`width`属性和`height`属性定义的宽度和高度，由盒子的内容区域，padding，border相加组成

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> border-box 盒子尺寸 </title>
	<meta charset="utf-8">
	<style type="text/css">
	  p {
	    width: 88px;
		height: 35px;
		padding: 5px 10px;
		border: 2px solid #FFFFFF;
	    margin: 10px;
		box-sizing: border-box;
	  }
	</style>
  </head>
  <body>
    <p>内容区域</p>
  </body>
</html>

盒子模型分析：
border-box 盒子尺寸
说明：

整个盒子的宽度 = width 88px + 左margin 10px + 右margin 10px = 108px
整个盒子的高度 = height 35px + 上margin 10px + 下margin 10px = 55px

四、一点关于盒子模型的开发实践

1、重置浏览器的默认盒子属性

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

* {
  padding: 0;
  margin: 0;
  border: 0;
}

2、低版本浏览器对HTML5的兼容问题

一些低版本的IE浏览器无法解析HTML5中的许多新增标签（如IE8），导致CSS不起作用。针对这一问题，我们可以使用兼容JavaScript脚本，只需在页面中引入即可，下面是示例：

<head>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
</head>

由于我们只针对低版本IE浏览器，上面的代码可以优化为：

<head>
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->
</head>

在引入JavaScript脚本之后，还需要在样式表中引入样式，将常见的HTML5新增块级标签的display属性值设置为block，下面是示例：

article, aside, figcaption, figure, footer, header, main, nav, section {
  display: block;
}