一、盒模型，盒子模型，框模型（box model）
css将页面中所有元素都设置成了一个矩形的盒子
每个盒子都由下面几部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
二、内容区
所有的子元素和文本内容都在内容区排列
内容区的大小由width和height两个属性来设置
width设置内容区宽度 height设置内容区高度
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgb(255, 0, 0);/*255为红色 绿色为0 蓝色也是0 rgb用这三种颜色调色*/
}
</style>
三、边框
边框属于盒子边缘
设置边框，至少三个样式：
边框宽度 border-width（默认值一般是三个像素）
边框颜色 border-color
边框样式 border-style
边框的大小会影响盒子的大小
.box1{
width: 100px;
height: 100px;
background-color:#ff0;/*黄色*/
border-width: 10px;/*边框宽度为10像素*/
border-color: #bfa;/*颜色是豆沙绿*/
border-style: solid;/*实线*/
}
如图所示
边框宽度 border-width：10px表示边框上下左右都是10像素
若border-width：10px 20px 30px 40px对应 上，右，下，左
若border-width：10px 20px 30px 对应 上，左右，下
若border-width：10px 20px对应上下，左右
除了border-width 还有一组border-xxx-width
border-top-width 上边
border-right-width右边
border-bottom-width 下边
border-left-width 左边
如果省略不写，会默认使用color：的值
边框颜色 border-color 也可以指定四个边框的颜色 规则和border-width一样
边框样式 border-style
边框样式 border-style-xxx
xxx可以是solid（实线），dotted（点虚线），dashed（虚线），double（双线） 默认值none（没有边框）
border：简写属性
通过该属性同时设置边框所以相关样式且没有顺序要求（空格隔开）
.box1{
width: 100px;
height: 100px;
background-color:#ff0;
border: solid #bfa 20px;
}
四、内边距（padding）
内容区和边框之间的距离是内边距
一共有四个方向的内边距
padding-top padding-right
padding-bottom padding-left
内边距会影响盒子的大小，盒子的颜色会延伸到内边距上。
.box1{
width: 200px;
height: 200px;
background-color:#ff0;
border: solid #bfa 20px;/*边距*/
padding-top: 10px;/*上方的内边距*/
}
如图，内容区字体上面一行就是页边距，也被延伸了黄色。
padding:可以直接设置四个方向的内边距
为了直观的表示内边距，又建立了一个box2作为box1的子元素，利用div块状元素表示区域样式。
<style>
.box1{
width: 200px;
height: 200px;
background-color:#ff0;
border: solid #bfa 20px;
padding: 10px;/*四个方向的内边距都是10px*/
}
.box2{
background-color: red;
width: 100%;/*宽度是父元素的百分之百*/
height: 100%;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>/*利用子元素将内容区填满红色*/
</div>
</body>
效果图，红色为内容区，黄色为内边距，豆沙绿为边距。
盒子的可见框大小，由内容区，内边距，边框三部分共同决定；
所以在计算盒子大小时，需要将三个区域加到一起计算。
box-sizing:用来设置盒子尺寸的计算方式
box-sizing:content-box;宽度和高度来设置内容区的大小 盒子可见框大小=边框+内边距+内容区
box-sizing:border-box;宽度和高度来设置整个可见框的大小 可见框大小=内容区=初始设置的长*宽
而此时设置边框和内边距时可见框大小也不会变 效果为内容区会减少
这种方法一般是用来固定可见框大小的时候 不用再去相加计算可见框的大小
.box1{
width: 200px;
height: 199px;
background-color:#bfa;
border-top: 1px #bfa solid;
box-sizing: content-box;/*宽度和高度来设置内容区的大小 盒子可见框大小等于边框和内边距以及内容区相加*/
}
五、外边距（margin）
外边距不会影响可见框的大小，但外边距会影响盒子位置
margin会影响到实际盒子所占空间的大小
元素在页面中是自左向右排列的；
所以默认情况下设置的是左上外边距，则会移动元素自身；
而设置下右外边距，会移动其他元素；
外边距同样有四个方向
margin-top上边距 设置一个正值 元素会往下移动
margin-right 默认情况下设置该元素不会产生任何效果
margin-bottom 下边距 设置一个正值 会让下边的元素向下移动
margin-left 左边距 设置一个正值 元素会往右移动
margin也可以设置负值 如果是负值 元素则会向相反的方向移动
<style>
.box1{
width: 200px;
height: 200px;
background-color:#ff0;
border: solid #bfa 20px;
margin-top: 50px;/*元素向下移动50px*/
margin-left:50px;/*元素向右移动50px*/
margin-bottom:50px;/*该元素下面的元素向下移动50px*/
}
.box2{
width: 100px;
height: 100px;
background-color:#f00;
border: solid #aaa 20px;
margin-left:50px;/*元素向右移动50px*/
}
</style>
<body>
<div class="box1"> </div>
<div class="box2"> </div>
</body>
效果图
margin：简写属性 可以同时设置四个方向的外边距
六、元素在水平方向的布局
元素在其水平方向的位置由下列几个元素共同决定
margin-left border-left padding-left
width
margin-right border-right1 padding-right
一个元素在其父元素中，水平布局必须满足以下的等式：
margin-left+border-left+padding-left+width+margin-right+border-right1+padding-right =其父元素内容区的宽度（必须满足该等式）
.box1{
width: 1000px;/*父元素宽度为1000px*/
height: 200px;
background-color:#ff0;
border: solid #bfa 20px;
}
.box2{
width: 500px;
height: 50%;
background-color:#f00;
border: solid #aaa 20px;/*子元素边框border left right都是20px*/
margin-left:50px;/*子元素左边距为50px 意味着元素向右移动50px*/
}
效果
此时margin-left + border-left + padding-left +
width + margin-right + border-right1 + padding-right =其父元素内容区的宽度
该等式不满足 50+20+0+500+0+20+0 ！=（不等于）1000
在等式不成立的情况下，则成其为过渡约束。
此时：
如果所有的值没有为auto的情况，浏览器则会自动调整margin-right的值使其满足
若相加不足以到父元素宽度，则会增加margin-right的值使其满足
若相加已经超过了父元素宽度，则会使margin-right的值为负值-xxx使等式满足，此时子元素已经超过了父元素的宽度
有三个值可以设置成auto
1 width 2 margin-right 3 margin-left
如果某个值为auto 等式不成立时则会自动调整auto的值使等式成立
如果将一个宽度width和一个外边距margin-xxx同时设置为auto，有两个auto
则宽度在等式中调整到最大，其他auto会变成0
如果同时设置三个auto，则外边距都是0，宽度最大。
如果同时将两个外边距设置auto，宽度是指定值，则外边距会设置成相同的值。我们通常利用这个特点使元素在其父元素中居中。
width：100px;/*指定宽度*/
margin：0 auto;/*表示上下外边距为0 作业外边距为auto
此时则会让该元素在其父元素中居中位置*/
若不指定width宽度则width会默认为auto的值
height:100px;/*高度为100px*/
margin-left:20px;
margin-right:20px;/*未设置width的值 那么width默认为auto
即表现为width:auto; 在等式中会调整width的值使等式成立*/
七、垂直方向的布局
父元素的高度不指定默认就会被子元素撑开（子元素多高父元素多高）
定义了高度则就是定义了的高度
没有水平方向必须满足的等式，比较简单
<style>
.box1{
width: 200px;/*父元素未定义高度则会被子元素撑开*/
background-color:#bfa;
border: black solid 5px;
}
.box2{
width: 50px;
height: 100px;/*父元素的高度就是子元素的高度 父元素未定义高度*/
background-color:blue;
}
</style>
<body>
<div class="box1">
<div class="box2"> </div>
</div>
</body>
如图
子元素是在父元素的内容区中排列的，若子元素的高度超过了父元素的高度，则子元素会从父元素的内容区溢出。
使用overflow属性来设置父元素如何处理溢出的子元素
overflow:visible;未设置时此为默认值 设置了也是即子元素会从父元素中溢出
overflow:hidden;溢出的内容不会显示(这种方式不太好)
overflow:scroll;生成两个垂直和水平滚动条，可以查看整个内容
overflow:auto;根据需要生成滚动条，比scroll灵活
overflow-x:设置水平方向的溢出
overflow-y:设置垂直方向的溢出
<style>
.box1{
width: 200px;
height: 200px;
background-color:#bfa;
border: black solid 5px;
}
.box2{
width: 50px;
height: 300px;/*子元素比父元素高度高*/
background-color:blue;
overflow: auto;/*根据需要提供滚动条*/
}
</style>
<body>
<div class="box1">
<div class="box2">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbb
ccccccccccccccccccc </div>/*填一些内容进子元素里*/
</div>
</body>
如图
八、外边距的折叠
垂直外边距的重叠（折叠）
相邻的垂直方向的外边距会发生重叠方向
1.兄弟元素
重叠的外边距会取较大的外边距值
特殊情况： 一正一负 取两者相加 两者都为负值 取绝对值较大的
注：兄弟元素外边距的重叠，是对开发有利的，不用太过修改
<style>
.box1{
width: 200px;
height: 200px;
background-color:#bfa;
margin-bottom: 50px;/*下边距 使该元素的下方元素向下移动*/
}
.box2{
width: 200px;
height: 200px;
background-color:blue;
margin-top: 50px;/*上边距 使该元素向下移动*/
}
</style>
<body>
<div class="box1"></div>
<div class="box2"> </div>
</body>
既然一个元素设置了下外边距，一个元素设置了上边距，理应元素直接距离应该是两者相加50+50=100(px) 但是由于外边距的重叠 只能显示50px 如图
中间为50而不是100px，两个元素是兄弟元素 ，会去取较大值。
2.父子元素
相邻外边距 上边距 子元素会传递给父元素
即：给子元素设置外边距 父元素也会有相同外边距 一起移动
父子元素的重叠会影响页面布局，我们需要进行处理。
问题如图： 想要让蓝色的子元素向下移动到绿色父元素的底部
如果给子元素加上一个上外边距，即让其向下移动
.box1{
width: 200px;
height: 200px;
background-color:#bfa;
}
.box2{
width: 100px;
height: 100px;
background-color:blue;
margin-top: 100px;/*设置一个上外边距*/
}
效果： 父元素也会跟着移动
可以用一个粗略较为麻烦的方法解决
.box1{
width: 200px;
height: 199px;/*设置了边框1 则原先高度200-1*/
background-color:#bfa;
border-top: 1px #bfa solid;/*给父元素设置1px的上边框且颜色和背景颜色一致看不出是边框*/
}
.box2{
width: 100px;
height: 100px;
background-color:blue;
margin-top: 99px;/*由于父元素设置了边框1px 子元素会超出1px 故上边距设置为99px*/
}
效果如图：
更好的方法是通过clear解决
在style中添加以下样式
.clearfix::before,
.clearfix::after{
content:'';/* content 为before after伪元素内添加元素 这里指添加一个空*/
display:table;/*表格 也可以理解把伪元素行内元素转为块元素*/
clear：both;/*消除高度塌陷的影响*/
}
高度塌陷会在后文8.浮动中提到
clerafix可以同时解决高度塌陷和外边距重叠的问题
如上文中box1父元素跟着设置了上边距box2子元素一起移动的问题
在style中添加clearfix样式后 只需在body中 box1的class值后面加上clearfix即可解决外边距的重叠问题
九、行内元素的盒子模型
块状元素如div 行内元素如span 超链接
行内元素特点：
不支持设置宽度width和高度height
可以设置padding（内边距） border（边框）margin（外边距）
但是在垂直方向不会影响页面的布局，即只对水平上起作用。
水平上的总的距离都是相加值，不像垂直方向外边距那样麻烦。
如果非要设置行内元素的宽高
则可以用display：显示元素的类型
- display:inline 将元素设置为行内元素
- display:block 将元素设置为块状元素
- display:inline-block 将元素设置为行内块元素
行内块元素既可以设置宽度和高度，又不会独占一行，使一行中还可以有其他的元素。但行内块元素也兼具了两者的缺点，开发时少用。
4.display:table 将元素设置为一个表格
5.display:none 将元素不在页面中显示，不会占据页面的位置。
span{
display: block;
width:100px;
height:100px;
background-color: #ff0;
}
效果如图，转化为块状元素即可设置它的宽和高。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
