CSS盒子模型的基础用法

最新推荐文章于 2024-04-05 03:18:28 发布

端脑

最新推荐文章于 2024-04-05 03:18:28 发布

阅读量268

点赞数

分类专栏：前端文章标签： CSS盒子模型的基础用法

本文链接：https://blog.csdn.net/qq_43776742/article/details/97919978

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

居中
行内元素没有上下外边距
外边距合并
盒子尺寸计算
盒子阴影

居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 300px;
	   	   height: 300px;
	   	   border: 1px solid #ccc;
	   	   text-align: center; /*文字水平居中*/
	   	   margin: 10px auto; /* 盒子居中*/
	   }

	   section {
	   	  width: 400px;
	   	  height: 400px;
	   	  border: 1px solid red;
	   }

	   section img {
            width: 200px;
            height: 210px;
            margin-left: 100px;
            margin-top: 95px;
	   }

	   aside {
	   	   width: 400px;
	   	   height: 400px;
	   	   border: 1px solid pink;
	   	   background: #fff url(xd.jpg) no-repeat;
           background-size: 200px 210px;
           /* 背景图更改位置 用background-position*/
           background-position: 100px  95px; 
	   }
	</style>
</head>
<body>
    <div>文字水平居中</div>	
    <section>
    	<!--插入图片水平居中 图片也是一个盒子 用margin或padding设置-->
    	<img src="xd.jpg" alt="">
    </section>
    <aside>
    	
    </aside>
</body>
</html>

行内元素没有上下外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    * {
	    	padding: 0;
	    	margin: 0;
	    }
	    span {
	    	background: green;
	    	margin: 10px; /**/
	    	padding: 100px;
	    }
	</style>
</head>
<body>
	<span>我是行内元素</span>
</body>
</html>

外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    div {
	    	width: 200px;
	    	height: 200px;
	    	background-color: blue;
	    }

	    div:first-child {
            margin-bottom: 80px; 
	    }

	    div:nth-child(2) {
            background-color: skyblue;
            margin-top: 40px;
	    }

	    .fa {
	    	width: 300px;
	    	height: 300px;
	    	background-color: red;
	    	/* overflow: hidden; */
	    	/* border: 1px solid #ccc; */
	    	padding-top: 1px;

	    	}

	    .son {
	    	width: 200px;
	    	height: 200px;
	    	background-color: yellow;
	    	margin-top: 30px;
	    }
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

盒子尺寸计算

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 100px;
	   	   height: 100px;
	   	   background-color: red;
	   	   border: 4px solid #ccc;
	   	   padding: 20px;
	   	   margin: 40px;

	   	   /* 
	   	      空间尺寸 width+padding+border+margin
	   	      内含实际尺寸 width+border+padding
	   	   */
	   }


	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 44px;
	   	   height: 33px;
	   	   line-height: 33px;
	   	   border: 1px solid #ccc;
	   	   margin: 200px;
	   	   font-size: 16px;
	   	   color: #666;
	   	   border-radius: 5px 0 0 5px;
           padding-left: 15px; 
	   }
	</style>
</head>
<body>
	<div>新闻</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   * {
	   	  padding: 0;
	   	  margin: 0;
	   }
	   div:first-child {
	   	   height: 300px;
	   	   border: 1px solid blue;
	   	   padding-left: 200px; /*盒子没有设置宽度  padding不会影响盒子的宽度*/
	   	   padding-top: 10px;
	   }

	   div:last-child {
	   	   width: 300px;
	   	   height: 40px;
	   	   border: 1px solid pink;
	   }

	   p {
	   	 height: 20px;
	   	 background-color: yellowgreen;
	   	 padding-left: 100px;
	   }
	</style>
</head>
<body>
	<div>奔跑吧 兄弟</div>
	<div>
		<p>
		   摔跤吧 爸爸
	    </p>
    </div>
</body>
</html>

浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式
* {padding: 0; margin: 0}

注意：

行内元素没有上下外边距也没有上内边距
外边距合并垂直的块级盒子以最大的外边距为准(外边距塌陷)
对于两个嵌套关系的块元素，假如父亲没有上内边距和边框，则父亲的上外边距和儿子的上外边距发生合并。
解决方案:
- 给父亲加overflow:hidden
- 给父亲加上内边距或上边框

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   h1 {
	   	   font-size: 90px;
	   	   text-shadow: 10px 3px 3px rgba(0,0,0,0.5);
	   	   color: red;
	   }

	   div {
	   	   width: 200px;
	   	   height: 200px;
	   	   border: 10px solid red;
	   	   /* 水平位置 垂直位置  模糊距离 阴影颜色*/
	   	   box-shadow: 10px 15px 30px rgba(0,0,0,0.4) inset;
	   }
	</style>
</head>
<body>
	<h1>我们一定可以高薪</h1>
	<div></div>
</body>
</html>

水晶图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
        div {
        	width: 249px;
        	height: 249px;
        	line-height: 249px;	
        	text-align: center;
        	border-radius: 50%;
        	margin: 100px;
        	background-color: pink;
        	background: url(shui.jpg) 0 0 no-repeat;
        	font-size: 30px;
        	color: rgba(255,255,255,0.7);
        	box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset, 5px 4px 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
	<div>水晶图片</div>
</body>
</html>

返回盒子模型目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型的基础用法

居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 300px; h...
复制链接

扫一扫