1.什么是盒子模型（Box Model）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。其中：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。（块与块之间的距离，子级内容与父级边框之间的距离）
- Border(边框) - 围绕在内边距和内容外的边框。（元素的边框）
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。（边框与内容之间的距离）
- Content(内容) - 盒子的内容，显示文本和图像。
下面来写一个盒子模型：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1 {
border: 5px solid #b54237;
width: 150px;
height: 200px
}
#box2 {
border: 1px solid gray;
width: 100px;
height: 150px;
background: pink
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
运行结果：
其中solid为实线，另外还有dashed虚线 、dotted点线 、double双实线。
2.盒子模型边框样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*边框border也属于复合样式*/
body {
height: 200px;
width: 400px;
/*复合样式*/
/* solid实线 dashed虚线 dotted点线 double双实线 */
border: 1px solid black;
}
div {
height: 100px;
width: 200px;
background: pink;
/*边框样式单个书写*/
/*边框厚度*/
/*border-width: 1px;*/
/*边框样式*/
/*border-style: solid;*/
/*边框颜色*/
/*border-color: orange;*/
/*边框弧度*/
/*分为左上，右上，右下，左下角，顺时针*/
/*border-radius:10px;*/
/*如果设置两个弧度，则依次是左上右下,右上左下*/
/*border-radius: 10px 20px;*/
/*如果设置三个弧度，则依次是左上,右上左下,右下*/
/*border-radius: 10px 20px 30px;*/
/*如果设置四个弧度，则依次是左上，右上，右下，左下角，顺时针*/
/*border-radius: 10px 20px 30px 40px;*/
/*单独为某一边设置边框样式*/
/* solid实线 dashed虚线 dotted点线 double双实线 */
border-top: 1px solid red;
border-right: 2px dashed green;
border-bottom: 3px dotted blue;
border-left: 4px double yellow;
}
</style>
</head>
<body>
<div>内容</div>
</body>
运行结果：
3.内边距
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style>
/*内边距padding：边框与内容之间的距离*/
/*内边距会影响快的大小，会使得块变形，会在原来基础上加上内边距的大小
如果要保证原来块的大小不变，我们应该对应的减去原来块大小的宽高
*/
body{
width: 300px;
height: 300px;
border: 1px solid black;
/*单个内边距书写方式*/
padding-top:100px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 100px;
/*复合样式:上右下左，顺时针*/
/*padding: 50px;*/
/*上下，左右*/
/*padding: 50px 60px;*/
/*上，左右，下*/
/*padding:40px 50px 60px;*/
/*上右下左*/
/*padding:25px 25px 25px 25px;*/
/*内边距千万不能设置负值，会使得块内边距样式消失*/
/*padding:30px 40px -50px 60px;*/
}
#box {
width: 200px;
height: 200px;
background: yellow;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
4.外边距
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
/*外边距margin：块与块之间的距离，子级内容与父级边框之间的距离*/
body {
width: 400px;
height: 400px;
border: 1px solid red
}
div{
width: 100px;
height: 100px;
/*把元素变成行内块元素：
1、拥有内联的特点，内容显示在一行，没有宽度时内容撑开宽度
2、保留块的特性，支持宽高样式
3、代码换行和空格会被解析成一个空格
*/
/*display:inline; 内联*/
/*display:block; 块*/
/*display: inline-block;*/
}
#box1 {
background: green;
/*单个内边距书写方式*/
/*margin-top:-50px;*/
/*margin-right: 50px;*/
/*margin-bottom: 50px;*/
/*margin-left: -50px;*/ /*外边距可以为负值*/
/*复合样式:上右下左，顺时针*/
/*margin: 50px;*/
/*上下，左右*/
/*margin: 50px 60px;*/
/*上，左右，下*/
/*margin:40px 50px 60px;*/
/*上右下左*/
/*margin:30px 40px 50px 60px;*/
/*内边距千万不能设置负值，会使得块内边距样式消失*/
/*margin:30px 40px -50px 60px;*/
}
#box2 {
background: pink;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">块2</div>
</body>
将box2居中
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
#box1 {
/*当父级元素没有边框时，会继承子级的外边距*/
width: 400px;
height: 400px;
background: pink;
/*border: 1px solid pink;*/
/*padding-top: 100px;*/
margin: 100px auto 0 auto;
}
#box2 {
width: 100px;
height: 100px;
background: yellow;
/*margin-top: 100px;*/
/*外边距自动计算，移动到两边，两个都写就是居中*/
margin-left: auto;
margin-right: auto;
/*margin-top: auto;*/ /*外边距只针对左右，上下无效*/
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
运行结果：
3.浮动float
浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。
文档流：是文档中可显示对象在排列时所占用的位置。
脱离文档流：已经不占有原来位置。
浮动是我们的float样式，有三个参数：left，right和none，动表示排序，浮是浮起来。
<head>
<meta charset="UTF-8">
<title>浮动float</title>
<style>
/*float 浮动是inline-block的进化版，
保留了行内块元素的特性，唯一不同的是不会解析空格与换行，
1、拥有内联的特点，内容显示在一行，没有宽度时内容撑开宽度
2、保留块的特性，支持宽高样式
3、代码换行和空格不会被解析成一个空格
浮动是我们的float样式，有三个参数：left，right和none
left是从左到右排序浮动（块123），right是从右到左排浮动（块321）
动：排序
浮：浮起来
*/
body{width: 400px;height: 400px;border: 1px solid black}
div{width: 100px;height: 100px;}
/*div{width: 100px;height: 100px;float: left;margin-right: 20px}*/ /*浮动之间也可以加外边距*/
#box1{background: green;}
#box2{background: pink}
#box3{background: blue}
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">块2</div>
<div id="box3">块3</div>
</body>
这里是未加浮动的运行结果：
在div块中加入浮动div{width: 100px;height: 100px;float: left};运行结果：
如果我们只给box1和box2加上浮动，而box3不加浮动，会发现
这种情况是由于块1为浮动状态，相当于气球浮空，它原本的位置空了出来，而块3占用了这个位置，现在我们把快3的宽和高改变一下：#box3{background: blue;width: 200px;height: 200px;}
可以发现块3确实在块1的下方，那么为什么文本内容没有在文字块1的下方呢，这是由于浮表示浮起来，只提升层级半级，只够塞下块元素，本身文字内容塞不下去。所以如果想要正常排版，需要都加上浮动。
浮动也有缺点，即：浮动会带来高度塌陷的问题，父级元素会因为子级元素浮起来而没有高度。
举个例子：我们将div标签的父级元素body的长宽注释掉只留下边框
可以看到，由于块123全部浮起来了，所以body中没有内容支撑它的高度，导致高度坍塌。
解决办法：
-
给父级增加高度（不推荐使用）
即正常添加宽高 -
给父级加
overflow：hidden（超出部分隐藏）
使用这个时需要给父级的上一级也加上overflow：hidden。即分别给body和HTML加上
html{overflow:hidden;}
body{overflow:hidden;}
- 添加一个空的div，在body里添加一个新的div，然后给这个div设置宽高或者只设置高度。
- 使用伪元素：可以当成一个固定样式，撑起父级的高度，解决高度坍塌问题。
body:after{
content: ""; /*伪类元素内容*/
display: block; /*内联变成块*/
clear: both; /*清除after块左右两边的浮动*/
}
959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
