CSS的三大特性：

层叠性: 在选择器权重相同的时候 设置相同的样式 给同一个元素 浏览器 执行距离标签最近的那个样式属性

继承性: 在嵌套的元素中设置 设置样式的时候 我们可以通过给父元素设置样式 让子元素也具有相同的样式

可以被继承的属性：凡是与文字有关的样式属性 text- font- line- color

优先级（权重）

当给元素设置的样式相同 但是选择器权重不同时候 浏览器的解决方式

!important > 行内样式 > #id > .class > 标签选择器（标签默认样式） > 通配符 > 继承

权重的叠加计算
行内样式 id    class  标签选择器
0       0     0      0

注意：权重不可以 进位 （官大一级压死人）

盒模型：

边框  border  内边距 padding  内容大小width height

border: border-width border-style border-color

border-style: solid 实线  dashed 虚线  dotted点线

border-collapse: collapse 设置表格边框 合并  （细线表格边框）

padding  盒子 边框 与内容之间的距离

一个值：  上下左右

两个值： 上下  左右

三个值:  上 左右 下

四个值:  上 右 下 左

盒子的实际大小 = 内容的大小（width height） + padding 内外边距  + border 边框

padding会撑开盒子 （改变盒子的实际大小）

特殊情况 ：当盒子没有设置内容的大小（width 和height ） 的时候 盒子不会被撑大

外边距 margin   盒子 与 盒子之间的距离

一个值：  上下左右

两个值： 上下  左右

三个值:  上 左右 下

四个值:  上 右 下 左

margin外边距 合并（外边距塌陷）

body 在浏览器中有默认 8px的外边距

* {
  margin:0;
  padding:0;
}

1. 垂直方向相邻的两个盒子外边距合并问题 浏览器在显示的时候只会显示 较大的外边距，较小的不显示

解决方案: 只设置一个盒子的外边距即可 避免设置垂直方向的两个外边距


2. 嵌套的两个盒子 垂直方向的外边距合并问题 浏览器在显示的时候只会显示 较大的外边距，较小的不显示

解决方法：

1. 给父元素设置border

2. 给父元素设置padding

3. 给父元素设置 overflow :hidden
复合选择器

后代选择器： 嵌套结构中 选中所有后代（子子孙孙）元素

格式 ：  基本选择器1 基本选择器2 { 样式属性 }  后代选择器使用空格连接

子代选择器 :  在嵌套结构中 选中 所有 子一级 （不包括后代元素）元素

基本选择器1 > 基本选择器2 { 样式属性 }  后代选择器使用空格连接

交集选择器 在普通结构中 选择 既是... 又是... 的一个元素

标签选择器.类选择器 { 样式属性 }   例如： <div class="one"> </div>  div.one { ... }

并集选择器： 在普通结构中 主要用于对相同的样式进行集体声明

基本选择器1,基本选择器2 { 样式属性 }  例如：  div,h1,p { color:red; }

链接伪类选择器：

:link   用来设置鼠标未点击过的链接样式

:visited  设置鼠标点击过的链接样式

:hover   设置鼠标经过链接时候显示的样式  （使用最多的伪类）

:active  设置鼠标按下不松开的时候 链接显示的样式

元素的显示模式： 默认标签的显示方式例如：div默认占一行显示 span 可以在同一行显示



块元素：
特点：1. 独自占一行显示
      2.可以设置宽度和高度 及 内外边距
      3.默认宽度是 父元素宽度的100%（默认宽度和父元素一样大）
      4.块级元素内部可以 嵌套任何 元素

      注意： 个别文本类块级元素不能嵌套其他块级元素 h p dt
      常见的块级元素标签：  容器标签（盒子）一般都是块级元素  div ul li p h

行内元素
特点：
      1.在一行内可以显示多个 行内元素
      2.不能设置宽度 和高度 及 垂直方向的内外边距
      3.默认大小和内容 大小一致
      4.行内元素只能嵌套 文本和 其他行内元素

      注意：a标签可以嵌套块级元素 a标签不能和自身进行嵌套
      常见的行内元素标签： 和文字相关的标签 span  a strong em ins del
行内块元素
      1.可以在一行内显示多个
      2.可以设置宽度和高度
      3.默认大小和内容大小一致
      常见的行内块元素： 表单元素+图像标签  img input textarea select

转换块级元素
      display:block
转换行内元素
      display:inline
转换行内块元素
      display:inline-block

CSS背景属性

background-color: 设置背景颜色
background-image：url(图片路径)
background-repeat: 设置背景图片是否平铺 no-repeat  repeat  repeat-x  repeat-y
background-position: x y; 设置背景图片的位置  可以设置方位名称 还可以设置 具体的数字
background-attachment: 设置背景图片是否跟随滚动条滚动 scroll  fixed

背景属性的简写：
background: 背景颜色 背景图片 背景是否平铺 背景位置（坐标或者方位名词） 背景固定


背景透明
background-color
rgba(0~255,0~255,0~255, 0~1)  0完全透明 1 不透明

CSS三大特性：

层叠性 : css解决样式冲突的一种机制

同一个标签被 相同的选择器选中 设置了相同的样式 的时候 距离标签最近的样式生效
前提条件： 必须权重相同

继承性 CSS 中一部分样式属性可以被继承 在嵌套的结构中 子元素会继承父元素的样式

CSS中 与文字有关的样式都可以被继承 其他的样式都不可以被继承

优先级  当选择器不同的时候 样式冲突时候 浏览器 的解决方式

继承0 0 0 0 < * 通配符 < 标签选择器 < 类选择器(伪类) < id选择器 < 行内样式 < !important

1.权重不存在 进位关系   0 0 0 0
2.元素都被 选中的情况下 比较权重
3.权重相同 不比较优先级 执行层叠性

