HTML—CSS盒子模型(Box Model)

基本介绍:

CSS处理网页时,HTML的每一个标签可以看作是一个盒子,网页布局将指定的标签放到指定的位置上摆放,相当于摆放盒子。

每一个标签(盒子)所包含的内容:从外到内

①外边距(margin)---规定盒子与盒子之间的距离;

②边框(border)---外边距与内边距之间的界限;

③内边距(padding)---内容区与边框之间的距离;

④内容区(content)---盒子的内容,显示文本,图像等。

图片示意:

我们将一间教室比作是一个盒子

内容区:

内容区指的是放置内容的区域,也就是标签中的文本内容,自标签都是存在于内容区

通过width和height两个属性那个可以设置内容区大小,不是盒子大小

width和height属性适用于块级标签和行级快标签

内边距:

内边距指的就是标签内容区与边框以内的空间。

内边距会影响盒子的大小

设置内边距的属性:padding

设置左内边距:padding-left:10px;

设置上内边距:padding-top:10px;

同时设置上下内边距和左右内边距:padding: 10px 20px;

同时设置上右下左不同内边距:padding:10px 20px 30px 40px;

边框:

边框指的就是标签最外层。

边框会影响盒子的大小

边框的样式:

dotted (点线)

dashed (虚线)

solid (实线)

double(双线)

groove (槽线)

设置边框:

border:1px red solid; 分别指定了边框的宽度,颜色,样式

同内边距相同可以使用top/left/right/bottom指定某一位置的边框

border-radius: 5px; 设置四个角为圆角边框,也可以指定某一个角设置

例如:border-top-left-radius设置左上为圆角边框

外边距:

外边距是标签与周围标签之间的空间。

外边距不会影响盒子的大小,但是会影响盒子的位置

设置外边距:

设置左外边距:margin-left:10px;

设置上外边距:margin-top:10px;

同时设置上下外边距和左右外边距:margin: 10px 20px;

同时设置上右下左不同外边距:margin:10px 20px 30px 40px;

左右可以设置为auto,标签会自动居中

设置方法同内边距相同

效果演示

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				background-color: seagreen;
				padding-left: 300px;/* 左内边距 */
				padding-bottom: 50px;/* 下内边距 */
				border: 3px dashed red;/* 边框:3px 虚线 红色 */
				margin: auto;/* 水平居中 */
				margin-top: 50px;/* 上外边距 */
			}
		</style>
	</head>
	<body>

		<div>内容区1</div>
		<div>内容区2</div>

	</body>
</html>

网页效果:由于盒子模型是透明的,所以需要使用检查来对代码进行调试

相关推荐
weixin_ab13 分钟前
【HTML分离术】
前端·html
文心快码BaiduComate27 分钟前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也31 分钟前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong95134 分钟前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan35 分钟前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明200237 分钟前
single-spa原理解析
前端·javascript
一枚前端小能手41 分钟前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
影i1 小时前
CSS Transform 和父元素撑开问题
前端
@大迁世界1 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术