盒子模型
内容区域
<body>
<style>
div{
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
<div>我是一个div标签</div>内边距
内边距：padding
内容区域 与边框之间的距离
块 ： 生效
行内块： 生效
行内： 生效
<style>
div{
display: inline;
width: 200px;
height: 200px;
/*分别设置四个内边距*/
/*padding-top:10px;*/
/*padding-bottom:20px;*/
/*padding-left:30px;*/
/*padding-right:40px;*/
/*连写*/
/*四个方向的内边距都是50px*/
/*padding: 50px;*/
/* 上下 左右*/
/*padding: 50px 80px;*/
/* 上 左右 下*/
/*padding: 50px 80px 30px;*/
/* 上 右 下 左 顺时针方向*/
/*padding: 50px 80px 30px 60px;*/
background-color: red;
}
div:hover{
background-color: red;
}
</style>边框
边框： border
边框： 会改变标签在页面中的实际大小
边框的样式：
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
边框的默认值：
样式是必须的若不设置边框的样式则没有效果：
若只设置边框的演示则：颜色默认为黑色 线宽也有默认值2.4
<style>
div{
width: 200px;
height: 200px;
background-color: #ccc;
padding: 20px;
/*边框的设置*/
/*border-top-color: red;*/
/*border-top-style: solid;*/
/*border-top-width: 50px;*/
/*border-bottom-color: yellow;*/
/*border-bottom-style: solid;*/
/*border-bottom-width: 60px;*/
/*border-right-color: cyan;*/
/*border-right-style: solid;*/
/*border-right-width: 70px;*/
/*border-left-color: pink;*/
/*border-left-style: solid;*/
/*border-left-width: 80px;*/
/*简化版的四个方向*/
/*border-top: 10px solid red;*/
/*border-bottom: 20px solid yellow;*/
/*border-left: 30px solid pink;*/
/*border-right: 40px solid cyan;*/
/*若是四个方向的边框样式都相同*/
/*border: 10px solid red;*/
/*边框的细化*/
/*边框的 样式设置*/
/*border: 10px inset #f00;*/
border-color: red;
border-style: solid;
border-width: 10px;
}
</style>外边距
外边距：
边框与边框之间的距离，元素与元素之间的距离
分别设置四个方向的外边距：
连写：
块： 四边生效
行内： 只有左右没有上下
行内块： 四边生效
特殊注意：
1，块： 若设置为auto则会左右自动居中
2，元素都有左右margin的时候：此时元素中间的间距是 加法 a的边距+b的边距
元素的上下margin的时候： 此时元素之间的间距是 选择 最大的为中间的间距
3，边框塌陷 ：背着爸爸上学 没有墙
子标签 设置margin-top 会出现联动父标签一起往下走
若只想让子标签自己移动 ？
若想只让字标签自己移动，就需要给父标签设置一个上边框
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000;
/*display: inline-block;*/
}
.a{
background-color: #f00;
/*设置四个方向的外边距*/
/*margin-top: 100px;*/
/*margin-bottom: 50px;*/
/*margin-left: 150px;*/
/*margin-right: 200px;*/
/*display: inline-block;*/
/*四个方向*/
/*margin: 100px;*/
/* 上下 左右*/
/*margin: 100px 150px;*/
/* 上 左右 下*/
/*margin: 100px 150px 30px;*/
/* 上 右 下 左*/
/*margin: 100px 150px 30px 70px;*/
/*自动左右居中*/
/*display: inline;*/
/*margin: auto;*/
/*margin-right:100px ;*/
margin-bottom: 100px;
}
.b{
background-color: #0ff;
/*margin-left: 50px;*/
margin-top: 50px;
}
/*去掉所有标签的内外边距*/
*{
margin: 0;
padding: 0;
}
nav{
width: 400px;
height: 400px;
background-color: #f00;
margin-left: 100px;
/*margin-top: 200px;*/
border-top: 1px solid #000;
}
nav > p{
width: 200px;
height: 200px;
background-color: #0ff;
/*margin-left: 100px;*/
margin-top: 200px;
}
</style>