主要内容：
1️⃣ CSS布局之浮动
float:即浮动，CSS布局用得最多的一个属性。
效果：元素并排，并且两个元素都能够设置宽度和高度。
要想学好必须要知道的四个特性：
（1）浮动的元素脱标；
（2）浮动的元素互相贴靠；
（3）浮动的元素有“字围“效果；
（4）紧凑的效果
1、元素脱标
脱离标准文档流
原本设置标准文档流中的左上方的第一个盒子，设置了浮动（成了浮动元素，飘了起来），便脱离了
标准流，另一个盒子便渲染到了左上方。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局之浮动属性</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #5bc0de;
float: left;
}
.box2{
width:300px;
height: 300px;
background-color: #1c7430;
}
span{
float: left;
background-color: #6f42c1;
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<div class="box1">
<p>我是小黄</p>
</div>
<div class="box2">
<p>我是小蓝</p>
</div>
<!--/* 此处span标签不需要转成块级元素，也能够设置宽高。-->
<!--所有的标签一旦设置浮动，不仅能够并排，还不区分行内、块状元素，设置宽高*/-->
<span>我是一个小小的span标签</span>
<!--<br>-->
<span>我是一个小小的span标签</span>
</body>
</html>
2、 浮动元素互相贴靠
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box1{
width:200px;
height: 150px;
/*height: 300px;*/
float: left;
background-color: #6f42c1;
}
.box2{
width:300px;
height: 200px;
float: left;
background-color:#b2e567;
}
.box3{
width:400px;
height: 300px;
float: left;
background-color:red;
}
</style>
</head>
<body>
<div class="box1">一哥</div>
<div class="box2">二哥</div>
<div class="box3">三弟</div> </body>
</html>
总结：
如果浏览器页面（父元素）有足够的空间，那么多个盒子（div标签）设置浮动时，则依次从左至右（float设为left时）排列。（以下默认float设置为left）
当浏览器页面（父元素）空间无法容纳并列的盒子的宽度时（比如将浏览器页面缩小），此时位于右侧的盒子就会向左侧贴靠，需要分两种情况讨论：
以上方源码为例：
①当一哥的高度小于二哥时，压缩浏览器页面，三弟向左贴靠，会直接滑到最左侧的边框上，与一哥左侧对齐了。
②当一哥的高度大于二哥时，压缩浏览器页面，三弟向左贴靠，会滑到紧靠一哥的右侧的边框上，与二哥左侧对齐。
3、 浮动元素之字围效果
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素自围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{ float: left;
}
p{
background-color: cyan;
}
</style>
</head> <body>
<div>
<img src="lufei.jpg"></img>
</div>
<p>路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 </p>
</body>
</html>
当div标签设置浮动，p标签不设置浮动时，div挡住了p(div的层级提高)，但是p中的文字不会被遮盖，此时
就形成了字围效果，关于浮动必须要强调的是：浮动一个元素，我们要遵循一个原则，永远不是一个盒子单独浮动，
要浮动就要一起浮动。
4、 浮动元素之紧凑效果
未设置元素的width属性值时，会自动收缩到元素自身的宽度（这一点和行内元素很像）。
· 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素自围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
float: left;
background-color: blueviolet;
} </style>
</head>
<body> <div class="box">浮动元素之紧凑效果</div>
</body>
</html>
2️⃣ 清除浮动带来的问题
方法1：给父盒子设置高度
当子元素设置为浮动后，就脱标了（脱离标准流），不在当前页面上占据位置，不再
填充父元素的高度了，所以导致该父盒子无高度，添加下一个父盒子时，就会顶到左上角
（即上一个父盒子位置），导致两个父盒子相互重叠。
方法2：内墙法（clear:both）
给浮动元素最后面添加一个盒子（div），并且不设置浮动，然后设置clear:both，即清除
别人对我的浮动的影响（此时父盒子father2不再顶在左上角，与父盒子father重叠，而是紧贴
在父盒子father下面）
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消除浮动的方法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.father{
width: 600px;
background-color: #c9ff49;
}
.father ul li{
float:left;
width: 150px;
height:200px;
background-color: #a195ff;
}
.clear{
clear: both;
}
.father2{
width: 500px;
height: 300px;
background-color: #ccdeff;
}
</style>
</head>
<body>
<div class="father">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!--给浮动元素最后面加一个空的div,并且该元素不浮动,然后设置clear:both,-->
</ul>
<div class="clear"></div><!--无缘无故加了div元素，结构冗余-->
</div>
<div class="father2"></div>
</body>
</html>
方法3： 伪元素选择器（给祖先元素加一个类）
<!DOCTYPE HTML>
<html lang="en">
<meta http-equiv="x-ua-compatible" charset="utf-8">
<title>消除浮动元素之伪元素清除法</title>
<head>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
div{
width:400px;
}
div ul li{
float:left;
width:100px;
height:200px;
background-color: #b1ffde;
}
.box1{
width:400px;
height:300px;
background-color: #c9ff49;
}
/*伪元素选择器（给祖先元素加一个类）*/
.clearfix:after{
content:" "; /*看作是一个span标签*/
clear: both;
display: block; /*转换为块状元素*/ /*新浪网清除浮动的方式
content：“.”;
clear:both; 清除别人对我的浮动的影响
display:block;
height:0; 配合下一句使用，使占用空间为0
visibility: hidden; 虽然隐藏，但依然占据空间位置
*/ }
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="box1"></div>
</body> </html>
方法4：overflow:hidden（表示超出部分隐藏）-- 需要在父级元素上设置
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" charset="utf-8">
<title>消除浮动元素之伪元素清除法</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
body{
overflow:auto;
}
.box{
width:200px;
height: 200px;
border:2px solid palegreen;
/*overflow: hidden; !*超出盒子内容部分会被删减，不可见（隐藏）*!*/
/*overflow: auto;!*如果内容被修剪，会以滚动条形式显示其余内容*!*/
/*overflow: scroll; !*内容被修剪，会以滚动条形式显示其余内容*!*/
overflow: inherit;/*继承父级元素的overflow属性*/
} </style>
</head>
<body>
<div class="box"> hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world
</div> </body> </html>
3️⃣ margin塌陷问题
1、当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
而当给盒子设置浮动时，垂直方向上不塌陷。 需注意：水平方向无塌陷问题。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷的问题</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.father{
width:400px;
border: 2px solid darkslategray;
overflow: hidden;
}
.box1{
width:300px;
height:200px;
background-color: #c3d9ff;
margin-bottom: 20px;
float: left;
}
.box2{
width:400px;
height:300px;
background-color:#b2e567;
margin-top: 40px;
float: left;
} </style>
</head>
<body>
<div class="father">
<!--当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
而当给盒子设置浮动时，垂直方向上不塌陷。-->
<div class="box1"></div>
<div class="box2"></div>
</div> </body>
</html>
2、设置水平居中（margin:0 auto）
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷的问题</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box3{
width:800px;
height:60px;
background-color: #2aabd2;
margin:0 auto; /*盒子水平居中*/
text-align: center; /*文字水平居中*/
} </style>
</head>
<body>
<div class="box3">水平居中</div>
</body>
</html>
总结：
（1）使用margin:0 auto 水平居中盒子，必须要设置明确的width,
盒子内的文字水平居中需要使用text-align:center.
（2）只有标准流下的盒子，才能使用 margin:0 quto;
当一个盒子设置浮动了，或者固定定位或绝对定位时，margin:0 auto；
就不能用了。
（3）margin:0 auto 表示水平居中盒子，不是文本，文本要单独用 text-align:center。
4️⃣ 善用父级的padding取代子级的margin
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>善用padding替代margin</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.father{
width:298px;
height:298px;
background-color: #428bca;
/* ① border: 2px solid greenyellow; ①②③三句也可达到效果但不推荐*/ /*推荐方式如下：在父级中写padding替代子级中的margin和父级中的 border */
padding-top:30px;
padding-left: 30px;
}
.son{
width:80px;
height:80px;
background-color: burlywood;
/* ② margin-top:30px;*/
/* ③ margin-left:30px;*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
总结：
子盒子在父盒中设置间距，有两种方式：
一、如上①②③式所示，设置父级的border,子级中设置margin（切记盒子总大小要加上边框border）
二、在父盒中设置padding参数，同时对应减小width和height的参数。 原理：如果父级没有设置border,那么子级margin实际上“挤”的是“流”（标准文档流，即行），所以父级就会被挤掉下来。
5️⃣ 文本属性和字体属性
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性和字体属性</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px solid #b3d7ff;
/*设置字体大小，单位:px（像素）%（占父级元素空间的百分比） rem em */
font-size: 20px;
font-weight: 200;/*范围100-900，依次加粗*/
font-family: "Microsoft YaHei UI","微软雅黑","Adobe Gurmukhi";/*如果第一个无效或无法使用，则取第二个，其余同理*/
text-align:center;/*水平居中*/
text-decoration: underline blue;/*下划线，默认是none*/
cursor:pointer; /*光标*/
/*行高的公式：
当行高=盒子的高度，让文本垂直居中，但是只适用于单行文本*/
line-height: 200px;/*行高，设置行高和盒子高度相同时，文字垂直居中*/
visibility: hidden;
} .box2{
width:400px;
height:120px;
border:1px solid palegreen;
font-weight: 500;
/*font-size: 15px;*/
/*font-family: "Adobe Fan Heiti Std B";*/
/*line-height: 30px;!*一定要大于font-size,否则会挤到一起，一个行高是文字的顶部到下一行文字的顶部的距离*!*/
font: 15px/30px “宋体”; /*这一行等同于上面三行，依次是字体大小，行高，字体*/
padding-top: 30px;
/*一个行高是30px，一共3个行高，那就是90px,总高度是150px,
如果要让多行文本垂直居中在当前的盒子中，则（150-90）/2=30px，
设置padding-top的值为30px,则height要减少30px（padding增加多少对应height减少多少）*/
text-indent: 2em;/*1em等于缩进一个字体大小，开头空两格就设为2em*/
}
</style> </head>
<body>
<div class="box">
我是一个小盒子
</div>
<div class="box2">
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
</div>
</body>
</html>
总结：
使用font-family注意几点：
1、网页中我们要注意使用字体（用户可能没有某些字体），没有时，中文默认宋体；
一般页面中，中文只使用：微软雅黑，宋体，黑体；
英语一般用：Arial,Times New Roman；
英语能够显示英文和中文，但设为中文就只能显示对应的中文。 2、为防止用户电脑没有某个字体，就设置多个字体，中间用英语逗号隔开，
备选字体可以有无数个。 3、讲英语字体放在最前面，如此所有的中文都不能匹配，局自动变为后面的中文字体。
如：font-family:"Times New Roman","微软雅黑","宋体"。
6️⃣ 超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none; /*取消超链接的下划线*/
}
.nav{
width:900px;
margin: 30px auto 0; /*居中显示*/
background-color: #428bca;
overflow: hidden; /*消除float带来的影响*/
border-radius: 5px; /*设置圆角，5代表半径为5px*/
}
.nav ul li{
width:150px;
height:40px;
float: left; /*左浮动，贴靠左侧*/
line-height: 40px;
text-align: center; /*文本居中*/
}
.nav ul li a{
width:150px; /*超链接必须设置宽高，要显示可点击范围*/
height:40px;
display:block; /*a相当于span，行内标签，要设置宽高等必须转成块状元素*/
font-size: 20px; /*字体大小*/
color:white; /*字体颜色，不能继承父级*/
text-decoration: none; /*取消超链接默认的下划线*/
font-family: "Microsoft YaHei UI"; /*设置字体*/
}
/*a标签不继承父元素的color*/
.nav ul li a:hover{
background-color:greenyellow; /*鼠标滑到链接上，显示指定背景色*/
font-size: 25px; /*字体变大*/
}
</style>
</head>
<body>
<div class="nav">
<div>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
<li><a href="">菜单4</a></li>
<li><a href="">菜单5</a></li>
<li><a href="">菜单6</a></li>
</ul>
</div>
</div>
</body>
</html>
7️⃣ 背景属性（颜色，图片，位置）
1、background-color
颜色表示方法有三种：单词、rgb表示法、16进制表示法
（1）单词：如 red,green,blue等。
rgb：红，绿，蓝三原色
rgb（r,g,b） r,g,b的值，每个值的取值范围都是0~255，一共256个值。
如：黑色=rgb(0,0,0)
白色=rgb（255,255,255）
最后显示的颜色是三个数值的叠加。
（2）十六进制表示法
以#开头，后接十六进制数，可以和rgb之间转换（即十六进制转十进制）
十六进制可以简化为3位，所有 #aabbcc的形式，能够简化为 #abc。
如background-color:ff0000;等于background-color:#f00;
background-color:#112233;等于background:#123;
2、background-img
1、平铺图片（铺满盒子）
background-image:url(lufei.jpg);
background-repeat:repeat;
2、不平铺图片
background-image:url(lufei.jpg);
background-repeat:no-repeat;
background-repeat: repeat-x; /*在盒子内仅水平方向平铺*/
background-repeat: repeat-y; /*在盒子内仅垂直方向平铺*/
3、给网页设置背景
body{
background-image:url(lufei.jpg);/*背景如果是一张图片多次填充，图片应选择轴对称的*/
}
4、设置图片位置
background-position: 0 0; /*默认位置为左上角*/
background-position: 100px 100px;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性介绍</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none; /*取消超链接的下划线*/
}
body{
background-image:url(./images/back1.jpg) ;
}
.box{
width:1200px;
height:600px;
/*图片平铺*/
background-image:url(lufei.jpg);
/*background-repeat:repeat;*/
background-repeat: no-repeat; /*图片不平铺*/
/*background-repeat: repeat-x; !*在盒子内仅水平方向平铺*!*/
/*background-repeat: repeat-y; !*在盒子内仅垂直方向平铺*!*/
/*background-position: 0 0; !*默认位置为左上角*!*/
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="box">我的图片</div> </body>
</html>