盒模型
举例说明
Demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>`在这里插入代码片`
<style type="text/css">
div {
height: 300px;
width: 300px;
background-color: blue;
/*padding内边距(内填充)
它是一个复合属性
* padding-left
* padding-right
* padding-top
* padding-bottom
* */
/*padding: 60px;*/
/*padding-left: 40px;
padding-top: 50px;
padding-right: 60px;
padding-bottom: 30px;*/
/*简写的时候会有一个顺序的约定*/
/*上 12 右 3 下 6 左 9 ->顺时针*/
/*padding: 50px 60px 30px 40px;*/
/*padding-left: 40px;
padding-top: 50px;
padding-right: 40px;
padding-bottom: 50px;*/
/*padding: 50px 40px 50px 40px;*/
/*如果简写的值只有两个
第一个就代表上下方向
第二个值就代表左右方向*/
/*padding: 50px 40px;*/
/*padding-left: 40px;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;*/
/*简写为一个值:
就代表四个方向是一样的*/
/*padding: 40px;*/
/* 简写为三个值的时候
第一个值代表上
第二个值代表左右
第三个值代表下*/
padding: 30px 40px 50px;
}
</style>
</head>
<body>
<div>
今天天气真晴朗
</div>
</body>
</html>
## Demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: yellow;
/*border边框,也是一个复合属性
* solid实线
*
*/
/*border-top: 20px solid red;
border-left: 20px solid green;
border-right: 20px solid blue;*/
/*border-bottom: 20px solid black;*/
/*border-bottom-color: pink;
border-bottom-width: 2px;
border-bottom-style: dashed ;*/
/*一般都直接使用border简写方式
有特殊需求特殊处理*/
/*border: 像素 线型 颜色;*/
/*border-top-color: #fff;*/
border: 2px solid red;
}
</style>
</head>
<body>
<div>我就是这么帅，，么有办法</div>
</body>
</html>
## Demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
div {
height: 300px;
width: 300px;
background-color: red;
/*margin外边距
也是个复合属性,用法和padding的取值一样*/
/*margin: 50px;*/
}
.box1 {
/*margin-bottom: 30px;*/
margin-left:40px ;
margin-top: 30px;
padding: 20px 30px 20px;
border: 4px solid #999;
}
总的宽度= width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
= 300 + 30 + 30 + 4 + 4 + 40 + 0
=408
.box2 {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">写点文字，写啥呢</div>
<div class="box2">我是；另一个div</div>
</body>
</html>
## Demo4
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father {
width: 400px;
height: 400px;
background-color: deepskyblue;
/*padding: 100px 0px 0px 100px;*/
/*border: 1px solid #fff;*/
/*overflow: hidden;*/
}
.son {
height: 200px;
width: 200px;
background-color: red;
margin-left: 100px;
/*margin 塌陷*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<!--<p>123</p>-->
<!-- -->
1
<div class="son"></div>
</div>
<!--<div class="father">
</div>-->
</body>
</html>