雨夜月风跟着李南江学习HTML5—CSS学习
CSS学习感言：
CSS明显比HTML复杂一些，用的时间也多，而且也还有许多迷惑的地方，特别是关于定位和浮动，理解子绝父相，就用了好长时间，最后把视频看了第二遍才理解。可能内容比较多，有时候不知道用什么属性，在看完网易项目的时候，整体的对CSS有了大概的了解。这部分内容。主要是对HTML的修饰。让界面更美观。要掌握的重点知识是div和span，块级元素和行内元素，行内块级元素的互换。盒子模型，外边距。内边距。居中对齐，浮动和定位，特别提示的还有清除浮动，学习的时候没太用心，后来做项目的时候用到过。又重新回头看的，各位同学看到的话。要特别的留心哈。下面炒的李南江视频的笔记，供大家学习，表感谢我...
什么是CSS？
层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XM等文件样式的计算机语言
CSS有什么作用？
主要的作用就是美化网页
CSS 有什么优点？
不需要单独记忆标签，快速修改样式，满足需求变更
CSS的格式
<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; ... }</style>
CSS属性
font-style：normal 普通字体 italic 倾斜 快捷键 fs
font-weight：bold 加粗 bolder 更粗 lighter 细线 快捷键 fw
font-size：px 设置大小必须加单位像素
font-family：字体 必须是电脑已经安装的字体
缩写例子 - font: style weight size family; sytle 和 weight可以省略 size family 不能省略 切不可互换位置
文本装饰属性
text-decoration ： underline 下划线
text-decoration ： line-through 删除线
text-decoration ：none 无 常用
text-align
text-align: left; 左对齐
text-align: right;右对齐
text-align: center;居中对齐
文本缩进
text-indent: 2em 缩进两个单位
color属性
color: rgb(0,0,0); 黑色
选择器：标签选择器
格式:标签名称{ 属性:值;} 、选中的是当前界面中所有的此种类型的标签,
id选择器
根据指定的id名称找到对应的标签, 然后设置属性 #id名称{ 属性:值;} 每个HTML标签都有一个属性叫做id,并且在同一个界面中id的名称是不可以重复的，在编写id选择器时一定要在id名称前面加上#，通常id标签留给js使用，并不做样式修改时使用
类选择器
根据指定的类名称找到对应的标签, 然后设置属性 格式: .类名{ 属性:值;} 每个HTML标签都有一个属性叫做class ，在同一个界面中class的名称是可以重复的，明明遵循变量命名规则，在企业开发中，经常用来设置CSS
后代选择器
根据指定标签的所有特定的后代标签, 设置属性 格式:标签名称1 标签名称2{ 属性:值;} 找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性，后代选择器必须用空格隔开
子元素选择器
根据指定标签中所有特定的直接子元素, 然后设置属性标签名称1>标签名称2{ 属性:值;}子元素选择器只会查找儿子, 不会查找其他被嵌套的标签，标签>不能省略，且会一直往里找下去
交集选择器
给所有选择器选中的标签中, 相交的那部分标签设置属性 选择器1选择器2{ 属性: 值;} 选择器和选择器之间没有任何的连接符号 这个选择器使用频率小
相邻兄弟选择器
根据选择器后面紧跟的那个选择器选中的标签设置属性 选择器1+选择器2{ 属性:值;} 使用+号链接标签选择器，并且必须是用+号
通用兄弟选择器
通用兄弟选择器必须用~连接，通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
CSS3中新增的选择器
序选择器
同级别的第几个:
first-child 选中同级别中的第一个标签:
last-child 选中同级别中的最后一个标签:
nth-child(n) 选中同级别中的第n个标签:
nth-last-child(n) 选中同级别中的倒数第n个标签:
only-child 选中父元素中唯一的标签
同类型的第几个:
first-of-type 选中同级别中同类型的第一个标签
last-of-type 选中同级别中同类型的最后一个标签
nth-of-type(n) 选中同级别中同类型的第n个标签
nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
only-of-type 选中父元素中唯一类型的某个标签
属性选择器
根据指定的属性名称找到对应的标签, 然后设置属性
格式:[attribute]作用:根据指定的属性名称找到对应的标签, 然后设置属性，找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
通配符选择器
给当前界面上所有的标签设置属性
格式:*{ 属性:值;}
由于通配符选择器性能差，开发中很少使用
CSS的三大特性 - 继承性
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
拥有继承性的标签 主要有以color/font-/text-/line-开头的属性，CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承，a标签的文字颜色和下划线是不能继承的，h标签的文字大小是不能继承的，通常用于设置网页上的一些共性信息
CSS的三大特性 - 层叠性
多个选择器选择同一标签，设置了"相同的属性", 才会发生层叠性
CSS的三大特性 - 优先级
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
important
提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
优先级的权重
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
1.首先先计算选择器中有多少个id, id多的选择器优先级最高
2.如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
3.如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
4.如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的也就是说优先级如果一样, 那么谁写在后面听谁的
div 和 span
都是容器，用于配合css完成网页的基本布局，不同点是div会单独的占领一行,而span不会单独占领一行。div是一个容器级的标签, 而span是一个文本级的标签
块级元素 行内元素 和 行内块级元素
块级元素会独占一行，行内元素不会独占一行 块级元素p div h ul ol dl li dt dd 行内元素span buis strong em ins del
块级元素和行内元素的区别：
块级元素独占一行如果没有设置宽度, 那么默认和父元素一样宽如果设置了宽高, 那么就按照设置的来显示
行内元素不会独占一行如果没有设置宽度, 那么默认和内容一样宽行内元素是不可以设置宽度和高度的
行内块级元素为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
转换CSS元素的显示模式
设置元素的display属性 block 块级inline 行内inline-block 行内块级
边框属性
连写 ：border: 宽度 样式 颜色;
分开写：border-top: 宽度 样式 颜色
缩写：border-width: 上 右 下 左;
内边距
边框和内容之间的距离就是内边距，给标签设置内边距之后, 标签占有的宽度和高度会发生变化，给标签设置内边距之后, 内边距也会有背景颜色
外边距
标签和标签之间的距离就是外边距，外边距的那一部分是没有背景颜色的，连写 - margin: 上 右 下 左; 外边距在默认布局的垂直方向，有外边距合并现象
CSS盒子模型
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子。
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
盒子模型的高度和宽度
1.内容的宽度和高度就是通过width/height属性设置的宽度和高度
2.元素的宽度和高度宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框高度 同理可证
3.元素空间的宽度和高度宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距高度 同理可证
box-sizing
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
content-box元素的宽高 = 边框 + 内边距 + 内容宽高
border-box元素的宽高 = width/height的宽高
盒子居中 和 内容居中
text-align: center;作用设置盒子中存储的文字/图片水平居中
margin:0 auto;作用让盒子自己水平居中
行高和字号
在CSS中所有的行都有自己的行高，行高和盒子高不是同一个概念，行高指的是每行内，容的高度，盒子高指的是元素的高度，文字在行高中默认是垂直居中的，在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的，在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中
网页布局
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
有三种排版方式：
1.标准流
其实浏览器默认的排版方式就是标准流的排版方式
在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
2.浮动流
浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
浮动流的特点
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
浮动元素的脱标
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标，如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
浮动元素贴靠现象?
如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
浮动元素高度问题
在标准流中内容的高度可以撑起父元素的高度
在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动的五种方式
1.给前面一个父元素设置高度（不常用）
2.给后面的盒子添加clear属性（不常用）
3.外墙法和 内墙法（不常用）
4.伪元素选择器清除浮动（不常用）- 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
5.overflow标签（常用）
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外添加的块级元素设置clear: both属性
内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外添加的块级元素设置clear: both;属性
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
伪元素选择器
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
overflow
作用：可以将超出标签范围的内容裁剪掉，清除浮动 ，可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
定位流
1相对定位 2绝对定位 3固定定位 4静态定位
相对定位
相对定位就是相对于自己以前在标准流中的位置来移动 作用：用于对元素进行微调4 配合后面学习的绝对定位来使用
绝对定位
绝对定位就是相对于body来定位 注意点:绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素,默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
子绝父相（重点）
相对定位弊端:相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相子元素用绝对定位, 父元素用相对定位
绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的 margin-left: -元素宽度的一半px
