css第六次学习

最新推荐文章于 2024-08-17 22:24:13 发布

乾❈ 易直

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量224

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/CSNDshengqian/article/details/109838413

版权

css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

盒子模型的组成

border：边框
padding/margin：内外边距
top：上
right：右
bottom：下
left：左
在这里插入图片描述
通配符：* 初始化网页元素：网页中所有元素的内外边距都为0

		*{
			margin:0px;
			padding:0px;
		}

内边距（padding）


border:10px blueviolet solid;
			边框：border：边框的粗细 边框的颜色 边框的样式；(缺一不可)
			 solid：实线
			 dashed:虚线
			 dotted:点线
			 上 右 下 左
			 	（内边距）padding:10px 10px 10px 10px;
			 	上 右 下 左
			 	
			 	三个值：上 右/左   下
			 	padding:10px 20px 30px;
			 	
			 	两个值：上下/左右 
			 	padding:10px 20px;
			 	
			 	一个值：全部一样的值上下左右
			 	padding:10px ;

外边距（margin）

 	（外边距）margin:10px 10px 10px 10px;
		 	上 右 下 左
		 	
		 	三个值：上 右/左   下
		 	margin:10px 20px 30px;
		 	
		 	两个值：上下/左右 
		 	margin:10px 20px;
		 	
		 	一个值：全部一样的值上下左右
		 	margin:10px ;

盒子的合并与塌陷

.box1>.box2
.box${box$}*2
        	 快速写代码
        	 1.给相邻两个盒子都设置margin,垂直方向外边距取两者中的最大值;
			2.塌陷：嵌套的两个盒子都设置了margin，垂直方向的外边距取最大值；
			合并的解决：只给一个盒子外边距；
			解决方法：1.给父元素加border
			2.给父元素overflow：hidden溢出部分隐藏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子的合并与塌陷</title>
		<style type="text/css">
		div{
		width:200px;
		height:200px;	
			
		}	
		.box1{
			background:pink;
			margin:50px;
		}	
		
		.box2{
			background:palevioletred;
			margin:30px;
			
		}
		.box3{
			background-color:aquamarine;
			width:300px;
			height:300px;
			margin:30px;
			overflow: hidden;
			
		}
		.box4{
			background-color:teal;
			width:200px;
			height:200px;
			margin:50px;
			
		}	
		</style>
	</head>
	<body>
        <div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>

乾❈ 易直

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css第六次学习

盒子模型的组成border：边框padding/margin：内外边距top：上right：右bottom：下left：左border:10px blueviolet solid; /*边框：border：边框的粗细边框的颜色边框的样式； * solid：实线 * dashed:虚线...
复制链接

扫一扫