HTML--盒子模型

liu zhi cheng

于 2024-07-25 21:56:00 发布

阅读量605

点赞数 18

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

本文链接：https://blog.csdn.net/one__piece__/article/details/140700306

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.盒子模型概述

HTML中的盒子模型是一种用于描述和布局元素的概念。每个 HTML 元素都可以被表示为一个矩形的盒子，这个盒子包括四个部分：内容区域、内边距、边框和外边距。

内容区域（content area）：盒子的实际内容，例如文本、图像或其他元素。
内边距（padding）：内容区域和边框之间的空白区域。可以使用 CSS 属性设置内边距的大小。
边框（border）：包围内容区域和内边距的线条。可以使用 CSS 属性设置边框的样式、宽度和颜色。
外边距（margin）：边框和相邻元素之间的空白区域。可以使用 CSS 属性设置外边距的大小。

这些部分的组合形成了一个完整的盒子，它们的大小和位置可以通过 CSS 属性进行调整。盒子模型是用于控制元素在页面上的布局和定位的重要概念，它影响到元素的尺寸、位置和与其他元素的关系。

盒子模型的尺寸

二.边框

boder-color

#所有边框为同色
boder-color:#颜色
#语法中设置的颜色会按照顺时针顺序显示即：上,右，下，中，边框颜色
boder-color: red blue pink yellow

boder-width

#所有边框粗细都是5像素值
boder-width:5px
#语法中设置的像素会按照顺时针顺序显示即：上,右，下，中
boder-width:5px 6px 7px 8px

boder-style

#所有边框种类都是实线
boder-style：solid
#语法中设置的像素会按照顺时针顺序显示即：上,右，下，中
boder-style：solid dotted dashed double

boder-style 属性值
none	没有边框
solid	实线边框
dotted	点状边框
hidden	隐藏边框
dashed	虚线边框
double	双线边框

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{ /**针对所有的盒子模型设置样式，div时盒子模型的一种**/
				width: 300px;
				border: 1px solid rebeccapurple;
			}
            h2{background-color: red;}
            #d1{background-color: aquamarine;}
			#d2{background-color: antiquewhite;}
			#d3{background-color: rebeccapurple;}
            /**结构伪类选择器：选择所有子元素div中的第一个子元素div**/
			div:nth-last-of-type(1) input{border: 3px solid black;}
			div:nth-last-of-type(2) input{border: 3px dashed red;}
			div:nth-last-of-type(3) input{border: 3px dotted blue;}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>会员登录</h2>
			<form action=#"">
				<div id="d1">
					<strong class="name">姓名:</strong>
					<input type="text"/>
				</div>
				<div id="d2">
					<strong class="name">邮箱：</strong>
					<input type="text"/>
				</div>
				<div id="d3">
					<strong class="name">电话</strong>
					<input type="text"/>
				</div>
			</form>
		</div>		
	</body>
</html>

拓展：

盒子居中代码---前提：必须对盒子设置宽度
```
.box{margin:0 auto;}
```
盒子高度和盒子行高一致则盒子中文本内容将垂直居中对齐。

h2{
	font-size: 15px;
    height: 35px;
	line-height: 35px;
   }

三.外边框

设置所有div元素的下外边距

/**设置所有div元素的下外边距**/
div{margin-bottom: 10px;}

设置h2元素的上下外边框

h2{ /**设置h2的下外边框**/
    margin-bottom: 0px;
	/**设置h2的上外边框**/
    margin-top: 0px;
}

四.内边距

归零代码：清除盒子的所有边距

内外边框有各自的默认边距，为防止边距之间冲突，可使用归零代码先清除再单独设置边距

<style type="text/css">
			/**归零代码：清楚盒子的所有边距**/
		*{
		    margin: 0px;
			padding: 0px;
		}
</style>

案例：设置内边距使会员登录字样缩进

<style type="text/css">
		/**归零代码：清楚盒子的所有边距**/
	*{
		margin: 0px;
		padding: 0px;
	}
  .box{
		width: 298px;
		border: 1px solid red;
		margin: 0px auto;
	 }
	h2{
		font-size: 16px;
		background-color: pink;
		height: 35px;
		line-height: 35px;
		color: blue;
		padding-left: 10px;
	}
</style>

五.弹性布局设置

box-sizing是CSS的一个属性，用来设置盒子模型的计算方式。在标准的CSS盒子模型中，当设置一个元素的宽度或高度时，实际显示的宽度或高度会增加边框和内边距的宽度，从而导致元素整体变得更大。

而通过设置box-sizing属性为"border-box"，可以修改盒子模型的计算方式，使得盒子中内容设置的宽度和高度按照盒子的宽度和高度自行改变。这样一来，元素的内容区域的宽度和高度就不会受到边框和内边距的影响，保持和设置的一致。

box-sizing属性值
content-box	盒子的总尺寸依然按照默认公式计算
border-box	根据盒子的总尺寸弹性布局盒子内容的总尺寸

案例：

未设置盒子内容边框时，盒子高度-宽度和内容高度-宽度一致，内容将与盒子紧密贴合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px; padding: 0px;}
			#father{
				width: 100px; height: 100px; 
				border: 10px solid rebeccapurple; 
			}
			#son{
				width: 100px; height: 100px; background-color: cornflowerblue ;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="son"></div>
		</div>
		
	</body>
</html>

盒子中的内容设置边框后将无法适应盒子的宽度和高度，从而超出盒子边界

#son{
		width: 100px; height: 100px; background-color: cornflowerblue ;
		border: 5px solid black;
	}

设置弹性布局后

#son{
	box-sizing: border-box;
	}

六.圆角边框

在HTML中，我们可以使用CSS来为盒子模型添加圆角边框属性，用于设置圆角的弧度。

圆角边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height:100px;
				border: 5px solid rebeccapurple;
				/**使用border-radius设置圆角边框**/
                /**圆形边框四个角度需要和矩形边框的角度一致**/
				border-radius: 100px;
			}
		</style>	
	</head>
	<body>
		<div></div>
	</body>
</html>

半圆边框

div{
	width: 100px;
	height:100px;
	border: 5px solid rebeccapurple;
	/**使用border-radius设置圆角边框
	半圆形边框其中两个角度为0 剩余角度和矩形相同**/
	border-radius: 0px 0px 50px 50px;
	}

扇形边框

div{
	width: 100px;
	height:100px;
	border: 5px solid rebeccapurple;
	/**使用border-radius设置圆角边框
	半圆形边框其中三个角度为0 剩余角度和矩形相同**/
	border-radius: 100px 0px 0px 0px;
	}

七.盒子阴影

案例：

<style type="text/css">
	div{
		width: 100px;
		height:100px;
		border: 5px solid rebeccapurple;
		box-shadow: 5px 5px 10px blue;
	}
</style>

八.练习

liu zhi cheng

关注

18
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录