CSS介绍
现在的互联网前端分三层：
HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
css的最新版本是css3，我们目前学习的是css2.1
接下来我们要讲一下为什么要使用CSS。
HTML的缺陷：
不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大
CSS 优点：
使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
回到顶部
CSS的引入方式
行内样式
行内样式
内接样式
内接样式
外接样式-链接式
外接样式-链接式
外接样式-导入式
外接样式-导入式
回到顶部
css选择器
基本选择器：
标签选择器
类选择器
id选择器
标签选择器(标签名)
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
标签选择器
类选择器(.)
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
类的使用，能够决定前端工程师的css水平到底有多牛逼？在这里一定要有”公共类“的概念。
. 类选择器
html
id选择器(#)
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
id选择器
html
高级选择器：
后代选择器
子代选择器
并集选择器(组合选择器)
交集选择器
后代选择器
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
后代选择器
子代选择器
使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
子代选择器
并集选择器
多个选择器之间使用 逗号 隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
并集选择器
百度首页-并集选择器示例
交集选择器
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个
这样的标签。那么它表示两者选中之后元素共有的特性。交集选择器
更多选择器：
伪类选择器
伪标签选择器
属性选择器
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
link/visited/hover/active
伪元素选择器(伪标签选择器)
first-letter/before/after
属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
属性选择器
选择器的权重
有些时候我们可能会给同一个标签设置多个样式，遇到了重叠项的设置又该听谁的呢？这里就要用到选择器的权重。
行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0
css的两大特性 ：继承性和层叠性
继承性：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
继承规则
层叠性：权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性
谁的权重大？
其实就是非常简单的是小学生算数。数：id的数量 class的数量 标签的数量，当然顺序不能乱
示例
练习1
代码
答案
练习2
代码
答案
练习3
代码
答案
练习4
代码
答案
!important 的使用
！important
选择器总结
使用什么选择器？
不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用
id or class in css ？ 尽可能的用class。除非一些特殊情况可以用id，id一般是用在js的。也就是说 js是通过id来获取到标签
选择器的权重
先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
回到顶部
盒模型
在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
盒模型示意图
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
如果让你做一个宽高402402的盒子，您如何来设计呢？答案有上万种，甚至上亿种。
盒模型的计算 ：width/height+2padding+2*border
width不等于盒子的真实宽度
如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。
padding的设置
padding有四个方向，分别描述4个方向的padding。描述的方法有两种：
1.写小属性,分别设置不同方向的padding
2.写综合属性，空格隔开
标签的默认padding
比如ul，ol标签，有默认的padding-left值。
那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
通配符选择器
但这种方法效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
border的设置
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上下左右 3px宽度的实体黑色边框。）
按照三要素来写baoder
按照方向划分设置小属性
按照方向设置
设置border没有样式
border-radius属性
利用border画三角
画三角示例
margin的设置
margin：外边距的意思。表示边框到最近盒子的距离。
设置margin
margin的塌陷
margin：0 auto;
善于使用父亲的padding，而不是margin
margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系.
如果让大家实现如图的效果，应该有不少的同学做不出来。
错误示例
设置border
使用padding
因为父亲没有border，那么儿子margin-top实际上踹的是“流” ，踹的是行，所以父亲掉下来了，一旦给父亲一个border发现就好了。
回到顶部
标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
标准文档流下 有哪些微观现象？
空白折叠现象
高矮不齐，底边对齐
自动换行，一行写不满，换行写
回到顶部
块级元素和行内元素
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
我们也学习了行内元素和块级元素的分类，其实这种分类方式是从CSS的角度讲的。
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：
display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了
行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：
display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲
ps：
复制代码
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
复制代码
回到顶部
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动
看一个例子:
复制代码
html:
路飞学城css:
.box1{
300px;
height: 300px;
background-color: red;
float:left;
}
.box2{
400px;
height: 400px;
background-color: green;
float:right;
}
span{
float: left;
100px;
height: 200px;
background-color: yellow;
}
复制代码
效果：
我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。
浮动的四大特性：
浮动的四大特点
一、浮动元素脱标
脱标：就是脱离了标准文档流
示例：
View Code
效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。
说明1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。
说明2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
二、浮动元素互相贴靠
示例
效果发现：
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
三、浮动元素的字围效果
示例
效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
四、浮动元素的紧凑效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
示例
大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，
浮动的问题和清除浮动
浮动的问题
在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）
大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。
示例
效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动
清除浮动
给父盒子设置高度
这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
clear:both
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
示例
伪元素清除法(常用)
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
css示例
新浪首页清除浮动伪元素方法
overflow:hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
回到顶部
定位
定位有三种：相对定位、绝对定位、固定定位
相对定位：相对于自己原来的位置定位
现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性：1.不脱标 2.形影分离 3.老家留坑（占着茅房不拉屎，恶心人）
所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
绝对定位
特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！！
绝对定位中的居中
固定定位
固定当前的元素不会随着页面滚动而滚动
特性: 1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
回到顶部
z-index
指的就是各个盒子重叠在一起谁上谁下的问题。
四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
回到顶部
文本属性和字体属性
文本属性
属性 描述 属性值 说明
text-align 文本对齐方式
none
center
left
right
justify
color 文本颜色
text-indent 首行缩进，单位建议em
text-decoration 规定文本修饰的样式
none
underline
overline
line-through
inherit
默认
下划线
定义文本上的一条线
定义穿过文本下的一条线
继承父元素text-decoration属性的值
line-height 行高
针对单行文本垂直居中
公式：行高=盒子高度，
使文本垂直居中，只适用单行文本。
针对多行文本垂直居中
行高不能小于字体，不然字会紧挨一起。
text-shadow 阴影 5px 5px 5px #FF0000
水平方向偏移量
垂直方向偏移量
模糊度
阴影颜色
text-overflow 文字溢出
clip
ellipsis
修剪文本
显示省略号代表被修剪文本
white-space
处理元素内的空白
normal
pre
nowrap
pre-wrap
pre-line
inherit
默认。空白被浏览器忽略。
空白会被浏览器保留
文本不换行，直到遇到
保留空白符序列，但正常地进行换行
合并空白符序列，但是保留换行符
继承父元素 white-space 属性的值
文字溢出
字体属性
属性 描述 属性值 说明
font-size 字体大小
font-weight 字体粗细
none
bold
border
lighter
100~900
inherit
默认值，标准粗细
粗体
更粗
更细
值，400=normal，700=bold
继承父元素字体的粗细值
font-family 字体系列 "Microsoft Yahei","微软雅黑", "Arial", sans-serif 浏览器使用它可识别的第一个值
使用font-family注意几点
回到顶部
background
给元素设置padding之后，发现padding的区域背景和content部分的一致。
background-color —— 背景颜色
设置背景色
background-image —— 背景图片
设置背景图片
那么发现默认的背景图片，水平方向和垂直方向都平铺
背景图片相关配置 ：background-repeat，background-position，background-attach
background-repeat：设置背景图像的平铺方式
repeat
repeat-x
repeat-y
no-repeate
inherit
默认。背景图像将在垂直方向和水平方向重复
背景图像将在水平方向重复
背景图像将在垂直方向重复
背景图像将仅显示一次
规定应该从父元素继承 background-repeat 属性的设置
background-position：设置背景图像的起始位置
垂直位置 水平位置
可以从两个纬度上设定关键词：上中下 左中右
垂直位置：top center bottom
水平位置：left center right
如仅规定了一个关键词，那么第二个值将是"center"。
默认值：0 0；
这两个值必须挨在一起。
background-attachment：设置固定的背景图像
scroll
fixed
inherit
默认值。背景图像会随着页面其余部分的滚动而移动。
当页面的其余部分滚动时，背景图像不会移动。
规定应该从父元素继承 background-attachment 属性的设置。
滚动背景图示例
background属性的简写
background：#ffffff url('1.png') no-repeat right top;