CSS之盒子模型2

最新推荐文章于 2024-10-09 12:38:59 发布

赵日天学java

最新推荐文章于 2024-10-09 12:38:59 发布

阅读量137

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/a16310320524/article/details/104028305

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS之盒子模型2

span{
	background-color: #BBFFAA;
}
.box{
	width: 100px;
	height: 100px;
	background-color: red;
}
.s1{
	/* 盒子模型
	 * contnet padding margin border
	 * 内联元素不能设置 width height
	 * */
	width: 200px;
	height:200px;
	/*内联元素可以设置水平方向的 内边距 padding
	 */
	padding-left: 100px;
	padding-right: 100px;
	/* 垂直方向的内边距
	 * 内联元素可以设置垂直方向的内边距，但不会影响页面布局
	 * */
	padding-top: 50px;
	padding-bottom: 50px;
	/* 为元素设置边框
	 * 但是垂直边框不会影响的页面布局，水平方向会影响布局
	 * */
	border: blue solid 10px;
	/* 水平方向外边距
	 * 内联元素支持水平方向的外边距
	 * */
	margin-left: 100px;
	margin-right: 100px;
	/*内联元素不支持垂直外边距
	 */
	margin-top: 100px;
	margin-bottom: 100px;
}
.s2{
	/*水平方向外边距不会重叠 ,而是求和*/
	margin-left: 100px;
}

下附HTML代码供演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span class="s1">我是一个span</span>
		<span class="s2">我是一个span</span>
		<span>我是一个span</span>
		<span>我是一个span</span>
		<div class="box"></div>
	</body>
	<link rel="stylesheet" type="text/css" href="css/boxModel2.css"/>
</html>