盒子模型
CSS盒子模型
所有元素都可以看成一个盒子
- 一个盒子的内部结构（padding）
- 多个盒子之间相互关系（margin）
- 盒子模型四大属性：content, padding, border, margin；两大辅助性属性：width, height
Content
- 内容类型：文本、图片等多种类型。
- 内容区属性：width, height, overflow (当内容过多，超出width和height时，可以使用overflow属性指定溢出处理方式)
元素的width和height只针对内容区，只有块元素才可以设置width和height，行内元素无法设置，若想对行内元素设定宽高，则利用display将其转换为块元素。
行内元素：a, span, em, q等
块元素：h1, p, div等
若是没有给块元素设定width，则会延展至整行
padding 内边距
- 指内容区和边框之间的空隙，可以看成是内容区的背景区域
- 属性：padding-top, padding-bottom, padding-left, padding-right
margin 外边距
- 指两个盒子之间的距离，可能是父元素与子元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑的连接在一起。
- 属性：margin-top, margin-bottom, margin-left, margin-right, 以及简写
margin: 12px, 20px, 13px, 15px
CSS中外边距属性可以为负值，当外边距为负数时，整个盒子将向指定负值的相反方向移动，从而产生盒子重叠的效果，即“负margin技术”。
border 边框
- 属性：border-width, border-style, border-color, 以及简写
border: 12px, solid, color
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style media="screen">
.box1{
/*设置内容区的宽度和高度*/
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框 盒子大小变为(200+20)px solid实线*/
border-width: 10px 20px 30px 40px;
border-color: yellow blue red green;
border-style: solid dotted dashed double;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfa;
border:10px orange solid;
border-right: none
}
.box3{
display: inline-block;
border: 1px red solid;
/*
padding-top: 20px;
padding-left: 40px;
padding-bottom: 40px;
padding-right: 30px;*/
padding: 20px 10px 100px;
}
/*兄弟元素之间*/
.box4{
width: 300px;
height: 30px;
padding: 20px;
border: 2px hotpink solid;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
/*margin: 20px 40px 60px 80px;顺时针*/
}
/*父子元素之间*/
.father{
display: inline-block; /*将块元素转换为inline-block元素*/
border: 1px solid blue;
}
.son{
display: inline-block;
padding: 20px;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
border:1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">border</div>
<div class="box2"></div>
<div class="box3">padding</div>
<div class="box4">margin</div>
<div class="father">
father
<div class="son">
son
</div>
</div>
</body>
</html>
