Web全栈~07.标准盒子模型

旧城等待， 2023-01-05 09:52 74阅读 0赞

# Web基本教程~07.盒子模型 #

## [上一期][Link 1] ##

### 前言 ###

所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin）， 边框（border），填充（padding），和实际内容（content）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

### 代码示例 ###

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> .box{ width: 200px; height: 200px; background-color: #20C997; border: 15px solid #80BDFF; padding: 20px; margin: 30px; } </style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

## 标准盒模型 ##

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+ border+margin。

### 内容区域（content） ###

Content 内容区域包含宽度（width）和高度（height）两个属性。块级元素默认宽度为 100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开。块级元素可以设置宽高属性，行内元素设置宽高属性不生效。宽度（width）和高度（height）可以取值为像素（px）和百分比（%）。

### 内边距（Padding） ###

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

##### 单边内边距属性 #####

在 CSS 中，它可以指定不同的侧面不同的填充

padding-top:25px; 
    padding-bottom:25px; 
    padding-right:50px;
    padding-left:50px;

分别代表 上内边距是 25px,右内边距是 50px,下内边距是 25px,左内边距是 50px

##### 简写属性 #####

为了缩短代码，它可以在一个属性中指定的所有填充属性。 这就是所谓的简写属性。所有的填充属性的简写属性是 padding : Padding 属性，可以有一到四个值。

/*上填充为 25px 右填充为 50px 下填充为 75px 左填充为 100px*/
    padding:25px 50px 75px 100px;

/*上填充为 25px 左右填充为 50px 下填充为 75px*/
    padding:25px 50px 75px;

/*上下填充为 25px 左右填充为 50px*/
    padding:25px 50px;

/*所有的填充都是 25px*/
    padding:25px;

### padding 实现导航条案例 ###

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> .nav>li{ float: left; padding: 25px 35px; background-color: #1D1E22; } .nav a{ color: #fff; font-size: 14px; } </style>
    	</head>
    	<body>
    		<ul class="nav">
    			<li><a href="#">推荐</a></li>
    			<li><a href="#">热榜</a></li>
    			<li><a href="#">要闻</a></li>
    			<li><a href="#">小说</a></li>
    			<li><a href="#">历史</a></li>
    			<li><a href="#">科技</a></li>
    			<li><a href="#">直播</a></li>
    		</ul>
    	</body>
    </html>

### 边框（Border） ###

CSS 边框属性允许你指定一个元素边框的样式和颜色,边框样式属性指定要显示什么样的边界。

border-style 属性用来定义边框的样式,border-style 值,none: 默认无边框。

dotted: 定义一个点线边框,dashed: 定义一个虚线边框,solid: 定义实线边框,double: 定义两个边框。 两个边框的宽度和 border-width 的值相同。

##### 边框宽度 #####

您可以通过 border-width 属性为边框指定宽度

.my{ 
    	border-style:solid; 
    	border-width:5px;
    }

##### 边框颜色 #####

border-color 属性用于设置边框的颜色,border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。

.my{ 
    	border-style:solid; 
    	border-color: red;
    }

##### 边框单独设置各边 #####

在 CSS 中，可以指定不同的侧面不同的边框

p{ 
    	border-style:dotted solid;
    }

##### border-style 属性可以有 1-4 个值 #####

/*上边框是 dotted 右边框是solid 底边框是double 左边框是 dashed*/
    border-style:dotted solid double dashed;

/*上边框是 dotted 左、右边框是 solid 底边框是 double*/
    border-style:dotted solid double;

/*上、底边框是 dotted 右、左边框是 solid*/
    border-style:dotted solid;

/*（4）四面边框是 dotted*/
    border-style:dotted;

##### 边框简写属性 #####

border-width
    	border-style (required)
    	border-color

### 外边距（Margin） ###

CSS margin(外边距)属性定义元素周围的空间。

##### 单边外边距属性代码示例 #####

div{ 
    	margin-top:100px; 
    	margin-bottom:100px; 
    	margin-right:50px; 
    	margin-left:50px;
    }

##### 简写属性 #####

/*上边距为 25px 右边距为 50px 下边距为 75px 左边距为 100px*/
    margin:25px 50px 75px 100px;

/*上边距为 25px 左右边距为 50px 下边距为 75px*/
    margin:25px 50px 75px;

/*上下边距为 25px 左右边距为 50px*/
    margin:25px 50px;

/*所有的 4 个边距都是 25px*/
    margin:25px;

### margin 练习案例 ###

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<style> .box{ width: 1240px; margin: 0 auto; } .box>div{ width: 303px; height: 375px; background-color: #20C997; float: left; margin-bottom: 10px; margin-right: 9px; } .box>div:nth-child(4n){ margin-right: 0; } </style>
    	</head>
    	<body>
    		<div class="box">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    	</body>
    </html>

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112279370
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/cf8edf1c3a894ba6a4e9844815541bf4.png