学了半个月HTML之后，终于开始接触CSS了。
学HTML的时候被老师无数次提及CSS这玩意。感觉这玩意简直万能。
“这个不用太了解，以后学了CSS能弄”
“这个用CSS做的，现阶段我们先不讲”
“你们先用table做，等我们学了CSS...”
“现如今最流行的布局是DIV+CSS...”
“...”
反正就是这样，盼星星盼月亮终于开始学CSS了。
好吧，下面正式开始做笔记
div+css布局的优势:
table布局：
优点：布局容易、快捷、兼容性好
缺点：改动不变、代码冗余、浏览器加载速度变慢、对搜多引擎不友好
div+css：
优点：布局灵活、改动方便
缺点：需要考虑平台的兼容性、对制作人员技能要求较高
无语义标签：
div标签：默认宽度充满整行
span标签：默认宽度跟随文字的变化而变化
CSS概念：
Cascading Style Sheets
是一种用来表现html或xml的页面显示样式的计算机语言，改变可视化标签的样式，做视觉效果相关的东西，美化页面的作用
层叠样式表：
html标记是有层级结构的
*同一个标签有可能被多个样式表同时层叠的设置样式属性
*层叠样式表是有优先级的
作用：美化页面
概念
语法
style标签（非可视化标签）
type是style的类型属性，text/css是它的值，告诉浏览器这里面的文本内容是当做层叠样式表
<style type="text/css">
selector{declaration1;
declaration2;
declaration3;
...
declarationN
}
</style>
注意：style标签写在head标签之间
颜色值
单词
调色：
rgb：r(red)红色 g(green)绿色 b(blue)蓝色
rgb(0~255，0~255，0~255)
比如：红色 rgb(255,0,0)
十六进制：#00~ff 00~ff 00~ff
比如：红色 #ff0000 简写：#f00
rgba：相当于rgb+a[透明度[
比如：rgba(255,210,0,0~1)
字体
font-size：字体大小
font-family：字体
font-style：字体样式（normal默认值，italic斜体，oblique倾斜，inhert继承）
font-variant：以小型大写字体或者正常字体显示文本（normal默认值，small-caps小型大写，inhert继承）
font-weight：字体粗细（normal默认值，100~900整百，bord粗体，border更粗，lighter更细，inhert继承)
font：连写（例： font: 700 italic 39px "宋体"）
文本
color：文本颜色
direction：文本方向（ltr从左到右，rtl从右到左，inhert继承）
text-align：对齐元素中的文本（left左，right右，center中，justify两端，inhert继承）
text-decoration：添加修饰（none默认，underline下划线，overline上划线，line-through删除线，blink闪烁，inhert继承）
text-transform：控制元素中的字母（none默认，capitalize大写开头，uppercase仅大写，lowercase仅小写，inherit继承）
unicode-bidi：设置返回文本是否被重写（normal默认，embed嵌套，bidi-override覆盖）
vertical-align：设置元素的垂直对齐（baseline默认，sub下标，super上标，top顶端，text-top父顶端，middle父中部，bottom低顶端，text-bottom父底端，length，%百分比，inherit继承）
white-spaceb：设置元素中空白的处理方式（normal默认，pre保留，nowrap不换行，pre-wrap保留空白,正常换行，pre-line合并空白，inherit继承）
text-indent：首行缩进
line-height：行间距
word-spacing：单词间距
letter-spacing：字符间距
text-shadow：阴影（左右 上下 颜色)
图片背景
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置（值：例：top center;或10% 10%;或10px 10px）
background-size 指定背景图片的大小（值：cover覆盖，contain扩展）
background-repeat 指定如何重复背景图像（值：repeat-x水平，repeat-y垂直，no-repeat不重复）
background-origin 指定背景图像的定位区域 （值：padding-box内边距框，border-box边框盒，content-box内容框）
background-clip 指定背景图像的绘画区域（值：padding-box内边距框，border-box边框盒，content-box内容框）
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动（值：scroll默认，fixed不懂，inherit继承）
background-image: url("#"); 指定要使用的一个或多个背景图像
css三大特性：
覆盖：同标签选择器时，最下面的样式属性会覆盖上面的样式属性
优先级：!important>ID选择器>类选择器>标签选择器>通配符
继承：子元素会继承父元素相关样式，宽高不继承
（cs根据权重决定页面显示何种样式）
CSS整体重点：
选择器
selector：选择目标
标签选择器
标签名{属性名：属性值；}
针对该页面所有的对应的标签，都会受到样式表的影响
class选择器（建议）
.class名{属性名：属性值；}
任何可视化标签元素都可以有class属性，默认没有
一个class属性可以有多个值、多个classa样式（用空格分开）
id选择器（identity 唯一标识）
#id名{属性名：属性值；}
任何标签元素都可以有id属性
如果设置id属性，一定要保证这个属性的值整个页面是唯一的
后代选择器
空格分隔
通过多个选择器空格组合的方式（强烈推荐）
组合选择器（并集选择期）
逗号分隔
命名规范：是由字母数字和横岗组成（半角），例子：head-logo
优先级：id选择器>class选择器>标签选择器
选择器描述的尽量详细一点
元素样式来源
系统自带的样式
不同的标签，根据标签名字的不一样，浏览器给了默认的样式）
外部链接的样式
1、使用link标签href引用，放在head之间。后缀名.css
rel属性必须是stylesheet href代表css的位置
2、使用@import url("地址")；（放入style标签内）
内部链接的样式
style标签
优点：方便在页面修改样式
缺点：不利于共享、结构和样式分离不够彻底
内嵌的样式（行内样式）
style="属性名:属性值;属性名:属性值;"
所有可视化标签都可以有style属性，但不建议使用，维护成本高
link标签
引入外联资源
css：<link rel="stylesheet" href="css/style.css">
ico：<link rel="icon" href="favicon.ico" type="image/x-icon>
三个层面设置style如何选择
style属性
直接设置属性值
常用来调试css样式，因为它优先级最高（比id标签还高）
style标签
通过style标签写样式表
用来测试，开发时我们用这种方式，因为不用几个文件来回切换，提升开发效率
link标签引入外联的css文件
单独写css，然后通过link标签href引入进来
项目开发中最常用的方式（推荐）
总结
命名规范
id属性命名规范：驼峰命名法 多个单词后面的单词首字母大写，例：headLogo
class命名规则：
1、反应功能
2、通用性
3、短小精悍
4、全部用小写
5、功能名连接用-
6、不可以用纯数字或者数字开头
通过把样式写到css文件中，最终通过link标签href属性引入外联的css文件
在同样一种选择器的前提之下，有限级问题是就近原则，离目标标签越近，优先级越高
盒子模型
标签分类
块级元素
如：h1-h6、div......
特点；
如果不设置宽度，默认占整行
可以设置宽高
子级默认继承父级宽度
行内元素
如：a、span......
特点：
宽度随内容变化，并且行内元素在一行显示
不可以设置宽和高
行内块元素
如：input、img......
特点：
可以设置宽高
元素在一行显示
css显示模式
元素转化：
display:block（块级显示），inline（行内显示），inline-block（行内块显示）;
元素隐藏：
diplay:none（隐藏）
盒子
padding：内边距（div内容到边框的距离）
padding：上下左右px
padding：上下px 左右px
padding：上px 左右px 下px
padding：上px 右px 下px 左px
padding-top:
padding-bottom:
padding-left:
padding-right:
margin：界边距（div与div之间的距离）
居中：margin: 0 auto;（适用于块级定宽元素）
margin：上下左右px
margin：上下px 左右px
margin：上px 左右px 下px
margin：上px 右px 下px 左px
margin-top:
margin-bottom:
margin-left:
margin-right:
border：边框（宽度，样式[solid实体,dashed虚线,dotted点线]，颜色）
border-top:
border-bottom:
border-left:
border-right:
overflow：溢出部分处理（值：auto自动，visible默认，scroll滚动条，hidden隐藏多余部分，inherid继承）
标准文档流：
默认的盒子排放标准
特性：
空白折叠、高矮不齐，底边对齐、显示方式（块级、行内）
限制多，不方便布局页面
布局：
脱离标准文档流
方法：
1、浮动
2、绝对定位
3、固定定位
浮动
作用：解决一行显示多个盒子的问题（并且盒子位置可控）
特点：
1、脱离标准流
2、浮动元素会覆盖在标准元素之上
3、浮动找浮动/不浮动找不浮动
4、浮动以后的元素和标准流位置一一对应
5、浮动元素不会影响上面的元素，只影响下面的元素
6、浮动元素会改变显示方式，行内、块级都是一行显示，
注意：是浮动后的显示方式和行内块一样
7、在标准流中不占位置
浮动对页面的影响：
如果父盒子有子盒子，并且父盒子没有设置高度，这时子盒子浮动，那么父盒子的高度就为0；
由于父盒子高度0，下面的元素会自动补位。
清除浮动
claer:both;
1、额外标签
在浮动的盒子下面再放一个标签，这个标签设置clear:both,来清除浮动对页面的影响。
缺点：将来父盒子的高度还是0
a、外部标签：会清除浮动盒子的影响，但是不会撑开父盒子高度
缺点：将来父盒子的高度还是0
b、内部标签：会清除浮动盒子的影响，并撑开父盒子
2、overflow属性清除
浮动盒子的父元素添加overflow:hidden;
3、伪元素清除浮动(j建议用)
.clearfix:after{
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
伪元素&伪类
伪类：用于像元素添加特殊效果
a:link、a:hover、a:active、a:visited
:link“链接”：超链接点击之前（a标签专用）
:visited“访问过的”：链接呗访问过之后（a标签专用）
:hover“悬停”：鼠标放到标签上的时候
:active“激活”：鼠标点击标签，但是不松手时
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）
例：a:link{color:red;}
a:visited{colororange}
a:hover{color:green;}
a:active{color:black;}`
div:hover p{display:block;}
伪元素：在页面上不存在的元素，可以通过伪元素添加上去
例： p:before{content: "H";}（在p标签前面加H）
p:after{content:"d";}
元素的隐藏：
display:none;（隐藏，不占位置）
overflow:hidden;（将超出部分裁剪）
visibility:hidden;（隐藏，但是原页面还保留位置）
定位
清楚默认margin/padding值：
1、*{padding:0px;margin:0px}
2、body,p,h1...{padding:0px;margin:0px}
解决页面上盒子与盒子之间的层叠问题
相对定位、绝对定位、规定定位、静态定位
问题：在页面上有两个盒子，其中第二个盒子将第一个盒子压了一半
清除默认的margin\padding值
1、static（静态的）
position:static;静态定位
所有标准流中的元素都是静态定位（默认）
2、relative（相对的）
position:relative;相对定位
使用的时候要配合：top、left、right、bottom
特点：如果设置了相对定位并且设置了tlrb属性，那么将来盒子会相对于自己原本的位置发生偏移
1.相对于原来位置进行平移
2.设置了相对定位的元素在页面上占据了位置（没有脱离标准文档流）
总结：想当年
3、absolute（绝对的）
position:absolute;绝对定位
使用的时候要配合：top、left、right、bottom
1、如果这个元素没有父元素，将来tlrb时相对于body来定位的。
2、如果这个元素有父元素，但是父元素没有定位，那么这个时候tlrb还是相对于body定位的。
3、如果这个元素有父元素，并且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础的。
4、绝对定位以后的元素在页面不会占据位置。
总结：看脸
注意：如果小盒子要在大盒子里定位，并且水平居中靠下对齐，先left:50%，再margin：-小盒子宽度一半
重点：将来用的最多的是绝对+相对一起
规范：子绝父相（子元素使用绝对定位，父元素使用相对定位）
4、fixed：固定定位
position:fixed;固定定位
使用的时候要配合：top、left、right、bottom
特点：
1、不管页面多大，tlrb都是相对于浏览器的边框
2、固定元素脱离了标准流，不占标准流的位置
总结：死心眼
z-index显示在哪一层（置顶层显示）