第五章 CSS盒模型

已于 2024-10-10 19:17:25 修改
阅读量1k 收藏 25
点赞数 35
文章标签： css 前端
于 2024-10-09 10:21:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80192878/article/details/142750232
版权

5.1盒模型的定义

        Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
        盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。
如图所示：

5.2 CSS元素的高度和宽度

        当设计者布局一个网页时，网页最终的宽度和高度会超出预计的数值，这是因为盒模型的宽度或高度计算误差造成的。指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。 

5.2.1 盒模型的宽度

        盒模型的宽度=左外边距(margin-left)+左边框(border-let)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(borler-right)+右外边距(margin-right)。

5.2.2 盒模型的高度

        盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(paddling-top )+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)。

5.3 边距设置和边框设置

        margin-border-padding 模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上一右一下一左的顺序(顺时针)。

5.3.1 外边距设置

        外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-right、margin-bottom、margin-left，也可以用 margin 属性一次性设置所有外边距。

5.3.1.1 上外边距

语法:：margin-top : length l percent l auto
参数：lengh 包括长度值和长度单位，包括绝对单位和相对单位。percent 是基于父对象的高度。auto 值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素的 height 属性或 width 属性，或者设定 position 属性为 absolute。

5.3.1.2 右外边距

语法：margin-right : length l percent l auto
参数：同 margin-top。
说明：同 margin-top。

5.3.1.3 下外边距

语法：margin-bottom : length l percent l auto
参数：同 margin-top。
说明：同 margin-top。

5.3.1.4 左外边距

语法：margin-left : length l percent l auto
参数：同 margin-top。
说明：同 margin-top。

5.3.1.5 外边距

语法：margin : length l percent l auto
参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。
说明：设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom(下外边距)、margin-left(左外边距)，外边距始终是透明的。

5.3.2 外边距的合并

通常，盒子与盒子之间的外边距相遇会互相影响，必须对margin属性深入了解，才能精确地控制盒子的位置。

5.3.2.1 行级元素外边距合并

行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

5.3.2.2 块级元素外边距合并

块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

