CSS的学习和常用的标签
CSS简介
层叠样式表 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个 层来设置样式 而最终我们能看到只是网页的最上边一层 总之一句话，CSS用来设 置网页中元素的样式
使用CSS来修改元素的样式 第一种方式(内联样式，行内样式): 在标签内部通过style属性来设置元素的样式
问题: 使用内联样式，样式只能对一个标签生效， 如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意:开发时绝对不要使用内联样式
第一种方式:（内联样式，行内样式）
在标签内部通过style属性来设置元素的样式
开发时绝对不要使用，效率极低
第二种方式(内部样式表)
将样式编写到head中的style标签里 然后通过css的选择器来选中元素并为其设置各种样式 可以同时为多个标签设置样式，并且修改时只需要修改一处即可 内部样式表更加方便对样式进行复用 问题: 我们的内部样式表只能对一个网页起作用， 它里边的样式不能跨页面进行复用
第三种方式(外部样式表 )最佳实践
可以将CSS样式编写到一个外部的CSS文件中， 然后通过link标签来引入外部的CSS文件
外部样式表需要通过link标签进行引入， 意味着只要想使用这些样式的网页都可以对其进行引用 使样式可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制， 从而加快网页的加载速度，提高用户的体验。|
基本语法
选择器声明块
选择器，通过选择器可以选中页面中的指定元素 比如p的作用就是选中页面中所有的p元素 声明块，通过声明块来指定要为元素设置的样式
声明是一个名值对结构 一个样式名 对应一个样式值，名和值之间以:连接，以;结尾
元素选择器 作用:根据标签名来选中指定的元素
语法:标签名{} 例子: p{} h1{ } div{}
id选择器 作用:根据元素的id属性值选中一个元素
语法: #id属性值{} 例子: #box{} #red{ }
class是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class,属性来为元素分组 可以同时为一个元素指定多个class属性，用空格隔开
类选择器 作用: 根据元素的class属性值选中一组元素
语法: .class属性值
通配选择器 作用:选中页面中的所有元素
语法: *
交集选择器
作用: 选中同时复合多个条件的元素
语法: 选择器1选择器2选择器3选择器n{ }
注意点: 交集选择器中如果有元素选择器，必须使用元素选择器开头
选择器分组(并集选择器) 作用: 同时选择多个选择器对应的元素
语法: 选择器1 ,选择器2，选择器3，选择器n{ }
父元素 直接包含子元素的元素叫做父元素
子元素 直接被父元素包含的元素是子元素
祖先元素 直接或间接包含后代元素的元素叫做祖先元素 ，一个元素的父元素也是它的祖先元素
后代元素 直接或间接被祖先元素包含的元素叫做后代元素， 子元素也是后代元素
兄弟元素 拥有相同父元素的元素是兄弟元素
子元素选择器 作用: 选中指定父元素的指定子元素
语法: 父元素>子元素
后代元素选择器: 作用:选中指定元素内的指定后代元素
语法:祖先后代
选择下一个兄弟 语法:前一个 + 下一个
需要是紧挨着的兄弟元素
选择下边所有的兄弟 语法: 兄~弟
属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值开头的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
伪类（不存在的类，特殊的类）
伪类用来描述一个元素 的特殊状态 比如: 第一个子元素、被点击的元素、鼠标移入的元素... 伪类一般情况下都是使用 : 开头
:first-child 弟一个子元系
:last-child 最后一个子元素
:nth-child( ) 选中第n个子元素 特殊值: n 第n个n的范围o到正无穷
2n 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上些伪类都是根据所有子元素进行排序
:first-of-type : last-of-type :nth-of-type() 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not()否定伪类 将符合条件的元素从选择器中去除
:link 用来表示没访问过的链接(正常的链接)
:visited 用来表示访问过的链接 由于隐私的原因，所以visited这个 伪类只能修改链接的颜色
: hover 用来表示鼠标移入的状态
伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用 :: 开头
:: first-letter 表示第一个字母
::first-line 表示第一行
::selection表示选中的内容
::before 元素的开始
::after元素的最后
before和after 必须结合content属性来使用
元素的继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上， 继承是发生在祖先后后代之间的 继承的设计是为了方便我们的开发，利用继承可以将一些通用的样式统一到共同的祖先元素上
不是所有的样式都会被继承
比如背景相关的，布局相关的这些样式都不会被继承
选择器的权重
样式的冲突 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。 发生样式冲突时，应用哪个样式由选择器的权重(优先级)决定
选择器的权重：
内联样式 1，0，0，0
id选择器 1，0，0
类和伪类选择器 1，0
元素选择器 1
通配选择器 0,0,0,0
继承的样式
没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示，分组选择器是单独计算的，
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样 式的后边添加!important，则此时该样 式会获取到最高的优先级，甚至超过内联样式， 注意:在开发中这个玩意一定要慎用! |
单位
em是相对于元素的字体大小来计算的 1em = 1font-size em会根据字体大小的改变而改变 rem是相对于根元素的字体大小来计算
文档流(normal flow)
网页是一个多层的结构，一层摞着一层 通过css可以分别为每一层来设 置样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所 创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态 在文档流中 不在文档流中(脱离文档流) 元素在文档流中有什么特点: 块元素 块元素会在页面中独占一行(自上向下垂直排列) 默认宽度是父元素的全部(会把父元素撑满) 默认高度是被内容撑开(子元素)行内元素
行内元素
行内元素不会独占页面的一行，只占自身的大小 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素 会换到第二行继续自左向右排列(书写习惯一致) 行内元素的默认宽度和高度都是被内容撑开
盒子模型
盒模型、盒子模型、框模型(box model) CSs将页面中的所有元素都设置为了一个矩形的盒子 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由一下几个部分组成: 内容区(content) 内边距(padding) 边框( border) 外边距(margin)
内容区(content)
元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置 width设置内容区的宽度 height设置内容区的高度
边框(border)，
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小 要设置边框，需要至少设置三个样式: 边框的宽度border-width 边框的颜色border-color 边框的样式border-style
border-width: 默认值，一般都是3个像素
值的情况
四个值:上， 右， 下， 左
三个值:上， 左右， 下
两个值:上下， 左右
内边距(padding)
内容区和边框之间的距离是内边距 -共有四个方向的内边距: padding -top padding-right padding - bottom padding-left 内边距的设置会影响到盒子的大小 背景颜色会延伸到内边距上
padding内边距的简写属性，可以同时指定四个方向的内边距 规则和border-width一样
外边距(margin)
外边距不会影响盒子可见框的大小 但是外边距会影响盒子的位置 一共有四个方向的外边距: margin-top 上外边距，设置一个正值，元素会向下移动 margin-right 右外边距 margin- bottom 下巴边距，元素会向下移动 margin-left 左外边距，设置一个正值，元素会向右移动
元素在页面中是按照自左向右的顺序排列的， 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素
margin的简写属性 margin可以同时设置四个方向的外边距，用法和padding样
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定
“ margin-left
border-left
padding - left
width
padding -right
border-right
margin-right
相加的所有值必须等于其父元素内容区的宽度
如若不成立，则称为过渡约束，等式会自动调整
调整的情况: 如果这七个值中没有为auto 的情况，则浏览器会自动调整margin-right值以使等式满足
这七个值中有三个值和设置为auto：
width margin-left maring-right 如果某个值为auto,则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0 如果将三个值都设置为auto,则外边距都是0,宽度最大
如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其 父元素中水平居中
示例:（居中） width :xxxpx; margin:0 auto;
垂直方向布局
默认情况下父元素的高度被内容撑开
子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值: visible 默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，查看完整內容
auto 根据需要生成滚动条
overflow-x 水平
overflow-y 垂直
外边距的重叠
垂直外边距的重叠(折叠) 相邻的垂直方向外边距会发生重叠现象
兄弟元素 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值) 特殊情况: 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素 父子元素间相邻外边距，子元素的会传递给父元素(上外边距) 父子外边距的折叠会影响到页面的布局，必须要进行处理
行内元素的盒子模型
行内元素不支持设置宽度和高度 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 行内元素可以设置border,垂直方向的border不会影响页面的布局 行内元素可以设置margin,垂直方向的margin不会影响布局
display用来设置元素显示的类型 可选值: inline 将元素设置为行内元素 block 将元素设置为块元素 inline-block 将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行 table将元素设置为一个表格 none 元素不在页面中显示
visibility用来设置元素的显示状态 可选值: visible 默认值，元素在页面中正常显示 hidden元素在页面中隐藏不显示，但是依然占据页面的位置
浏览器的默认样式
通常情况，浏览器都会为元素设置一些默认样式 默认样式的存在会影响到页面的布局， 通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)
