CSS——盒子模型(margin\padding\border)

最新推荐文章于 2022-09-01 18:11:20 发布

ShyuDai

最新推荐文章于 2022-09-01 18:11:20 发布

阅读量566

点赞数

分类专栏：前端入门——CSS

本文链接：https://blog.csdn.net/qq_39228087/article/details/83057054

版权

前端入门——CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒模型的宽高

p{background-color: #ececec;width: 400px;}

/*也可以设置百分比来进行宽度设置，是相对父元素的百分比宽度*/
.two{max-width: 300px;}
.three{min-width: 250px;}
/*高度属性设置同理*/
<body>
	<p>盒子模型宽度width:400px</p>
	<p class="two">盒子模型最大宽度:300px</p>
	<p class="three">盒子模型最小宽度:250px</p>
	<!-- 盒子模型的计算需要内容的高度加上padding+margin+border，所以在设置盒子的大小的时候是设置内容大小，而不是总体大小 -->
</body>

盒子模型的计算需要内容的高度加上padding+margin+border
所以在设置盒子的大小的时候是设置内容大小，而不是总体大小
在这里插入图片描述

盒模型的边框

边框的颜色

border-color: #0099ee;

边框的样式：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

border-style: dotted;

边框的宽度

border-width: 10px;

border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

展示效果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	p{width: 150px; height: 100px;background-color: #ececec;}
	.one{border-top-width: 10px;border-top-color: #0099ee;border-top-style: solid;}
	.two{border-right-width: 10px;
		border-right-color: #0099ee;
		border-right-style: solid;
		border-top-width: 10px;
		border-top-color: red;
		border-top-style: dotted;
		border-left-width: 5px;
		border-left-color: green;
		border-left-style: double;
		border-bottom-width: 8px;
		border-bottom-color: blue;
		border-bottom-style: dotted;		
		}
	/*单边框设置*/
	/*边框设置可以进行缩写*/
	.three{border-top: 5px red solid;
			border-right: 10px blue dotted;
			border-left: 10px blue dotted;
			border-bottom:  5px red solid;
		}

	</style>
</head>
<body>
	<p class="one">边框属性border</p>
	<p class="two">边框属性border</p>
	<p class="three">边框属性border</p>
</body>
</html>

在这里插入图片描述

盒模型的padding

.one{height: 300px;width: 300px;background-color: #acacac;
		padding-top: 20px;
		padding-left: 30px;
		padding-bottom:50px;
		padding-right: 40px;
	}
	/*那么这个div的高度就是300+20+50，宽度同理*/
	
	.two{
			width: 100px;
			height: 100px;
			padding:10 20;
			}
	/*padding缩写如果一个值就是4个方向都是一个值，
	两个值就是上下和左右各一个，
	三个值就是左右是一个值，
	上下分别是一个值，
	4个值就是上右下左这样顺时针取值*/

在这里插入图片描述

盒模型的margin

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.one
		{
		width: 300px;
		height: 300px;
		background-color: #ececec;
		margin: 10px 20px 30px 40px;
		}
			/*用谷歌浏览器进行F12查看，这是div盒子与body之间的间距*/
			/*margin是外边距，也就是离其他元素的边距，一般在编码前为了不影响编码布局，提前设置margin为0*/
			/*margin: auto;可以设置为水平方向居中*/
			.two
			{
			width: 300px;
			height: 300px;
			background-color: #ececec;
			margin: auto;
			}
			.three
			{
			width:100px;
			height: 100px;
			background-color: blue;
			margin: auto;
			}
			/*当两个垂直边距时，会选取大的外边距 如margin-top:30px;另一个为margin-bottom:20px;则两个盒子之间的距离为30px*/
		
	</style>
</head>
<body>
	<div class="one">margin属性</div>
	<div class="two"><div class="three">margin属性</div></div>
</body>
</html>

在这里插入图片描述

ShyuDai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——盒子模型(margin\padding\border)

盒模型的宽高p{background-color: #ececec;width: 400px;}/*也可以设置百分比来进行宽度设置，是相对父元素的百分比宽度*/.two{max-width: 300px;}.three{min-width: 250px;}/*高度属性设置同理*/&lt;body&gt; &lt;p&gt;盒子模型宽度width:400px&lt;/p&gt; &...
复制链接

扫一扫