补充
一、盒子的大小
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content - box 默认值，宽度和高度用来设置内容区的大小
border - box 宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区 和 内边距 和 边框的总大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#red{
background-color: red;
width: 200px;
height:200px;
padding: 10px;
border: 10px green solid;
box-sizing: border-box;
}
#yellow{
background-color: yellow;
width: 200px;
height:200px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
</body>
</html>
二、轮廓阴影和圆角
2.1 轮廓阴影
属性：box-shadow
- 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的水平位置，正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色
2.2 圆角度
属性：outline
-
用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响可见框的大小，不会影响布局
属性：border-radius
-
用来设置圆角，圆角设置圆的半径大小
-
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
-
border-radius 可以分别制定四个角度的圆角
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
-
2.3 三个属性整合代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#red{
background: red;
width: 200px;
height: 200px;
}
#red:hover{
/*background: green;*/
box-shadow: 10px 10px 100px deeppink;
border-radius: 100px;
outline: 10px green solid;
}
</style>
<body>
<div id="red"></div>
</body>
</html>
三、浮动
3.1 浮动介绍
-
通过浮动可以使一个元素向其父元素的左侧或右侧移动
-
使用 float 属性来设置于元素的浮动
-
可选值：
- none 默认值，元素不浮动
- left 元素向左浮动
- right 元素向右移动
-
注意：元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
-
3.2 浮动的特点
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点一会发生变化！！！
脱离文档流的特点：
块元素：
1.块元素不在独占页面的一行
2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
注：脱离文档流以后，不需要再区分块和行内元素了
四、高度塌陷和BFC
4.1 高度塌陷的问题
在页面布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流子元素从文档流中脱离将会无法撑起父元素的高度，导致页面的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度坍塌是浮动布局中比较常见的。
4.2 BFC(Block Formatting Context — 块级格式化环境)
BFC是一个CSS中的一个隐藏属性，可以为一个元素开启BFC，
开启BFC该元素会变成一个独立的布局区域
-
元素开启BFC后的特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素外边距不会重叠
- 开启BFC元素可以包含浮动的子元素
-
可以通过一些特殊方式开启元素的BFC
-
设置元素的浮动（不推荐） 因为会脱离文档流导致页面布局混乱，但可以处于文档流中的标签添加clear属性，却也不能完全解决问题。
-
将元素设置为行内块元素（不推荐）
-
将元素的overflow设置为一个非visible的值
— 常用的方式 为元素设置 overflow:hidden 开启BFC，以使其可以包含浮动元素。
-
4.3、clear
由于box1的浮动，导致box3位置上移，也就是box3收到了box1浮动的影响，位置发生了改变。
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性清除浮动元素对当前元素所产生的影响。
-
clear
-
作用：清除浮动元素对当前元素所产生的影响
-
可选值：
left 清楚左侧浮动元素对当前元素的影响 right 清楚右侧浮动元素对当前元素的影响 both 清楚两侧中最大影响的那侧 -
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
-
4.4、使用after伪类解决高度坍塌（方法四）
<!--设置边框上-->
<style>
div::after{
content:'';
display:block;
clear:left;
}
</style>
解释：1.content’’ 现在这个元素的最后添加一个行内元素
2.给这个行内元素转为块元素
3.最后清楚浮动对他的影响
<!--案例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*font{
font-size:50px;
}*/
div#border{
width: 500px;
border: 10px red solid;
/*float: left;*/
/*display: inline-block;*/
/*overflow:hidden;*/
}
div.box1{
box-sizing: border-box;
border: 5px black dashed;
width:200px;
height: 200px;
background: yellow;
float: left;
margin-right: 20px;
}
div#box2{
width:300px;
height: 300px;
background: green;
/*clear: left;*/
}
/*after标签脱离文档流*/
#border::after{
content: '';
display: block;
clear: left;
}
</style>
</head>
<body>
<div id="border">
<div class="box1">
<!--<font>1</font>-->
</div>
<div class="box1"></div>
</div>
<div id="box2">
<!--<font>2</font>-->
</div>
</body>
</html>
4.5 使用clearfix解决高度坍塌问题(方法五)
clearfix这个样式可以同时解决高度坍塌和外边距重叠的问题，当你遇到这些问题时，直接使用clearfix这个类即可。
注：clearfix为需要解决高度坍塌添加的类名（规定）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*font{
font-size:50px;
}*/
div#border{
width: 500px;
border: 10px red solid;
/*float: left;*/
/*display: inline-block;*/
/*overflow:hidden;*/
}
div.box1{
box-sizing: border-box;
border: 5px black dashed;
width:200px;
height: 200px;
background: yellow;
float: left;
margin-right: 20px;
}
div#box2{
width:300px;
height: 300px;
background: green;
/*clear: left;*/
}
/*after标签脱离文档流*/
/*#border::after{
content: '';
display: block;
clear: left;
}*/
/*clearfix*/
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="border" class="clearfix">
<div class="box1">
<!--<font>1</font>-->
</div>
<div class="box1"></div>
</div>
<div id="box2">
<!--<font>2</font>-->
</div>
</body>
</html>
解释：1.content’ ’ 现在这个元素的最后添加一个行内元素
2.给这个行内元素转为table
3.最后清楚浮动对他的影响
这个方法不论是高度塌陷还是外边距重叠的影响都能清楚！！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
