html-css标签盒子模型

最新推荐文章于 2024-04-16 19:23:58 发布

白小纯不单纯

最新推荐文章于 2024-04-16 19:23:58 发布

阅读量378

点赞数

分类专栏： html Css 文章标签： html css 盒子模型

本文链接：https://blog.csdn.net/u010713935/article/details/88686408

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Css

1 篇文章 0 订阅

订阅专栏

盒子模型就是两个背景红色做背景黄色在红色上面，然后设置黄色距离红色左右上下的距离，也就是黄色背景在红色背景的位置

盒子的尺寸= 宽高+内边距(padding)+边框(border)

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 内边距: padding,当盒子加了内边距后,相应的盒子尺寸会变大,如果想不改变盒子
			 * 的尺寸,要相应的从宽高减去内边距撑出来的尺寸
			 * 盒子的尺寸= 宽高+内边距(padding)+边框(border) 
			 * 单属性:
			 * padding-left  左内边距
			 * padding-right  右内边距
			 * padding-top    上内边距
			 * padding-bottom  下内边距
			 * 
			 * 复合属性
			 * padding  一个值   上下左右
			 *          两个值   上下     左右
			 * 			三个值    上   左右    下
			 * 			四个值    上  右  下  左
			 */
			.box{
				width: 190px;
				height: 190px;
				background: red;
				padding:10px;
				/*padding-left:10px;
				
			/*	border-left: 10px solid red;*/
			/*padding-top:10px;*/
			/*	padding:10px 20px;*/
				/*padding:10px 20px 30px;*/
				padding:15px 25px 35px 45px;
			}
			.phone{
				width: 50px;
				height: 100px;
				background:yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="phone"></div>
		</div>
	</body>
</html>

在这里插入图片描述

margin

			 * 外边距:margin  盒子与盒子之间的距离
			 * margin的用法和padding一样
			 * 盒子的在网页中的占地面积=宽高+内边距+边框+外边距

白小纯不单纯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css标签盒子模型

盒子模型就是两个背景红色做背景黄色在红色上面，然后设置黄色距离红色左右上下的距离，也就是黄色背景在红色背景的位置盒子的尺寸= 宽高+内边距(padding)+边框(border)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title...
复制链接

扫一扫