css的选择器：1.基本选择器 2.高级选择器网络
基本选择器包含：前端工程师
标签选择器
标签选择器能够选中全部的标签元素，好比div，ul，li ，p等等，无论标签藏的多深，都能选中，选中的是全部的，而不是某一个，因此说 "共性" 而不是 ”特性“
body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
id选择器
# 选中id
同一个页面中id不能重复。
任何的标签均可以设置id
id命名规范 要以字母 能够有数字 下划线 - 大小写严格区分 aa和AA是两个不同的属性值
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
类选择器
3.1 所谓类 就是class . class与id很是类似 任何的标签均可以加类可是类是能够重复,属于归类的概念。
3.2 同一个标签中能够携带多个类，用空格隔开
类的使用，可以决定前端工程师的css水平到底有多牛逼？
答案：必定要有”公共类“的概念
1 .lv{
2 color: green;
3
4 }
5 .big{
6 font-size: 40px;
7 }
8 .line{
9 text-decoration: underline;
10 }
1 <!-- 公共类 共有的属性 --> 2 <div> 3 <p class="lv big">段落1</p> 4 <p class="lv line">段落2</p> 5 <p class="line big">段落3</p> 6 </div> 7
总结：
- 不要去试图用一个类将咱们的页面写完。这个标签要携带多个类，共同设置样式
- 每一个类要尽量的小，有公共的概念，可以让更多的标签使用
玩好了类 就等于玩好了css中的1/2
到底使用id仍是用class？
答案：尽量的用class。除非一些特殊状况能够用id
缘由：id通常是用在js的。也就是说 js是经过id来获取到标签
03-高级选择器
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
color: red;
}
.container .item p{
color: yellow;
}
子代选择器
使用>表示子代选择器。好比div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{
2 color: yellowgreen;
3 }
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可使用并集选择器
h3,a{
color: #008000;
text-decoration: none;
}
好比像百度首页使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中全部的标签，页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
好比有一个<h4 class='active'></h4>这样的标签。
那么
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
它表示二者选中以后元素共有的特性。
04-属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
语法：
1 /*根据属性查找*/
2 /*[for]{
3 color: red;
4 }*/
5
6 /*找到for属性的等于username的元素 字体颜色设为红色*/
7 /*[for='username']{
8 color: yellow;
9 }*/
10
11 /*以....开头 ^*/
12 /*[for^='user']{
13 color: #008000;
14 }*/
15
16 /*以....结尾 $*/
17 /*[for$='vvip']{
18 color: red;
19 }*/
20
21 /*包含某元素的标签*/
22 /*[for*="vip"]{
23 color: #00BFFF;
24 }*/
25
26 /**/
27
28 /*指定单词的属性*/
29 label[for~='user1']{
30 color: red;
31 }
32
33 input[type='text']{
34 background: red;
35 }
05-伪类选择器
伪类选择器通常会用在超连接a标签中，使用a标签的伪类选择器，咱们必定要遵循"爱恨准则" LoVe HAte
1 /*没有被访问的a标签的样式*/
2 .box ul li.item1 a:link{
3
4 color: #666;
5 }
6 /*访问事后的a标签的样式*/
7 .box ul li.item2 a:visited{
8
9 color: yellow;
10 }
11 /*鼠标悬停时a标签的样式*/
12 .box ul li.item3 a:hover{
13
14 color: green;
15 }
16 /*鼠标摁住的时候a标签的样式*/
17 .box ul li.item4 a:active{
18
19 color: yellowgreen;
20 }
1 /*没有被访问的a标签的样式*/
2 .box ul li.item1 a:link{
3
4 color: #666;
5 }
6 /*访问事后的a标签的样式*/
7 .box ul li.item2 a:visited{
8
9 color: yellow;
10 }
11 /*鼠标悬停时a标签的样式*/
12 .box ul li.item3 a:hover{
13
14 color: green;
15 }
16 /*鼠标摁住的时候a标签的样式*/
17 .box ul li.item4 a:active{
18
19 color: yellowgreen;
20 }
再给你们介绍一种css3的选择器nth-child()
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中全部,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中全部,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
06-伪元素选择器
废话很少说，直接上代码！！！
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....以前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器必定要结合content属性*/
p:before{
content:'alex';
}
/*在....以后 添加内容，使用很是频繁 一般与我们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
07-css的继承性和层叠性
css有两大特性：继承性和层叠性
继承性
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特色：继承了父类的属性和方法。那么咱们如今主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是咱们的css中的继承。
记住：有一些属性是能够继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
可是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
数：id的数量 class的数量 标签的数量，顺序不能乱
/*1 0 0 */显示红色
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
是否是感受明白了呢？好的，再给你们加深点难度。
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再来猜猜我是什么颜色？</p> 5 </div> 6 </div> 7 </div>
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再来猜猜我是什么颜色？</p> 5 </div> 6 </div> 7 </div>
#box1 #box2 p{
color: yellow;
}
#box2 .wrap3 p{
color: red;
}
div div #box3 p{
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
#box1 #box2 p{
color: yellow;
}
#box2 .wrap3 p{
color: red;
}
div div #box3 p{
color: purple;
}
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
好的。那么上面的这个案例你们是否懂了呢？那么接下来咱们继续看案例
仍是上面那个html结构，若是我设置如下css，会显示什么颜色呢。
1 #box2 .wrap3 p{
2 color: yellow;
3 }
4
5 #box1 .wrap2 p{
6 color: red;
7 }
答案是红色的。结论：当权重同样的时候 是之后来设置的属性为准，前提必须权重同样 。‘后来者居上 ’。
Good,咱们继续看下面的css，你来猜如下此时字什么颜色？
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
答案是绿色。哈哈，是否是感受快懵掉了。其实你们只要记住这点特性就能够。第一条css设置的属性值，是经过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟咱们下面选中的标签对比。
那你们猜测一下若是都是被继承来的属性，那么字会显示什么颜色呢？
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
小案例证实：权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。
总结：
1.先看标签元素有没有被选中，若是选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重同样大，后来者居上
2.若是没有被选中标签元素，权重为0。
若是属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性。
08-层叠性权重相同处理
直接上代码，看效果！
第一种现象：当权重相同时，之后来设置的属性为准，前提必定要权重相同
#box2 .wrap3 p{
color: yellow;
}
#box1 .wrap2 p{
color: red;
}
咱们会发现此时显示的是红色的。
第二种现象： 第一个选择器没有选中内层标签，那么它是经过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。
因此 继承来的元素 权重为0。跟选中的元素没有可比性。
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
咱们会发现此时显示的是绿色的。
第三种现象：若是都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
!important 的使用。
!important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,由于使用它会影响页面的布局
09-盒模型
盒模型
在CSS中，"box model"这一术语是用来设计和布局时使用，而后在网页中基本上都会显示一些方方正正的盒子。咱们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。咱们在这里重点讲标准模型。
盒模型示意图
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
若是让你作一个宽高402*402的盒子，您如何来设计呢？
答案有上万种，甚至上一种。
盒模型的计算
若是一个盒子设置了padding，border，width，height，margin(我们先不要设置margin，margin有坑，后面课程会讲解)
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。
另外若是要保持盒子真实的宽度，那么加padding就必定要减width，减padding就必定要加width。真实高度同样设置。
10-padding(内边距)
padding
padding：就是内边距的意思，它是边框到内容之间的距离
另外padding的区域是有背景颜色的。而且背景颜色和内容的颜色同样。也就是说background-color这个属性将填充全部的border之内的区域
padding的设置
padding有四个方向，分别描述4个方向的padding。
描述的方法有两种
一、写小属性,分别设置不一样方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
二、写综合属性，用空格隔开
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
好比ul标签，有默认的padding-left值。
那么咱们通常在作站的时候，是要清除页面标签中默认的padding和margin。以便于咱们更好的去调整元素的位置。
咱们如今初学可使用通配符选择器
*{
padding:0;
margin:0;
}
But，这种方法效率不高。
因此咱们要使用并集选择器来选中页面中应有的标签（不一样背，由于有人已经给我们写好了这些清除默认的样式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
11-border(边框)
边框
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
border: solid
若是颜色不写，默认是黑色。若是粗细不写，不显示边框。若是只写线性样式，默认的有上下左右 3px的宽度,实体样式，而且黑色的边框。
按照3要素来写border
border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
按照方向划分
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;
上面12条语句，至关于 bordr: 10px solid red;
另外还能够这样：
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;
border:none；
border：0；
表示border没有设置样式。
使用border来制做小三角
/*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
12-简单认识下margin
margin
margin：外边距的意思。表示边框到最近盒子的距离。
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px;
margin-bottom: 100px;
13-标准文档流
什么是标准文档流
宏观的将，咱们的web页面和ps等设计软件有本质的区别，web 网页的制做，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
标准文档流下 有哪些微观现象？
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，若是在一行内写img标签，就解决了这个问题，可是咱们不会这样去写咱们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让咱们页面的元素出现高矮不齐的现象，可是在浏览器查看咱们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写
若是在一行内写文字，文字过多，那么浏览器会自动换行去显示咱们的文字。
14-块级元素和行内元素
学习的初期，咱们就要知道，标准文档流等级森严。标签分为两种等级：
- 行内元素
- 块级元素
好比h1标签和span，同时设置宽高，来看浏览器效果，那么你会发现：
行内元素和块级元素的区别：（很是重要）
行内元素：
- 与其余行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其余任何元素并列；
- 能接受宽、高。若是不设置宽度，那么宽度将默认变为父亲的100%。
块级元素和行内元素的分类：
在之前的HTML知识中，咱们已经将标签分过类，当时分为了：文本级、容器级。
从HTML的角度来说，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
PS：为甚么说p是文本级标签呢？由于p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
如今，从CSS的角度讲，CSS的分类和上面的很像，就p不同：
-
行内元素：除了p以外，全部的文本级标签，都是行内元素。p是个文本级，可是是个块级元素。
-
块级元素：全部的容器级标签都是块级元素，还有p标签。
块级元素和行内元素的相互转换
咱们能够经过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素能够转换为行内元素：
一旦，给一个块级元素（好比div）设置：
display: inline;
那么，这个标签将当即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
- 此时这个div不能设置宽度、高度；
- 此时这个div能够和别人并排了
行内元素转换为块级元素：
一样的道理，一旦给一个行内元素（好比span）设置：
display: block;
那么，这个标签将当即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span可以设置宽度、高度
- 此时这个span必须霸占一行了，别人没法和他并排
- 若是不设置宽度，将撑满父亲
标准流里面的限制很是多，致使不少页面效果没法实现。若是咱们如今就要并排、而且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
15-浮动
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
看一个例子
html结构：
<div class="box1"></div> <div class="box2"></div> <span>路飞学城</span>
css样式：
.box1{
width: 300px;
height: 300px;
background-color: red;
float:left;
}
.box2{
width: 400px;
height: 400px;
background-color: green;
float:right;
}
span{
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
咱们会发现，三个元素并排显示，.box1和span由于是左浮动，紧挨在一块儿，这种现象贴边。.box2盒子由于右浮动，因此紧靠着右边。
那么浮动若是你们想学好，必定要知道它的四大特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
浮动元素脱标
脱标：就是脱离了标准文档流
看例子
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>小马哥</span>
<span>小马哥</span>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
background-color: green;
float: left;
width: 300px;
height: 50px;
}
效果：红色盒子压盖住了黄色的盒子，一个行内的span标签居然可以设置宽高了。
缘由1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。因此就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议你们这样叫。
缘由2：全部的标签一旦设置浮动，就可以并排，而且都不区分行内、块状元素，都可以设置宽高
浮动元素互相贴靠
看例子
html结构
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
css样式
.box1{
width: 100px;
height: 400px;
float: left;
background-color: red;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
效果发现：
若是父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
若是没有足够的空间，那么就会靠着1哥，若是再没有足够的空间靠着1哥，本身往边靠
浮动元素字围效果
html结构：
<div>
<img src="./images/企业1.png" alt="">
</div>
<p>
123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
</p>
css样式：
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提升，可是p中的文字不会被遮盖，此时就造成了字围效果。
浮动元素紧凑效果
收缩：一个浮动元素。若是没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
html结构：
<div>
alex
</div>
css样式：
div{
float: left;
background-color: red;
}
你们必定要谨记：关于浮动，咱们初期必定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一块儿浮动。另外，有浮动，必定要清除浮动，
为何要清除浮动
在页面布局的时候，每一个结构中的父元素的高度，咱们通常不会设置。（为何？）
你们想，若是我初版的页面的写完了，感受很是爽，忽然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我以为图片要缩小一下。这样的需求在工做中很是常见的。真想打他啊。那么此时做为一个前端小白，确定是去每一个地方加内容，改图片，而后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是确定的。
看一个效果：
html效果：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
css样式：
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮动 父盒子通常不设置高度*/
/*出现这种问题，咱们要清除浮动带来影响*/
/*height: 300px;*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
效果发现：若是不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
那么咱们知道，浮动元素确实能实现咱们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！因此咱们要清除浮动
还好还好。咱们有多种清除浮动的方法，在这里给你们介绍四种：
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow：hidden
给父盒子设置高度
这个方法给你们上个代码介绍，它的使用不灵活，通常会经常使用页面中固定高度的，而且子元素并排显示的布局。好比：导航栏
clear：both
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不容许有浮动元素
right：当前元素右边不容许有浮动元素
both：当前元素左右两边不容许有浮动元素
给浮动元素的后面加一个空的div，而且该元素不浮动，而后设置clear：both。
html结构：
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
<!-- 给浮动元素最后面加一个空的div 而且该元素不浮动 ，而后设置clear:both 清除别人对个人浮动影响-->
<!-- 内墙法 -->
<!-- 平白无故加了div元素 结构冗余 -->
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
css样式
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
伪元素清除法(经常使用)
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，而后设置
.clearfix:after{
/*必需要写这三句话*/
content: '.';
clear: both;
display: block;
}
新浪首页推荐伪元素清除法的写法
/*新浪首页清除浮动伪元素方法*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow:hidden(经常使用)
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便元素框中能够放下全部内容也会出现滚动条。
有五个值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈如今元素框以外。 |
| hidden | 内容会被修剪，而且其他内容是不可见的。 |
| scroll | 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。 |
| auto | 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域: http://www.javashuo.com/article/p-ezyacvwn-v.html
到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，你们必定要熟记于心。
16-margin的用法
margin塌陷问题
当时说到了盒模型，盒模型包含着margin，为何要在这里说margin呢？由于元素和元素在垂直方向上margin里面有坑。
咱们来看一个例子：
html结构：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css样式：
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么咱们称这种现象叫塌陷。无法解决，咱们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。
当咱们给两个标准流下的兄弟盒子设置浮动以后，就不会出现margin塌陷的问题。
margin：0 auto;
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
当一个div元素设置margin：0 auto;时就会居中盒子，那咱们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；咱们发现盒子尽量大的右边有很大的距离，没有什么意义。当设置margin-right:auto；咱们发现盒子尽量大的左边有很大的距离。当两条语句并存的时候，咱们发现盒子尽量大的左右两边有很大的距离。此时咱们就发现盒子居中了。
另外如何给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
另外你们必定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
善于使用父亲的padding，而不是margin
若是让你们实现如图的效果，应该有很多的同窗作不出来。
那么咱们来看看这个案例，它的坑在哪里？
下面这个代码应该是你们都会去写的代码。
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
由于父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,因此父亲掉下来了，一旦给父亲一个border发现就行了。
那么问题来了，咱们不可能在页面中平白无故的去给盒子加一个border，因此此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
17-文本属性和字体属性
文本属性
介绍几个经常使用的。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小，若是设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
若是浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。若是都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，否则上下字之间会紧挨一块儿。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改成225px;
font-family介绍
使用font-family注意几点：
1.网页中不是全部字体都能用哦，由于这个字体要看用户的电脑里面装没装，
好比你设置： font-family: "华文彩云"; 若是用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文咱们只使用： 微软雅黑、宋体、黑体。
若是页面中，须要其余的字体，那么须要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说若是用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体能够有无数个，用逗号隔开。
3.咱们要将英语字体，放在最前面，这样全部的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.全部的中文字体，都有英语别名，
咱们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性可以将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高能够用百分比，表示字号的百分之多少。
通常来讲，都是大于100%的，由于行高必定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，好比： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”。
18-超连接导航栏案例
直接上代码了
html结构
<div class="nav">
<ul>
<li>
<a href="">路飞学城</a>
</li>
<li>
<a href="">老男孩</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
写好上面的结构代码以后，也就是将咱们页面展现的内容显示了，可是咱们此时要利用咱们学过的知识点来布局页面
首先咱们要作导航栏，并排显示元素，第一想 浮动，想到使用浮动以后，必定记得清除浮动元素。
css代码以下：
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
19-background
先来说讲颜色表示法
一共有三种：单词、rgb表示法、十六进制表示法
rgb:红色 绿色 蓝色 三原色
光学显示器，每一个像素都是由三原色的发光原件组成的，靠明亮度不一样调成不一样的颜色的。
用逗号隔开，r、g、b的值，每一个值的取值范围0~255，一共256个值。
若是此项的值，是255，那么就说明是纯色：
黑色：
background-color: rgb(0,0,0);
光学显示器，每一个元件都不发光，黑色的。
白色：
background-color: rgb(255,255,255);
颜色能够叠加，好比黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);
再好比：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜色的不一样比例叠加。
16进制表示法
红色：
background-color: #ff0000;
全部用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，可是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。因此等价于rgb(255,0,0);
怎么换算的？咱们介绍一下
咱们如今看一下10进制中的基本数字（一共10个）:
0、一、二、三、四、五、六、七、八、9
16进制中的基本数字（一共16个）:
0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f
16进制对应表：
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。
16进制中的2b等于10进制多少？
答：2*16+11 = 43。
16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175
16进制中的ff等于10进制多少？
答：15*16 + 15 = 255
因此，#ff0000就等于rgb(255,0,0)
background-color: #123456;
等价于：
background-color: rgb(18,52,86);
因此，任何一种十六进制表示法，都可以换算成为rgb表示法。也就是说，两个表示法的颜色数量，同样。
十六进制能够简化为3位，全部#aabbcc的形式，可以简化为#abc;
好比：
background-color:#ff0000;
等价于
background-color:#f00;
好比：
background-color:#112233;
等价于
background-color:#123;
只能上面的方法简化，好比
background-color:#222333;
没法简化！
再好比
background-color:#123123;
没法简化！
要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
background-color属性表示背景颜色
background-img:表示设置该元素的背景图片
那么发现默认的背景图片，水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式
属性值：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
给元素设置padding以后，发现padding的区域也会平铺背景图片。
repeat应用案例
仍是上面那个超连接导航栏的案例，咱们给body设置平铺的图片，注意：必定找左右对称的平铺图片，才能实现咱们要的效果
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置
属性值：
| 值 | 描述 |
|---|---|
|
若是您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一块儿。 |
雪碧图技术（精灵图技术）
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分
CSS 雪碧图应用原理：
只有一张大的合并图， 每一个小图标节点如何显示单独的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
使用雪碧图的好处：
一、利用CSS Sprites能很好地减小网页的http请求，从而大大的提升页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由；
二、CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。
三、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。
四、更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便
不足：
1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
咱们可使用background综合属性制做通天banner，什么是通天banner呢，就是通常咱们电脑的屏幕都是1439.可是设计师给咱们的banner图都会比这个大，
那么咱们能够此属性来制做通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach
设置fixed以后，该属性固定背景图片不随浏览器的滚动而滚动
20-定位
定位
定位有三种：
1.相对定位 2.绝对定位 3.固定定位
这三种定位，每一种都暗藏玄机，因此咱们要一一单讲。
相对定位
相对定位:相对于本身原来的位置定位
现象和使用：
1.若是对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位以后，咱们才可使用四个方向的属性： top、bottom、left、right
特性：
1.不脱标
2.形影分离
3.老家留坑（占着茅房不拉屎，恶心人）
因此说相对定位 在页面中没有什么太大的做用。影响咱们页面的布局。咱们不要使用相对定位来作压盖效果
用途：
1.微调元素位置
2.作绝对定位的参考（父相子绝）绝对定位会说到此内容。
参考点：
本身原来的位置作参考点。
绝对定位
特性：
1.脱标 2.作遮盖效果，提成了层级。设置绝对定位以后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
1、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
2、以父辈盒子做为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不必定是爸爸，它也能够是爷爷，曾爷爷。
2.若是父亲设置了定位，那么以父亲为参考点。那么若是父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不只仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，作站的时候不会出现父绝子绝。由于绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在咱们页面布局中，是经常使用的布局方案。由于父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
做用：页面布局常见的“父相子绝”，必定要会！！！！
绝对定位的盒子居中
当作公式记下来吧！
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*设置绝对定位以后，margin:0 auto;不起任何做用，若是想让绝对定位的盒子居中。当作公式记下来 设置子元素绝对定位，而后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ }
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提高层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
若是用bottom描述，那么是以浏览器的左下角为参考点
做用： 1.返回顶部栏 2.固定导航栏 3.小广告
21-z-index
z-index
这个东西很是简单，它有四大特性，每一个特性你记住了，页面布局就不会出现找不到盒子的状况。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，无论相对定位，绝对定位，固定定位，均可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0若是你们都没有z-index值，或者z-index值同样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用