CSS

内联属性（行内属性）：

在标签内用 style属性

问题

只能对一个标签生效，不利于后期维护

内部样式表：

将样式编写到head中的style标签里，然后通过css选择器选中元素并为其设置各种样式，修改时只需修改一处即可。

内部样式更方便对样式的复用

问题

内部样式表中的样式只能对一个网页起作用。

外部样式表：

将css样式编写到一个css外部文件中，然后通过link标签引入，

这样可以使用到浏览器的缓存机制，从而加快网页加载速度，提高用户体验。

选择器

元素选择器：

作用：

根据标签来选中指定元素

语法：

标签名{}

例子：

p{},h1{},div{}

id选择器：

作用

根据元素id属性值选中一个元素

语法：

#id属性{}

例子

#box{}

#red{}

类选择器：

作用:

根据元素class属性值选中一组元素

语法：

.class{}

例子:

.blue{}

交集选择器：

作用：

选中同时复合多个条件的元素

语法：

选择器1选择器2选择器n{}

注意：

交集选择器中如果有元素选择器必须使用元素选择器开头

并集选择器（选择器分组）：

作用:

同时选择多个选择器对应的元素

语法:

选择器1，选择器2，选择器n{}

关系选择器：

常见关系：

父元素：
- 直接包含子元素的元素
子元素
- 直接被父元素包含的元素
祖先元素
- 直接或间接包含后代元素的元素
- 一个元素的父元素也是他的祖先元素
后代元素
直接或间接被祖先元素包含的元素
子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素
子元素选择器：

作用：

选中指定父元素的指定子元素

语法：

父元素>子元素(>…)

例子：

div>span{}

后代选择器：

作用：

选中指定元素内的指定后代元素

语法：

祖先后代{}

例子：

div span{}

兄弟选择器：

作用：

选中指定元素内的指定兄弟元素

语法：

选择下一个：

前一个+下一个{}
选择下面所有：

兄~第{}

例子：

div+span{}

div~span{}

属性选择器：

样式	作用
[属性名]	选择含有指定属性的元素
[属性名=属性值]	选择含有指定属性和属性值的元素
[属性名^=属性值]	选择属性值以指定值开头的元素
[属性名$=属性值]	选择属性值以指定值结尾的元素
[属性名*=属性值]	选择属性值含有指定值的元素

伪类选择器：

伪类用来描述一个元素的特殊状态，比如：第一个元素、被点击的元素、鼠标移入的元素……

伪类一般以：开头

伪类	作用
:first-child	第一个元素
:last-child	最后一个元素
:nth-child()	第n个元素
:first-of-type	同类型元素中第一个元素
:last-of-type	同类型元素中最后一个元素
:nth-of-type()	同类型元素中第n个元素
:not()	将符合条件的元素从选择器中除去

注：nth-child():

n==>全选
2n或even==>选中偶数元素
2n+1或odd==>选中奇数元素

一些常用的伪类：

:link（超链接特有）

正常的链接

:visited（超链接特有）

访问过的链接

由于隐私原因，只能修改链接的颜色

:hover

鼠标移入的状态

:active

鼠标点击

伪元素：

::first-letter

表示第一个字母
::first-line

表示第一行
::selection

表示选中的内容
::before

元素的开始
::after

元素的最后

注：before和after必须结合content属性来使用

继承：

样式的继承，为一个元素设置的样式同时也会应用到他的后代元素上

继承是发生在祖先和后代之间的

注：并不是使用的样式都会被继承，比如：背景相关的，布局相关的等这些样式都不会被继承

选择器优先级：

样式的冲突：
当我们通过不同的选择器，选出相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突，发生样式冲突时，应用那个样式由选择器权重（优先级）决定
选择器权重：

选择器	权重
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承选择器	无

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后面添加！important，则此时该样式会获取到最高的优先级，甚至超过内联样式

注:慎用

像素和百分比：

长度单位：
- 像素
  - 不同显示器的像素大小是不同的，像素越小的屏幕显示的效果越清晰
  - 相同的200px在不同的设备下显示效果是不一样的
- 百分比
  - 设置百分比可以使子元素随父元素的改变而改变
- em
  - em是相对与元素的字体大小来计算的
  - 1em=1font-site
  - em会根据字体大小的改变而改变
- rem
  - rem是相对于根元素（html）的字体大小来计算的
颜色单位
- RGB值
  - RGB通过三种颜色的不同浓度来调出不同的颜色
  - R red，G green，B blue
  - 每一种颜色的范围在0-255之间
  - 语法RGB(红色，绿色，蓝色)
- RGBA
  - 在rgb的基础上添加了一个a表示不透明度
  - 需要4个值，前3个rgb一样，第四个表示不透明度
    
    1 完全不透明
    
    0 完全题目
    
    .5 半透明
- 十六进制的RGB
  - 语法#红色绿色蓝色
  - 颜色浓度通过00-ff
  - 如果两位两位重复可以简写
    
    #aabbcc–>#abc
- HSLA值
  - H 色相（0-360）
  - S 饱和度，颜色的亮度 0%-100%
  - L 亮度，颜色的亮度 0%-100%

文档流：

网页是一个多层结构，一层摞着一层，通过css可以分别为每一层来设置样式，作为用户来讲只能看到最上面一层。