5.3.3 内边距设置

        元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding属性表示，类似于HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受 length 值或 percent值，区别于外边距，内边距不可以使用负值。

 示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第五章CSS盒模型</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img
			{
				width: 40px;
				height: 30px;
			}
		div{
			width: 40px;
			height: 30px;
			border: 10px #ff0000 solid;
			margin: 20px;
			padding: 20px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/photo.jpg"/></div>
		<div><img src="img/photo.jpg"/></div>
	</body>
</html>

运行结果如下

5.3.4 边框设置

        元素外边距内就是元素的边框(border)，它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bottomborder-let 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
        边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用 border属性，可以创建出更佳的边框效果，还可以应用于任何元素。boner属性设置通常有3种:样式(border-style)、宽度(border-width)和颜色(border-color)。

5.3.4.1上边框

语法：border-top : border-style l border-width l border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.2右边框

语法：border-right : border-style l border-width l border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.3下边框

语法：border-bottom : border-style l border-width l border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.4 左边框

语法：border-left : border-style l border-width l border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.5 边框样式

        在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就不会显示。
        border-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有 12个值可选，包括默认(imnital)和无边框(none)。属性值说明见表 

border-style 属性值
属性值说明
initial默认值，默认没有样式
none定义无边框
hidden与 none 相同，但应用于表时，hidden用于解决边框冲突
solid定义实线
dashed定义虚线
dotted定义点线
double定义双线
inherit定义继承父元素边框样式
groove定义 3D 凹型线边框。其效果取决于 border-color 的值
ridge定义 3D凸型线边框。其效果取决于border-color的值
inset定义3D嵌人式边框。其效果取决于border-color 的值
outset定义3D嵌出式边框。其效果取决于border-color 的值

5.3.4.6 边框宽度

        在CSS中，宽度是通过border-width属性来设置边框粗细的。
        与border-slyle属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输入leng 确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。属性值说明见表。

border-width属性值
属性值说明
initial默认值，默认为中等边框
inherit定义继承父元素边框宽度
thin定义细边框
medium定义中等边框
thick定义粗边框

5.3.4.7 边框颜色

        在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的border-style 设置为none或者border-width设置为0，本属性将失去作用。

 示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第五章CSS盒模型</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img
			{
				width: 40px;
				height: 30px;
			}
		div{
			/*5.2.1 盒模型的宽度*/
			width: 40px;
			/*5.2.2 盒模型的高度*/
			height: 30px;
			/*5.3 边距设置和边框设置*/
			/*5.3.1 外边距设置*/
			margin: 20px;
			/*5.3.3 内边距设置*/
			padding: 20px;
			/*5.3.4 边框设置*/
			/*5.3.4.1上边框*/
			border-top: 10px #00ff00 solid;
			/*5.3.4.2右边框*/
			border-right: 10px #ff0000 dashed;
			/*5.3.4.3下边框*/
			border-bottom: 10px #0000ff dotted;
			/*5.3.4.4 左边框*/
			border-left: 10px #000000 double;
			}
		</style>
	</head>
	<body>
		<div><img src="img/photo.jpg"/></div>
		<div><img src="img/photo.jpg"/></div>
	</body>
</html>

运行结果如图所示

5.3.5 新增边框属性

        CSS3中对边框新增了几个属性，设计者可以通过这些属性创建圆角边框、添加边框阴影、使用图片来绘制边框等。

5.3.5.1圆角边框

border-radius：设置边框四个角有弧度成为圆角，需要设置相关参数。

5.3.5.2阴影边框

box-shadow：向四个边框添加一到多个阴影，需要设置相关参数。

5.3.5.3图片绘制边框

border-image：设置所有边框用图片显示，需要嵌人相关图片，但是部分浏览器不支持此属性。

示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第五章CSS盒模型</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img
			{
				width: 40px;
				height: 30px;
			}
			/*5.1盒模型的定义*/
		div{
			/*5.2.1 盒模型的宽度*/
			width: 40px;
			/*5.2.2 盒模型的高度*/
			height: 30px;
			/*5.3.1 外边距设置*/
			margin: 20px;
			/*5.3.3 内边距设置*/
			padding: 20px;
			/*5.3.4.1上边框*/
			border-top: 10px #00ff00 solid;
			/*5.3.4.2右边框*/
			border-right: 10px #ff0000 dashed;
			/*5.3.4.3下边框*/
			border-bottom: 10px #0000ff dotted;
			/*5.3.4.4 左边框*/
			border-left: 10px #000000 double;
			/*5.3.5.1圆角边框*/
			border-radius: 25px;
			/*5.3.5.2阴影边框 右偏移量 下偏移量 模糊距离 颜色*/
			box-shadow: 15px 20px 50px #ffccff;
			/*5.3.5.3图片绘制边框*/

			}
		</style>
	</head>
	<body>
		<div><img src="img/photo.jpg"/></div>
		<div><img src="img/photo.jpg"/></div>
	</body>
</html>

运行结果如图所示

5.4 CSS元素的定位

        前面所讲的盒模型都是标准流情况下可用的，但是盒模型仅有的几种排版对布局有很大的限制，导致元素无法在页面中随意地摆放，因此，我们需要使用盒子的定位(position)来增加排版的灵活性和适应性，
        定位 (position)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position 属性值有4个。
语法：position：staticlrelative l absolute l fixed
参数：static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。ab-solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要 top、right、bottom 和 left属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top、right、bottom 和left 属性辅助完成。

示例代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子</div>
		</div>
	</body>
</html>

运行结果如下仅供参考

5.4.1 static 定位

        static 是 HTML 元素的默认值，不受 top、right、bottom 和left 属性影响，元素出现在正常的文档流中。

5.4.2 relative定位

        relative 不脱离文档流的布局，需要参照父元素的四条边(不是浏览器),oP、right、bottom 和let属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

5.4.3 absolute定位

        absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

5.4.4 fixed定位

fixed 类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置相对于浏览器窗口是固定不变的。

下述示例代码是有关static 定位、relative定位、absolute定位、相对浏览器绝对定位、相对父盒子绝对定位、fixed定位（当启用fix定位时要将相对父盒子绝对定位position: relative;关闭）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
				/*5.4.3.2 相对父盒子绝对定位*/
				/*position: relative;*/
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				/*5.4.2 relative定位*/
				position: relative;
				top: 10px;
				left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 65px;
				margin-top: 50px;
				/*5.4.3.1 相对浏览器绝对定位*/
				position: absolute;
				bottom: 10px;
				right: 30px;
			}
			.son3{
				border: 2px double red;
				background-color: skyblue;
				width: 200px;
				height: 40px;
				/*5.4.4 fixed定位*/
				position: fixed;
				bottom: 10px;
				right: 30px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：相对于父盒子左边水平偏离30像素，相对于父盒子上边垂直偏离10像素
		</div>
		<div class="son2">子盒子2：相对于浏览器右边水平偏离30像素，底部垂直偏离10像素</div>
		<div class="son3">子盒子3：fixed定位（跟随浏览器的翻页滚动而动）
		</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

示例代码运行结果如下显示

5.5 CSS元素的浮动

在CSS的盒模型布局上，除了使用定位避免按照标准流的方式进行排版的限制性问题还可以使用浮动来避免。而使用浮动(loat)和清除(clear)属性设置，可以解决各种页面错位的现象。

 下述为示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.17</title>
		<style type="text/css">
			.father{
				background-color: #FFCCFF;
				border: 2px solid red;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed blue;
				background-color: #CCFFFF;
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
		<div style="float:right">右浮动盒子1</div>
		<div>标准盒子2</div>
		<div>标准盒子3</div>
		<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定</p>
		</div>
	</body>
</html>

运行结果如下

5.5.1 盒子的浮动添加

        一般情况下，页面中的块状元素在水平方向上宽度会自动延伸，直到父元素的边界;而在垂直方向上会按照元素在页面中出现的先后次序依次排列，即所说的标准流排列，如下图所示。
        任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其 hoat属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延伸，大小将由其内容的宽度而定
语法：float : left l right l none
参数：left元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕；right元素浮动到右边，即向右侧靠拢，左边可以有文字环绕；默认值none 就是标准流通常的显示状态。

5.5.2 盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用clear 属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。
语法：clear : left l right l both l none
参数：left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；默认值 none。

以下是盒子的浮动增加和清除代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子浮动的增加和清除</title>
		<style type="text/css">
			.father{
				background-color: #FFCCFF;
				border: 2px solid red;
				padding: 5px;
			}
			.father div{
				width: 100px;
				height: 20px;
				padding: 10px;
				margin: 10px;
				border: 2px dashed blue;
				background-color: #CCFFFF;
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
		/*5.5.1 盒子的浮动添加*/
		<div style="float: right;">标准盒子1</div>
		<div style="float: right;">标准盒子2</div>
		<div style="float: right;">标准盒子3</div>
		/*5.5.2 盒子的浮动清除*/
		<p  style="clear: both;">css中，有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定</p>
		</div>
	</body>
</html>

结果如图所示

5.6 综合案例——昵心美食空间

案例所需图片可在本章资源内下载保存在img文件夹内

如下为示例总代码（前面的style中的代码为CSS有关代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
		*{
		background-color:#FFFF99;
		}
		a{
			color: red;
		}
		.all{
			width: 700px;
			height: 650px;
			margin: 10px auto;
			padding: 5px;
			background-image:url(img/bg1.JPG);
		}
		.banner{
			width: 700px;
			height: 70px;
		}
		.menu{
			width: 690px;
			height: 40px;
			padding: 5px;
		}
		.main{
			width: 700px;
			height: 450px;
			margin: 5px Opx;
			position: relative;
		}
		.left,.right{
			width: 150px;
			height: 440px;
			border: 1px solid #999;
			float: left;
		}
		.middle{
			width: 384px;
			height: 450px;
			margin: 0px 5px;
			float: left;
			font-size: 20px;
			font-family: "楷体";
			font-weight: 700;
			color: #0000FF;
		}
		.one{
			width: 380px;
			height: 155px;
			border: 1px solid #999;
		}
		.two{
			width: 255px;
			height: 100px;
			border: 5px double red;
			margin-top: 20px;
			margin-bottom: 20px;
			border-radius: 25px;
		}
		.three{
			width: 380px;
			height: 135px;
			border: 1px solid #999;
		}
		.bottom{
			width: 700px;
			height: 70px;	
		}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="banner">
		<img src="img/banner.jpg" width="700px" height="70px" />
		</div>
		<div class="menu">
		<img src="img/menu.jpg" width="690px" height="40px" />
		</div>
		<div class="main">
		<div class ="left">
		<marquee direction="up">
			<img src="img/mm_1.jpg" width="150px" height="140px" />
			<img src="img/mm_2.jpg" width="150px" height="140px" />
			<img src="img/mm_3.jpg" width="150px" height="140px" />
			</marquee>
			</div>
			<div class="middle">
			<div class="one">
			<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
			<br><br>
			<img src="img/x_1.jpg" width="80px" height="40px" />
			<img src="img/x_2.jpg" width="80px" height="40px" />
			<img src="img/x_3.jpg" width="80px" height="40px" />
			<img src="img/x_4.jpg" width="80px" height="40px" />
			<img src="img/x_5.jpg" width="80px" height="40px" />
			<img src="img/x_6.jpg" width="80px" height="40px" />
			</div>
			<center>
			<div class="two">
			<h1>昵心美食空间</h1>
			</div>
			</center>
			<div class="three">
			<img src="img/font.jpg" width="25px" height="25px" />团购信息
			<br>
			<a href="#">1.火锅团购</a><br>
			<a href="#">2.烧烤团购</a><br>
			<a href="#">3.自助餐团购</a><br>
			<a href="#">4.新春特惠</a>
			</div>
			</div>
			<div class ="right" >
			<marquee direction="up" >
			<img src="img/good_1.jpg" width="150px" height="140px" />
			<img src="img/good_2.jpg" width="148px" height="140px" />
			<img src="img/good_3.jpg" width="148px" height="140px" />
			</marquee>
			</div>
	        </div>
			<div class="bottom">
			<hr color="#0000FF">
			<center style="font-family:'楷体'";>版权所有&copy;昵心美食空间<br/>
			地址:江门市大学路XXX号邮编:500000 电话:0750-9999999</center>
			</div>
			</div>
	</body>
</html>

运行结果如图所示

不徐耍赖
关注
盒子模型
weixin_44011306的博客
06-25 2708
盒子模型盒子模型标签默认样式：padding内边距border 边框border-styleborder-widthborder-colormargin 外边距使用小技巧：水平居中块儿级元素外边距合并怪异盒子模型 盒子模型 css 盒子模型 (Box Model) 规定了元素处理元素内容、内边距、边框和外边距的方式，在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框不会影响内容区域的尺寸，但是会增加 “盒子” 的实际尺寸，故标准盒子模型中 “盒子” 尺寸的计算公式为：
第五章 - CSS盒模型
zl960320的博客
11-18 265
我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。 1. 盒模型 1. 1 看透网页布局的本质 我们在进行网页布局的过程中，需要做以下准备： 先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质：利用CSS摆放盒子 1.2 盒子模型组成 所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。 CSS盒模型本
第五章 CSS盒模型 案例所需图片
最新发布
10-09
第五章 CSS盒模型 案例所需图片
网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx
11-13
网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型 本章节主要介绍CSS盒模型的概念和应用，包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加...
CSS第五章 CSS盒子模型/标签分类和嵌套规范
晓葉斑比
05-18 1242
CSS五、CSS盒子模型5.1 标准盒子模型5.2 box-sizing样式5.3 盒子模型的一些问题1. margin叠加问题2. margin传递问题扩展 五、CSS盒子模型 5.1 标准盒子模型 组成 : content -> padding -> border -> margin            物品     &
第16章 CSS盒模型[下].pdf
04-27
在HTML5中，CSS盒模型是构建网页布局的核心概念，它决定了元素框处理元素内容（content）、内边距（padding）、边框（border）以及外边距（margin）的方式。在给定的文件内容中，涉及到了CSS盒模型的三个主要学习...
盒子模型...
2301_80063528的博客
02-06 2019
1°先准备好相关的网页元素，网页元素基本都是盒子BOX。 2°利用CSS设置好盒子样式，然后摆放到相应位置。 3°往盒子里面装内容。CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距、和实际内容。border可以设置元素的边框。边框由三部分组成：边框宽度、边框样式、边框颜色语法：border： border-width（定义边框粗细，单位是px） // border-style // border-colorborder-style边框样式：soli
【CSS基础】盒子模型
weixin_42044884的博客
01-25 472
盒子模型概述 盒子模型即 box model，无论是 div、span 还是 a 都是盒子模型。 盒子模型中的区域 Margin（外边距）- 清除边框区域。Margin 没有背景颜色，它是完全透明 Border（边框）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响 Content（内容）- 盒子的内容，显示文本和图像，有 width 和 height 元素的宽度和高度 元素宽度： 总元素的宽度=宽度+左填充+右填充
第五章CSS盒模型
2302_80974792的博客
10-09 676
内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受 length 值或 percent值，区别于外边距，内边距不可以使用负值。说明:设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom下外边距)、margin-left(左外边距)，外边距始终是透明的。
盒子模型语法
Super_Robot的博客
06-09 560
盒子模型应用 边框 border-color border-width border-style border-width thin medium thick 像素值(px) border-top-width：5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width...
盒子模型（box model）
Antoine__的博客
10-13 4901
盒子模型是css中特别重要的一个知识点，今天我和大家一起学习一下。
盒模型详解
热门推荐
langmanboy的博客
04-07 1万+
盒模型 1. 盒模型 CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素 CSS 中组成一个块级盒子需要: Content box（内容）: 这个区域是用来显示内容，大小可以通过设置 width 和 height Padding box（内边距）: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置 Border box（边框）: 边框盒包裹内容和内边距。大小通过 border 相关属性
什么是盒子模型
cj1555640的博客
08-04 3167
java学习第8天:盒子模型部分知识总结
css盒子基础笔记
HXGNMSL的博客
03-03 639
盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） ​ solid：边框为单实线(最为...
CSS盒模型详解（图文教程）
weixin_34380296的博客
07-29 409
本文最初发表于博客园，并在GitHub上持续更新。以下是正文。 盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下...
CSS权重与盒模型深入解析
在学习CSS的过程中，第三天的笔记主要涵盖了上节课的知识复习、权重问题深入、盒模型、标准文档流以及浮动等核心概念。 一、上节课知识复习 复习了CSS的基本属性，如文本样式（加粗、倾斜、下划线）、颜色设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值