CSS的三大特性：

层叠性: 在选择器权重相同的时候 设置相同的样式 给同一个元素 浏览器 执行距离标签最近的那个样式属性

继承性: 在嵌套的元素中设置 设置样式的时候 我们可以通过给父元素设置样式 让子元素也具有相同的样式

可以被继承的属性：凡是与文字有关的样式属性 text- font- line- color

优先级（权重）

当给元素设置的样式相同 但是选择器权重不同时候 浏览器的解决方式

!important > 行内样式 > #id > .class > 标签选择器（标签默认样式） > 通配符 > 继承

权重的叠加计算
行内样式 id    class  标签选择器
0       0     0      0

注意：权重不可以 进位 （官大一级压死人）

盒模型：

边框  border  内边距 padding  内容大小width height

border: border-width border-style border-color

border-style: solid 实线  dashed 虚线  dotted点线

border-collapse: collapse 设置表格边框 合并  （细线表格边框）

padding  盒子 边框 与内容之间的距离

一个值：  上下左右

两个值： 上下  左右

三个值:  上 左右 下

四个值:  上 右 下 左

盒子的实际大小 = 内容的大小（width height） + padding 内外边距  + border 边框

padding会撑开盒子 （改变盒子的实际大小）

特殊情况 ：当盒子没有设置内容的大小（width 和height ） 的时候 盒子不会被撑大

外边距 margin   盒子 与 盒子之间的距离

一个值：  上下左右

两个值： 上下  左右

三个值:  上 左右 下

四个值:  上 右 下 左

margin外边距 合并（外边距塌陷）

body 在浏览器中有默认 8px的外边距

* {
  margin:0;
  padding:0;
}

1. 垂直方向相邻的两个盒子外边距合并问题 浏览器在显示的时候只会显示 较大的外边距，较小的不显示

解决方案: 只设置一个盒子的外边距即可 避免设置垂直方向的两个外边距


2. 嵌套的两个盒子 垂直方向的外边距合并问题 浏览器在显示的时候只会显示 较大的外边距，较小的不显示

解决方法：

1. 给父元素设置border

2. 给父元素设置padding

3. 给父元素设置 overflow :hidden
复合选择器

后代选择器： 嵌套结构中 选中所有后代（子子孙孙）元素

格式 ：  基本选择器1 基本选择器2 { 样式属性 }  后代选择器使用空格连接

子代选择器 :  在嵌套结构中 选中 所有 子一级 （不包括后代元素）元素

基本选择器1 > 基本选择器2 { 样式属性 }  后代选择器使用空格连接

交集选择器 在普通结构中 选择 既是... 又是... 的一个元素

标签选择器.类选择器 { 样式属性 }   例如： <div class="one"> </div>  div.one { ... }

并集选择器： 在普通结构中 主要用于对相同的样式进行集体声明

基本选择器1,基本选择器2 { 样式属性 }  例如：  div,h1,p { color:red; }

链接伪类选择器：

:link   用来设置鼠标未点击过的链接样式

:visited  设置鼠标点击过的链接样式

:hover   设置鼠标经过链接时候显示的样式  （使用最多的伪类）

:active  设置鼠标按下不松开的时候 链接显示的样式

元素的显示模式： 默认标签的显示方式例如：div默认占一行显示 span 可以在同一行显示



块元素：
特点：1. 独自占一行显示
      2.可以设置宽度和高度 及 内外边距
      3.默认宽度是 父元素宽度的100%（默认宽度和父元素一样大）
      4.块级元素内部可以 嵌套任何 元素

      注意： 个别文本类块级元素不能嵌套其他块级元素 h p dt
      常见的块级元素标签：  容器标签（盒子）一般都是块级元素  div ul li p h

行内元素
特点：
      1.在一行内可以显示多个 行内元素
      2.不能设置宽度 和高度 及 垂直方向的内外边距
      3.默认大小和内容 大小一致
      4.行内元素只能嵌套 文本和 其他行内元素

      注意：a标签可以嵌套块级元素 a标签不能和自身进行嵌套
      常见的行内元素标签： 和文字相关的标签 span  a strong em ins del
行内块元素
      1.可以在一行内显示多个
      2.可以设置宽度和高度
      3.默认大小和内容大小一致
      常见的行内块元素： 表单元素+图像标签  img input textarea select

转换块级元素
      display:block
转换行内元素
      display:inline
转换行内块元素
      display:inline-block

CSS背景属性

background-color: 设置背景颜色
background-image：url(图片路径)
background-repeat: 设置背景图片是否平铺 no-repeat  repeat  repeat-x  repeat-y
background-position: x y; 设置背景图片的位置  可以设置方位名称 还可以设置 具体的数字
background-attachment: 设置背景图片是否跟随滚动条滚动 scroll  fixed

背景属性的简写：
background: 背景颜色 背景图片 背景是否平铺 背景位置（坐标或者方位名词） 背景固定


背景透明
background-color
rgba(0~255,0~255,0~255, 0~1)  0完全透明 1 不透明

CSS三大特性：

层叠性 : css解决样式冲突的一种机制

同一个标签被 相同的选择器选中 设置了相同的样式 的时候 距离标签最近的样式生效
前提条件： 必须权重相同

继承性 CSS 中一部分样式属性可以被继承 在嵌套的结构中 子元素会继承父元素的样式

CSS中 与文字有关的样式都可以被继承 其他的样式都不可以被继承

优先级  当选择器不同的时候 样式冲突时候 浏览器 的解决方式

继承0 0 0 0 < * 通配符 < 标签选择器 < 类选择器(伪类) < id选择器 < 行内样式 < !important

1.权重不存在 进位关系   0 0 0 0
2.元素都被 选中的情况下 比较权重
3.权重相同 不比较优先级 执行层叠性