CSS盒子
1.盒子
盒子：容器
盒子模型 英文： box model。
最常见的盒子是div span
盒子中的区域：content
- 宽 width px content
- 高 height content
- 内边距 padding
- 边框 border
- 外边距 margin
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
用代码来表示就是
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
【注】标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。
盒子的宽不设置时，默认为100%；但是宽度一般会做设置，高度却不一定。
2.内边距
内容与边框的距离。
内边距的区域也会被背景渲染。
padding有四个方向：上下左右。
写法：
- 小属性
- padding-left 左内边距
- padding-right 右内边距
- padding-top 上内边距
- padding-bottom 下内边距
- 复合属性写法
四种写法
- 一写法
padding:20px; 上下左右的padding相等。 - 二写法
padding:20px 10px; 上下 左右。 - 三写法
padding:20px 10px 30px; 上 左右 下。 - 四写法
padding：10px 20px 30px 40px; 上 右 下 左 顺时针。
若只有单个方向的内边距与其他内边距不同，可以先设置总体，再用单一属性单独设置不同的内边距。
3.边框
border 边框
盒子占有的最外层的区域。
border是一个复合属性。
border有三个要素：宽度，线的类型，颜色。
- 按三要素拆分：
border-width 设置宽度
border-style 设置线的类型
border-color 设置颜色 - 按照三要素与方向设置
border-left-width 设置左边框宽度
border-left-style 设置左边框线的类型
border-left-color 设置左边框颜色 - 按照方向设置
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框
4.margin外边距
可以用于盒子盒子之间的距离。
margin有四个方向：上下左右。
写法：
- 小属性
- margin-left 左外边距
- margin-right 右外边距
- margin-top 上外边距
- margin-bottom 下外边距
- 复合属性写法：
四种写法:
- 一值法：
margin:20px; 上下左右的margin相等。 - 二值法：
margin:20px 10px; 上下 左右。 - 三值法：
margin:20px 10px 30px; 上 左右 下。 - 四值法：
margin：10px 20px 30px 40px; 上 右 下 左 顺时针。
auto：代表自适应。
会将剩余的空间自动分配给设置auto的外边距。
margin : 0 auto;
可以让盒子水平居中。
示例1
/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
示例2
/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
示例3
/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
示例4
/*margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
当盒子高度不固定：盒子的内容多少不确定时，为了保证元素的高度始终合适，不会出现大片留白与溢出，这种情况下一般不设置高度，而是用内容去撑开高度。
5.父子盒模型
子盒子的整体占有的位置不要超过父盒子的内容区域若子盒子不设置宽度，会自动撑满父盒子的内容区域。
若不设置宽，只设置内边距和边框，宽度会自适应。
示例：
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
css样式
.father{
width: 300px;
height: 300px;
background-color: seagreen;/*绿色*/
padding: 50px;
}
.son{
height: 200px;
padding-left: 10px;
border: 10px solid #000;/*黑色*/
background-color: sienna;/*赭色*/
}
运行如图
6.外边距塌陷
上下盒子的外边距塌陷
垂直方向上相邻的两个元素，如果都有外边距，则相交的地方会出现外边距重合现象，也叫作外边距塌陷。
在垂直方向上，margin有相遇的部分，不是取两个margin的和，而是取最大值。
示例
<div class="box1">
</div>
<div class="box2">
</div>
css样式
div{
width: 200px;
height: 200px;
}
.box1{
background-color: sienna;
margin-bottom: 20px;
}
.box2{
margin-top: 40px;
background-color: slateblue;
}
盒模型
当margin相遇的部分，一个值为正，一个值为负，结果为两个值的和。
当margin相遇的部分，两个值都为负数，结果为绝对值最大的。
【注】两个上下相邻的同级盒子之间，为了避免出现外边距塌陷，尽量只设置上盒子的底部margin或下盒子的顶部margin。
7.嵌套盒子的外边距塌陷
父盒子没有填充内容，也没有设置顶部边框，那么子盒子的margin-top会让父盒子与子盒子一起掉下来。
示例
<div class="father">
<div class="son">
</div>
</div>
<!--完成父级嵌套关系 -->
css样式
.father {
width: 300px;
height: 300px;
background-color: slateblue;
margin: 0 auto;
border-top: 1px solid;/* 添加填充内容使.son中的margin-top:100px;
有上外边距
*/
}
.son {
width: 100px;
height: 100px;
background-color: tan;
margin-top: 100px;
}
运行结果
解决办法：
1.有填充内容即可。（不推荐）
2.给父盒子添加顶部的边框。（不推荐）
3.将margin换成padding。
同级之间的盒子距离使用margin，父子盒子使用padding。
8.盒模型
盒模型分为两类：
- 标准盒模型
box-sizing: content-box;
设置的width和height是指内容的宽和高。增加内边距与边框会影响盒子的真实尺寸，但不会影响内容区域的大小。 - IE盒模型（怪异盒模型）
box-sizing: border-box;
设置的width和height是指盒子的真实尺寸。增加内边距与边框会影响内容区域的大小，但不会影响盒子的真实尺寸。
示例
<div class="normal">
</div>
<div class="ie">
我是IE，我怕谁
</div>
css样式
.normal {
width: 200px;
height: 200px;
background-color: teal;
/* 默认值 标准盒模型 */
box-sizing: content-box;
}
.ie {
margin-top: 50px;
/* IE盒模型 */
box-sizing: border-box;
padding-left: 50px;/* 增加内边距内容变少 */
width: 200px;
height: 200px;
background-color: tomato;
}
运行查看样式
9.标准文档流
什么叫做标准文档流？
定义：内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。
html网页就是一个标准文档流。
- 空白折叠现象
无论多少个空格，换行 缩进，都会折叠成一个空格。 - 高矮不齐，底部对齐。
- 自动换行。
行内块元素
1.行内块元素与块级元素
标准文档流将HTML元素分为了三种
- 行内元素 inline
- 可以与其他行内元素并排展示。
- 设置宽高无效。
- 实际的宽高，由内容的宽高来决定。
- 块级元素 block
- 独占一行。
- 可以设置宽高
- 行内块元素 inline-block
- 可以设置宽高
- 可以与其他行内元素或行内块元素并排。
容器级标签 div h li dt dd
文本级标签 span p a i em b
行内元素：
除了p标签之外，所有的文本级标签都是行内元素。p标签是文本级标签，但属于块级元素。
块级元素：
所有的容器级标签都是块级元素，包括p标签。
通过display属性来查看当前元素的类型。
也可以通过该属性修改当前元素的类型。
他们之间的转换
示例：
<div>
我是div元素。
</div>
<span>我是span标签</span>
<a href="#">百度一下</a>
<input type="text">
css样式
div {
height: 100px;
width: 200px;
background-color: teal;
display: inline-block;/* 转换行内块元素 */
font-size: 16px;
}
span {
width: 200px;
height: 100px;
background-color: thistle;
display: block;/* 转换块元素 */
}
input {
width: 200px;
height: 100px;
}
运行
块级元素转行内元素：
display:inline; 拥有行内元素的属性，块级元素属性就会失效。
行内元素转块级元素：
display:block; 拥有块级元素的属性，行内元素属性就会失效。
转行内块元素：
display:inline-block；
1.可以设置宽高
2.可以与其他行内元素并排。
2.按显示分类
将html元素按照显示类型分类：
- 替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。 img/input - 非替换元素
不是通过标签的属性来决定显示内容的，而是通过标签所包裹的具体内容来决定。
3.浮动
标准文档流的限制比较多，导致页面效果很多无法实现。
为了可以并排展示，又可以设置宽高，我们可以脱离标准文档流。
css中一共有三种方法可以脱标：
1.浮动
2.绝对定位
3.固定定位
设置浮动的方法：
float：left/right
示例
div:nth-child(1){
float: left;
width: 200px;
height: 300px;
background-color: teal;
}
div:nth-child(2){
float: left;
width: 300px;
height: 300px;
background-color: tomato;
}
运行
4.脱标
设置浮动的元素会脱离标准文档流
浮动会在原来的位置上浮起来。
一个元素一旦浮动，那么就可以并排展示，同时可以设置宽高。
示例
<div class="box1">
</div>
<div class="box2">
</div>
<span class="box3">
</span>
【注】
设置浮动之后，不要再设置display属性了。
元素停靠：
每一个浮动元素都会去紧靠上一个浮动元素。
5.字体围绕效果
给图片设置浮动
示例
达到字围效果。
6.收缩
一个浮动的元素，如果没有设置宽高，那么元素将自动收缩为内容的宽高
示例：
这里只设置的宽，没有设置高，浮动后
元素自动收缩为内容的高。
7.浮动的嵌套
如果浮动的子元素的宽的和大于父盒子的宽，那么后面的子元素会换行。
示例：
先整个小于父盒子的看一下。
试试子元素大于父盒子看看效果：
运行一下
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
