HTML-盒子模型

最新推荐文章于 2023-10-14 16:07:08 发布

Chase℡

最新推荐文章于 2023-10-14 16:07:08 发布

阅读量679

点赞数 1

分类专栏： HTML 前端开发文章标签： html

本文链接：https://blog.csdn.net/qq_29786111/article/details/117043613

版权

前端开发同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

盒子模型在我们的网页构造中非常重要，他可以使你的页面布局更为合理更为美观，下面我们就来讲一下盒子模型的相关属性和它的具体用法。

盒子模型是由内容（content）边框（border）、填充(padding)、边界（margin）共同组成。
内容大小由width和height属性确定
填充(padding) 是指内容与边框之间的间隙。
margin属性值用来控制盒子与盒子之间的间隔。
盒子的实际宽度=左右边界+左右边框+左右填充+内容宽度。
盒子的实际高度=上下边界+上下边框+上下填充+内容高度。
border属性的三个基本要素：宽度（border-width）、颜色(border-color)和线型（border-style）。
先来说第一个基本要素border-width
border-width的属性值可以是长度也可以是百分比，特殊的还有thin（变细）、medium（中等）、thick（加粗）。
第二个基本要素border-color
border-color属性用于设置边框的颜色，取值可以是颜色的关键词也可以是代表颜色的十六进制数值（例如：#000000 黑色，#FFFFFF 白色）
第三个基本要素border-style
border-style属性用于设置边框的样式
取值及说明详看下表

属性值	说明	属性值	说明
dashed	虚线	solid	实线
dotted	点线	insert	嵌入型线
double	双线	outset	嵌出型线
groove	凹形线	none	不显示边框（默认值）
ridge	凸型线

border基本要素在使用时，可以分别设置上下左右四个边框的属性，也可以统一设置，看需求而定。
设置时，若只输入一个取值，则默认设置所有边框样式；
输入两个取值时，则表示为分别设置了上下和左右的边框样式；
输入三个取值时表示分别设置了上、左右、下边框的样式；
输入四个取值时表示分别设置了上、右、下、左（顺时针方向）边框的样式。

三大基本元素实际运用方法

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<title>border属性的基本元素的使用</title>
	<style>
		.font1{border-width:thick; 
			border-style:double ridge;
			border-color:#000000 #5B5B5B #9D9D9D #FFFFFF}
	</style>
</head>
<body bgcolor="#f2eada">
	<div class="font1">
		<pre>
			border-width:medium使边框保持中等粗细 
			border-style:double使上下边框呈现双线条、左右边框呈现凸型线的形式
			border-color:#000000使边框分别呈现黑色、深灰色、浅灰色、白色的状态
		</pre>
	</div>
</body>
</html>

效果展示
在这里插入图片描述

border综合属性，可以同时设置所有的边框样式，也可以只设置某条边框的样式，使用方法：

border:double 4px #FFFFFF

通过单个属性同时设置了线条样式、边框宽度、边框颜色。
这里给大家讲一个平时会经常用到的border属性——border-radius（圆角边框，是CSS3的新属性）属性单位可以是em、px、百分比等。

外边距属性
margin表示的是外边距（边界），用来控制盒子之间的距离，可以通过margin-top(上)、marign-right(右)、marign-bottom(下)、marign-left(左)（逆时针）分别设置外边距的值，为了方便也可以写在一个里面，例如：marign:值1 值2 值3。
取值数不同的效果同border相同
内边距属性
padding表示的是盒子的内边距（填充），使用方法和外边距一样。

float属性
用于控制盒子的浮动
基本语法 float:none/left/right

属性值	说明
none	不浮动（默认值）
left	向父对象的左侧浮动
right	向父对象的右侧浮动

这里我们对盒子模型做一个统一的使用方法的效果展示

<!DOCTYPE html>
<html>
<head>
	<title>border属性的基本元素的使用</title>
	<style>
		.font1{width: 500px;
			border-width:thick; 
			border-style:double ridge;
			border-color:#000000 #5B5B5B #9D9D9D #FFFFFF; 
		    float: left;
		    padding: 12px}
			.font2{width: 500px;
				border: double 4px #009ad6;
				border-radius:10px;
				margin-left: auto;}
	</style>
</head>
<body bgcolor="#f2eada">
	<div class="font1">
		<p>
			border-width:medium使边框保持中等粗细 </br>
			border-style:double使上下边框呈现双线条、左右边框呈现凸型线的形式</br>
			border-color:#000000使边框分别呈现黑色、深灰色、浅灰色、白色的状态</br>
			
			外边距设置为10像素</br>
			向左浮动</br>
			内容与边框的距离为12像素
		</p>
	</div>
	<div class="font2">
		<p>
			设置盒子宽度为500像素</br>
			设置边框属性为双线，宽度为4像素，青色</br>
		设置边框为圆角,圆弧值为10</br>
		左外边距设置为自动
		</p>
	</div>
</body>
</html>

相应的注释在文本区域有对应显示
效果图
在这里插入图片描述

Chase℡

关注

1
点赞
踩
5

收藏

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

border-style属性用来设置边框的样式取值及说明看下表属性值说明属性值说明dashed虚线solid实线dotted点线insert嵌入型线double双线outset嵌出型线groove凹形线none不显示边框（默认值）ridge凸型线外边距属性margin表示的是外边距，用来控制盒子之间的距离，可以通过margin-top(上)、marign-right(右)、marign-bottom(下)、marig
复制链接

扫一扫