4、css盒子模型

最新推荐文章于 2024-07-10 15:31:18 发布

日拱一卒无有尽，功不唐捐终入海

最新推荐文章于 2024-07-10 15:31:18 发布

阅读量82

点赞数

分类专栏： # JavaWeb学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/m0_49128301/article/details/120580648

版权

JavaWeb学习笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

4.1、什么是盒子模型

所有的HTML元素，我们都可以看成一个四边形，即一个盒子。

用css来设置元素盒子的内边距、边框和外边距的样式的方式，

相当于设置盒子的样式，所以我们将其称之为盒子模型

边框有四个属性可以设置：

border-top：上边框

border-right：右边框

border-bottom：下边框

border-left：左边框

示例：

也可以在元素选择器中设置border-top 结果一样

效果：

通用性设置：

一次性设置上下左右边框样式为1像素的实体红色线

border：1px solid red；

4.2、边框（border回顾及再阐述）

边框：HTML元素盒子的框体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				
				border-top:1px solid red ;
			}
			div{
				
				border-bottom:1px solid blue ;
			}
			
		</style>
	</head>
	<body>
		<span >上边框</span>
		<div>下边框</div>
	</body>
</html>

4.3、内边距(padding)

内边距;HTML元素里的内容体到 HTML元素边框的距离

内边框有四个属性可以设置：

padding-top：上边框

padding-right：右边框

padding-bottom：下边框

padding-left：左边框

格式：padding-bottom：10px；

表示该文本距离外边框下边的距离是10px

通用性设置：

padding：10px；

表示上下左右距离外边框的距离都是10px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				/*没有外边框时，也可是设置内边框*/
				border: 1px solid red;
				padding-top: 50px ;
			}
		</style>
	</head>
	<body>
		<div>内边框的设置</div>
	</body>
</html>

4.4、外边距margin

外边距：HTML元素边框到其他 HTML元素边框的距离

外边距有四个属性设置：

margin-top：上边距

margin-right：右边距

margin-bottom：下边距

margin-left：左边距

通用性设置：margin：10px；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				border: 10px solid red;
				padding: 10px ;
				/*margin: 10px;也可以通用性设计，上下左右外边距*/
				margin-right: 10px;
				margin-bottom:20px;
			
		</style>
	</head>
	<body>
		<span id="s1">外边距演示</span>
		<span id="s2">span标签的特点是用于展示少量的信息，有多少内容就会占用多少空间</span>
		<div id="d1">div标签的特点是，容量大，内容会自动占满一行</div>
		<div id="d2"> 外边距演示一次</div>
	</body>
</html>

日拱一卒无有尽，功不唐捐终入海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4、css盒子模型

4.1、什么是盒子模型所有的HTML元素，我们都可以看成一个四边形，即一个盒子。用css来设置元素盒子的内边距、边框和外边距的样式的方式，相当于设置盒子的样式，所以我们将其称之为盒子模型边框有四个属性可以设置：border-top：上边框border-right：右边框border-bottom：下边框border-left：左边框示例：<span style=“border-top” solid red；>内容体<span/&gt...
复制链接

扫一扫