CSS样式（边框边距）

最新推荐文章于 2024-07-26 19:29:32 发布

AnyBisks

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量2.5k

点赞数

分类专栏：前端css

本文链接：https://blog.csdn.net/AnyBisks/article/details/78714431

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS样式（边框边距）

1.边框
2.边距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				text-align: center;
				background-color: gainsboro;
			}
			
			.box {
				width: 960px;
				height: 600px;
				background-color: bisque;
				margin: 0px auto;
				/*
				 * 边框
				 * border-top-style: solid 实线	dotted 	点线 	 dashed  虚线;
				 * border-top-color:   边框颜色
				 * border-top-width:   边框粗细	
				 */
				border-top-style: dashed;
				border-top-color: royalblue;
				border-top-width: 5px;
				/*
				 * 边框属性连写 
				 * 特点：没有顺序要求 线形不能少
				 */
				border: royalblue solid 5px;
				/*
				 * 内边距属性：(内边距会撑大盒子)
				 * padding-left: 10px; 	左内边距
				 * padding-right: 20px;	右内边距
				 * padding-top: 30px;	上内边距
				 * padding-bottom: 40px;下内边距
				 * 
				 * 内边距属性连写
				 * padding连写: 20px;   上右下左内边距都是20px
				 * padding连写: 20px 30px;   上下20px   左右30px
				 * padding连写: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40
				 * padding连写:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px
				 *
				 * 内边距撑大盒子的问题
				 * 
				 * 影响盒子宽度的因素
				 * 内边距影响盒子的宽度
				 * 边框影响盒子的宽度
				 * 盒子的宽度=定义的宽度+边框宽度+左右内边距
				 * 
				 * 继承的盒子一般不会被撑大
				 * 包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子,
				 * 只有当你的内边距宽度大于父元素的宽度才会撑大。
				 */
				padding-left: 10px;
				padding-right: 20px;
				padding-top: 30px;
				padding-bottom: 40px;
				padding: 10px;
				/*
				 * 外边距
				 * magin-left: 10px; 	左外边距
				 * magin-right: 20px;	右外边距
				 * magin-top: 30px;	上外边距
				 * magin-bottom: 40px;下外边距
				 * 
				 * 外边距连写
				 * magin: 20px;   上右下左外边距都是20px
				 * magin: 20px 30px;   上下20px   左右30px
				 * magin: 20px  30px  40px;   上外边距为20px  左右外边距为30px   下外边距为40
				 * magin:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px
				 *  
				 * 垂直方向外边距合并
				 * 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
				 * 
				 * 嵌套的盒子外边距塌陷:给垂直方向的内嵌盒子设置外边距的时候，会出现父盒子塌陷的现象。
				 * 解决方法：	1  给父盒子设置边框
           		 *			2给父盒子overflow:hidden;   bfc   格式化上下文
				 *
				 */
				magin-left: 10px;
				magin-right: 20px;
				magin-top: 30px;
				magin-bottom: 40px;
				magin: 10px;
			}
		</style>
	</head>

	<body>

		<div class="box">
		</div>

	</body>

</html>