CSS (cascading style sheet 层叠样式表)
（一）引入css
1.行间样式，即
2.页面级CSS，在head里面引入一个style标签，在里面写css代码。
3.外部css文件，<link rel=>
把html,css放在服务器上，浏览器下载一行代码并执行一行代码。属于异步执行，因为计算机的异步和同步相对于我们的理解来说是相反的。
（二）选择器
1.id选择器
，一个元素只能有一个id选择器。2.类选择器，，一个类选择器可对应对个元素。
3.标签选择器，适用于标签，例如说div a。
4.通配符选择器 *{} 选中所有的标签。这个用于初始化标签非常有作用。
5.属性选择器
选择器的权重（从高-低）
important（正无穷）->行间样式（1000）–>id（100）–>class 属性选择器 （10） -->标签选择，伪元素（1） ——>通配符（0）
父子选择器： div span{}
特点：不在于一定要使用标签选择器，class id 选择器都可以，只要成立父子关系就可以了。
注意：浏览器定义父子选择器的顺序为从右到左，因为这样速度更快。
子元素选择器：
即符号下的直接向下的选择方式，例如h1>strong{;}
注意：浏览器定义父子选择器的顺序为从右到左，因为这样速度更快。
并列选择器：
特点：当同时存在相同标签及相同类名时，可通过标签名和类名混合使用达到选中区域的效果。
权重选择器：
特点：只要是同一横行想选择器，权重值为相加，若权重值一样，则后面的代码会覆盖前面的代码。
分组选择器：
特点：例如说div span想设置一样的背景颜色，在减少冗余的角度来看，div span{}这样写css。
CSS基础属性：
1.字体大小
font-size px; 浏览器默认为16px;
font-wight:blod 字体加粗
font-style:italic；斜体
font-family:arial;互联网上的通用字体
color:设置字体颜色. 1.纯英文字母2.颜色代码 （00-ff，00-ff,00-ff）分别代表rgb，red green,blue. 3.颜色函数，color:rgb(0-255,0-255,0-255)
border:10px solid(dotted点状，dashed 条状) black;（10px粗细，实线，黑色）
text-align:right;文本向右对齐 text-align: center 文本居中显示
line-height: 20px； 行高。因此让单行文本水平居中的做法就是让行高=容器高度
text-indent:2em(2个font-size)
cursor:(pointer 当光标移动到哪个区域，就会变成另外的符号，help ,move, pointer)
伪类选择器 a:hover{
}
在元素被光标选中的时候触发各种效果。
元素的分类：
1.行级元素 inline
特征：内容决定元素所占位置，不可以通过css改变宽高。
例：
2.块级元素 block
特征：独占一行，可通过css改变宽高
例:
3.行级块元素 inline-block
特征：1.内容决定元素所占位置 2.可以通过css改变宽高。
例：
凡是带有inline的都显示文字特性，因此会被分割，导致多张并排会有空隙产生。
注意：在开发的时候先写css样式再写html，因为clas是一对多关系的，所以这些属性都能通过组合加上去——先定义后选样式。
用标签选择器做初始化，因为标签选择器的权重是0，若是用户想自定义修改那么通过增加权重就可以实现。
盒模型
盒模型从外向内分别由外边距(margin)，边框(border)，内边距（padding），盒子的内容(width+height)。
注意，marign不算可以展示出来，看到的一部分。
元素定位
定位分成三种定位，分别是absolute，relative还有fixed。
absolute：定位后，就跑到上面的层级去了，脱离原来位置进行定位；用相对最近的父级进行定位，若没有父级则使用文档定位。
relative：定位后还是同一层，保留原来的位置进行定位。若父级没有relative定位，则相对自己以前的位置进行定位。
fixed: 无论屏幕滚动都可以保持在那个位置（广告定位）
在网页上的任意居中可以这样写：
div{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-right:-50px;
}
Z-index成为Z轴，正方向对着你。
开发中遇到的两个BUG：margin塌陷，还有margin合并。
如图，一个父DIV包含着一个子DIV，红色为父级div,绿色为父级的边框，蓝色的子级DIV,这样显示很正常。
一般来说，子元素的高度是多高，父元素就有多高。父div没有高度和宽度，是被子div撑开的。
而当子div设置浮动之后，父div包不住子div。
解决方法：
bfc:能够改变特定盒子的语法规则，要得处于父子关系的div；
如何触发bfc(满足一下任意一条):
(1) position:absolute;
(2)display:inline-boock;
(3)float:left/right;
(4)overflow:hidden;(溢出部分隐藏)
margin合并：
一般来说，margin-left设置后会改变与隔壁的元素撑开，但若上下元素是这样的话，则margin-top和margin-bottiom的值不会相加，而是取最大的值进行撑开。
float：left/right；设置浮动
float特征：
浮动元素产生了浮动流，块级元素看不见他们，但bfc元素，文本属性的元素以及文本都能看到浮动元素。
div设置浮动之后，可以让div独占一行的特征消失，变成并排。浮动元素还可以加上margin-left使用。
使用clerar:both/left/right；可以清除浮动流。
伪类选择器：存在于每个标签，可以通过css把伪元素选出来。
例：span::before{} span::after{};
当父级元素包住子元素时，只能在父级后面div::after{}写上claer:both,并且要注意div要为块级元素，因为只有块级元素才能清除浮动。
小知识点：设置position：absolute 或者 float:right/left之后，浏览器会把元素自动转换成inline-block。
文字溢出处理：
当内容溢出容器，要进行打点展示：
1.单行文本。（1）先让文本失去换行功能——white-space:nowrap；
（2）多余的部分隐藏：overflow:hidden；
（3）text-overflow:ellipsis；多出来的那部分进行隐藏。ellipsis是省略的意思。
2.多行文本。截断处理，算好容器和文本宽度，把多余的不显示。
背景图片处理
background-image:url(xxx.jpg)；
background-size:20px 20px;
background-repat:norepat；(图片填充不重复)
background-position:50% 50%；
小知识点：
当网络不好的时候，浏览器取消CSS样式，因此网站如果写得不好的话，网络差的时候会导致网络功能不完整（部分功能实现不了），有时候图片代表一个连接，但当CSS样式加载不出来的时候，就需要用文字代替图片。
text-indent:190px；(容器高，所其缩进)
white-space:nowrap；（使其不换行）
overflow:hidden；（使其隐藏）
小知识点：
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。
但
两边留白：设置中间元素为 margin：0 ，auto；
当一个行级元素在一个文本元素里，包含文字，那么外面的文字就会跟里面的文字对齐。