盒⼦模型

盒⼦的内边距(padding)

 padding-left:10px //左边距10px
padding-top:10px //上边距10px
padding-right:10px //右边距10px
padding-bottom:10px //下边距10%，相对于⽗级元素的width
 
padding:10px 10px 10px 10% //等同于上⾯四⾏ 百分⽐是对应⽗标签的⼤⼩
padding:5px 10px //上下边距5px、左右边距10px
padding:5px 10px 20px //上边距 左右边距 下边距
padding:10px //上下左右边距10px

盒⼦的边框(border)

 border-left:3px solid #000 //左边距10px dotted dashed
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000 //下边距10%，相对于⽗级元素的width
border:3px solid #000 //等同于上⾯四⾏

盒⼦的外边距(margin)

 margin-left:10px //左边距10px
margin-top:10px //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于⽗级元素的width
 
margin:10px 10px 10px 10% //等同于上⾯四⾏
margin:5px 10px //上下边距5px、左右边距10px
margin:10px //上下左右边距10px

W3C标准的盒⼦模型（标准盒模型 )

 boxWidth=contentWidth

IE标准的盒⼦模型（怪异盒模型）

 box-sizing:border-box //声明
boxWidth=contentWidth+border+padding

外边距折叠

 上下两个兄弟盒⼦的margin都为正取⼤，都为负取⼩，⼀正⼀负相加
⽗⼦元素盒⼦的margin（假设没有内边距或边框把外边距分隔开），也会合并；只有普通⽂档流中块框的垂直外边距才会发⽣外边距合并。⾏内框、浮动框或绝对定位之间的外边距不会合并

解决⽗⼦边距合并

 ⽗元素{
 overflow:auto;
}
⽗元素::before{
 display: table;
 content: "";
}

代码案例

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .big {
      width: 500px;
      height: 500px;
      background-color: red;
      /* padding:10px */
    }
 
    .small {
      width: 200px;
      height: 200px;
      background-color: blue;
      border: 10px dashed #000
    }
 
    .box {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: green;
      border: 5px solid #000;
      padding: 10px
    }
 
    .top {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: -10px;
    }
 
    .bottom {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: -10px
    }
 
    .father {
      width: 200px;
      height: 200px;
      background-color: red;
    }
 
    .father::before {
      display: table;
      content: ''
    }
 
    .son {
      width: 50px;
      height: 50px;
      background-color: blue;
      margin-top: 20px
    }
  </style>
</head>
 
<body>
  <!-- <div class="big">
    <div class="small">
 
    </div>
  </div> -->
 
  <!-- <br> -->
  <!-- <div class="box">
 
  </div> -->
  <!-- <div class="top"></div>
  <div class="bottom"></div> -->
  <div class="father">
    <div class="son"></div>
  </div>
</body>
 
</html>

posted @ 2022-08-31 07:01 DogLeftover 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· amCharts绘制关联饼图

· seaborn基础使用(二)

· 盒子模型，边框设置

· 内外边距,盒子模型-第九天

· 盒子模型组成部分

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2021-08-31 vue开发：前端项目模板

盒⼦模型

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	padding-left:10px //左边距10px
	padding-top:10px //上边距10px
	padding-right:10px //右边距10px
	padding-bottom:10px //下边距10%，相对于⽗级元素的width

	padding:10px 10px 10px 10% //等同于上⾯四⾏百分⽐是对应⽗标签的⼤⼩
	padding:5px 10px //上下边距5px、左右边距10px
	padding:5px 10px 20px //上边距左右边距下边距
	padding:10px //上下左右边距10px

	border-left:3px solid #000 //左边距10px dotted dashed
	border-top:3px solid #000 //上边距10px
	border-right:3px solid #000 //右边距10px
	border-bottom:3px solid #000 //下边距10%，相对于⽗级元素的width
	border:3px solid #000 //等同于上⾯四⾏

	margin-left:10px //左边距10px
	margin-top:10px //上边距10px
	margin-right:10px //右边距10px
	margin-bottom:10% //下边距10%，相对于⽗级元素的width

	margin:10px 10px 10px 10% //等同于上⾯四⾏
	margin:5px 10px //上下边距5px、左右边距10px
	margin:10px //上下左右边距10px

	box-sizing:border-box //声明
	boxWidth=contentWidth+border+padding

	上下两个兄弟盒⼦的margin都为正取⼤，都为负取⼩，⼀正⼀负相加
	⽗⼦元素盒⼦的margin（假设没有内边距或边框把外边距分隔开），也会合并；只有普通⽂档流中块框的垂直外边距才会发⽣外边距合并。⾏内框、浮动框或绝对定位之间的外边距不会合并

	⽗元素{
	overflow:auto;
	}
	⽗元素::before{
	display: table;
	content: "";
	}

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	.big {
	width: 500px;
	height: 500px;
	background-color: red;
	/* padding:10px */
	}

	.small {
	width: 200px;
	height: 200px;
	background-color: blue;
	border: 10px dashed #000
	}

	.box {
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	background-color: green;
	border: 5px solid #000;
	padding: 10px
	}

	.top {
	width: 100px;
	height: 100px;
	background-color: red;
	margin-bottom: -10px;
	}

	.bottom {
	width: 100px;
	height: 100px;
	background-color: blue;
	margin-top: -10px
	}

	.father {
	width: 200px;
	height: 200px;
	background-color: red;
	}

	.father::before {
	display: table;
	content: ''
	}

	.son {
	width: 50px;
	height: 50px;
	background-color: blue;
	margin-top: 20px
	}
	</style>
	</head>

	<body>
	<!-- <div class="big">
	<div class="small">

	</div>
	</div> -->

	<!-- <br> -->
	<!-- <div class="box">

	</div> -->
	<!-- <div class="top"></div>
	<div class="bottom"></div> -->
	<div class="father">
	<div class="son"></div>
	</div>
	</body>

	</html>