这些层中最下面的一层称为文档流，文档流是网页的基础，我们所创建的元素都是在文档流中进行排列。

元素主要有两个状态

在文档流中

不在文档流中

元素在文档流中的特点

块元素：
块元素会在页面中独占一行（自上向下垂直排列）

默认宽度是父元素的全部（会充满父元素）

默认高度是被内容撑开（子元素）

行内元素：

行内元素不会独占页面的一行，只占自身的大小

行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列

盒子模型：

css将页面中的所有元素都设置为一个盒子

将元素设置为矩形盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

每一个盒子都由以下几个部分组成：

内容区（content）

元素中所有子元素和文本内容都在内容区中排列

内容区的大小由width和height两个属性来设置

width 设置内容区的宽度

height 设置内容区的高度
内边距（padding）
- 内容区和边框之间的距离
- 一个有4个方向的内边距
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
- 内边距的设置会影响盒子的大小
- 背景颜色会延伸到内边距上
一个盒子的可见大小由内容区，内边距和边框共同决定

所以在计算盒子的大小是，需要将这三个区域加到一起计算。
- padding简写属性和border-width一样
边框（border)

边框属于盒子的边缘，边框里边属于盒子内部，出了边框都是盒子的外部

边框的大小会影响盒子的大小

要设置边框，至少要设置三个样式：
- 边框的宽度 border-width
  - 默认值：一般是3px
  - 可以用来指定4个方向的边框宽度
    - 四个值：上右下左
    - 三个值：上左右下
    - 两个值：上下左右
    - 一个值：上下左右
  - border-xxx-width
    - xxx可以使 top，right，bottom，left
    - 可以用来单独指定某个边的宽度
- 边框的颜色 border-color
  - 默认使用color的值
  - 其余同上
- 边框的样式 border-style
  - solid 实线
  - dotted 点状实线
  - dashed 虚线
  - double 双线
  - 默认值none，表示没有边框
  - 其余同上
- border属性简写
  
  通过该属性可以同时设置边框的所有相关样式，并且没有顺序要求
  
  除了border以外还有四个border-xxx
  
  border-top
  
  border-right
  
  border-bottom
  
  border-left
外边距（margin）

外边距不会影响盒子可见框的大小，但是会影响盒子的位置，一共有4个方向的外边距：
- margin-top
  - 上外边距，设置一个正值，元素会向下移动
- margin-right
  - 默认情况下设置margin-right不会产生任何效果
- margin-bottom
  - 下外边距，设置一个正值，其下边的元素会向下移动
- margin-left
  - 左外边距，设置一个正值，元素会向右移动
- margin也可以设置负值，此时元素会向相反方向移动
元素在页面中默认是按照自左向右的顺序排列的，所以默认情况下如果设置左和上边距会移动元素自身，而下和右边距会移动其他元素。

margin可以简写属性

元素的水平方向布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

一个元素在其父元素中，水平布局必须满足以下等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度

以上等式必须满足，如果相加结果使等式不成立，则被称为过渡约束，则等式会自动调整
- 调整的情况：
  - 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值使等式满足
  - 七个值中有三个值设置为auto
    
    width
    
    margin-left
    
    margin-right
    - 如果某个值为auto，则会自动调整为auto的那个值，使等式成立
    - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
    - 如果将三个值都设置为auto，则外边距都是0，宽度最大
    - 如果将两个外边距设置为auto，宽度值固定，则会将外边距设置为相同的值
      
      利用这一点可以使一个元素在其父元素中水平居中
      
      eg：
      
      width:xxpx
      
      margin:0 auto
元素的垂直方向布局：
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow属性来设置父元素如何处理溢出的子元素

可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示

hidden 溢出的内容将会被裁剪不显示

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

垂直外边距的重叠（折叠）

相邻的垂直元素外边距会发生重叠现象

兄弟元素：
1. 兄弟元素间相邻垂直外边距会取两者之间的较大值（两者都是正值）
2. 特殊情况：
  - 如果相邻的外边距一正一负，则取两者之和
  - 如果都为负取绝对值大的
```
**注**：兄弟元素之间的外边距重叠是有利于开发的，所以不需要处理。
```
父子元素：
1. 父子元素之间相邻外边距，子元素的会传递给父元素
2. 父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒子模型：

行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面布局
行内元素可以设置border，垂直方向border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局
display用来设置显示的类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内元素，行内块，既可以设置宽度和高度又不会独占一行
- table 将元素设置为一个表格
- none 元素不在页面中显示
visibility 用来设置元素的显示状态
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置

默认样式：

通常情况下，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面布局，通常情况下编写网页时必须要去除浏览器默认的样式。

CSS

内联属性（行内属性）：

问题

内部样式表：

问题

外部样式表：

选择器

元素选择器：

作用：

语法：

例子：

id选择器：

作用

语法：

例子

类选择器：

作用:

语法：

例子:

交集选择器：

作用：

语法：

注意：

并集选择器（选择器分组）：

作用:

语法:

关系选择器：

常见关系：

子元素选择器：

作用：

语法：

例子：

后代选择器：

作用：

语法：

例子：

兄弟选择器：

作用：

语法：

例子：

属性选择器：