盒模型
图片出自网上侵权删。
从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距)
padding
<style>
p{
//单方向
padding-top:
padding-left:
pdding-right:
padding-bottom:
}
div{
//上 右 下 左
padding:1px 2px 3px 4px;
//上下左右
padding:1px;
//上下 左右
padding:1px 2px;
//上 左右 下
padding:1px 2px 3px;
}
</style>
border
<style>
p{
//边框大小
border-width:100px;
//边框线形
border-style:dashed;
border-right-color:pink;
//简写:
border:1px solid red;
//上 右 下 左 边框大小 边框线形 边框颜色
border-top: 1px solid red;
borer-right:1px dashed yellow;
border-bottom:1px dotted black;
border-left:1px double green;
//上 右 下 左 各边框颜色
border-color:red bule black yellow;
}
</style>
margin
1、相邻2个元素的margin-bottom 和 margin-top会产生合并。
问题;解决: 给其中一个标签写上 over-flow:hidden;
2、塌陷问题 :父元素与子元素没有浮动(float),子元素的margin-top 会给到父元素 。
解决: 给父元素写上 over-flow:hidden;
div{
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
//简写
margin:10px 20px 30px 40px;
}
二、怪异盒模型
图片出自网上侵权删。
W3c标准的盒子模型(标准盒模型 width=content) 、第二种IE标准的盒子模型(怪异盒模型–怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);)
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgb(155, 146, 187);
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(37, 164, 87);
padding: 20px;
border:1px solid red;
/* 怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);
height指的是内容、边框、内边距总的高度 */
box-sizing: border-box;
}
.box3{
width: 200px;
height: 200px;
background-color: aqua;
border: 1px dashed black;
}
.box4{
width: 80px;
height: 80px;
background-color: rgb(81, 49, 150);
border: 1px dashed rgb(81, 196, 150);
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<!-- W3c标准的盒子模型(标准盒模型 width=content) 、
第二种IE标准的盒子模型(怪异盒模型) -->
<div class="box1">
<div class="box2">
<p>怪异盒模型</p>
</div>
</div>
<div class="box3">
<div class="box4">
<p>标准盒模型</p>
</div>
</div>
</body>
</html>