超链接

    <a target="页面打开位置" href="链接地址">内容</a>
    target:_blank 重新打开一个页面
    target:_self 当前页面打开

1.页面地址：
基础功能，用于进入该链接的页面；
2.锚点：
需要给标签名定义id，链接地址为#id名，即可在当前页面进行跳转；
3.功能性链接：
打电话打电话；
发邮件；
***

文本元素

    - h1-h6:对应一级标题到六级标题，字体大小默认情况下从大到小；
    - p：段落；
    - q：小段引用，一般不超过一行；
    - blockqoute:大段引用；
    - abbr：引用，一般用于英文缩写的全称解释；
    - cite：引用参考文献；
    - b：加粗突出显示的文本。因加粗一般无法量化不利于排版，一般不用；
    - strong：重要的文本；
    - i：应区别对待的文本，斜体；
    - em：强调的文本；

无语义元素

    - div：分区块，便于排版；
    - span：行内元素（不换行），仅用于给一小段文本添加样式；
    - br：空元素，用于在页面中换行，因换行后间距无法量化不利于排版，一般不用；
    - hr：空元素，用于在页面中加入分割符号，一般不用；
    - pre:预格式化元素，页面显示代码格式。

实体字符

    书写格式：&实体名称；或&#实体编号；
    背景：在浏览器中，有些字符会被特殊处理，如<,>会被浏览器认为是标记符号，不会直接显示到页面；空白字符会被浏览器折叠成1个空格。
        空格      &nbsp；      &#160；
    <   小于符号    &lt；        &#60；
    >   大于符号 &gt；       &#62；
    &   并且符号 &&amp；     &#38；
    ©   版权符号 &copy;     &#169;

常见的CSS属性

color:red   颜色
text-align:center   对齐方式
font-size:28px 字    体大小
font-weight：bold    文字粗细
background-color：red     背景颜色

CSS选择器

基础选择器

元素
类
ID（锚点可以使用，一般不推荐使用，预留给JS用）

通配符选择器

格式：*+声明块
例子：*{color:red;}

并集选择器

h1{color:red;}
h2{color:red;}
h3{color:red;}
格式：元素或类或ID+","+元素或类或ID+声明块
例子：h1,h2,h3{color:red;}
 p,.container,#box{background-color:deeppink;}

层次选择器

子集选择器

格式：父级元素名称+">"+子级元素名称+声明块
例子：div>p{color:red;}

后代选择器

格式：祖先元素名称+"空格"+后代元素名称+声明块
例子：div p{color:red;}

兄弟选择器

格式：兄弟元素A+"+"+兄弟元素B+声明块
例子：div+p{color:red;}

注：只能选中元素A后面的第一个元素

通用选择器

格式：兄弟元素A+"~"+兄弟元素B+声明块
例子：div~p{color:red;}

注：表示可以选择元素A后面任意位置的同级元素

伪类选择器

动态伪类选择器

未访问

格式：a +":"+"link"+声明块
例子：a:link{color:black;}

已访问(访问后）

格式：a +":"+"visited"+声明块
例子：a:visited{color:green;}

悬停（鼠标停留在链接上时的样式）

格式：a +":"+"hover"+声明块
例子：a:hover{color:deeppink;}

点击时

格式：a +":"+"active"+声明块
例子：a:active{color:deeppink;}

焦点框（多用于输入框肯链接）

格式：a +":"+"focus"+声明块
a:focus{color:五光十色；}

以上伪类书写顺序
A方案：
link,visited,focus,hover,active
B方案：
visited,link,focus,hover,active
注：IE7以前是不支持:focus
注：IE6以前是不支持:hover,active

结构伪类选择器

1.格式：元素名称+":nth-child(n)"+{声明块}
例子： h1:nth-child(5){color:gray;}
表示选中第5个h1元素，颜色为灰色
表示选中第5个元素，并且满足是h1的情况，才会应用样式

注：（n）中的n表示元素的位置
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。


2.格式：元素名称+":nth-of-type(n)"+{声明块}
例子： h1:nth-of-type(5){color:gray;}

表示选中类别为h1的第5个h1
表示先筛选出所有的h1标签，然后在结果里选中第5个h1
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。


3.格式：元素名称+":first-child"+{声明块}
例子： h1:fist-child{color:gray;}
表示选中第1个h1元素

4.格式：元素名称+":last-child"+{声明块}
例子： h1:last-child{color:gray;}
表示选中最后1个h1元素


5.格式：元素名称+":nth-child(odd)"+{声明块}
例子： h1:nth-child(odd){color:gray;}
表示选中奇数项

6.格式：元素名称+":nth-child(even)"+{声明块}
例子： h1:nth-child(even){color:gray;}
表示选中偶数项

否定伪类选择器

格式：元素名称+":not(相应的选择条件)"+{声明块}
例子： h1:not(:nth-child(3)){color:gray;}
表示除第3个h1元素，都应用样式

伪元素选择器

    1.格式：元素名称+":"+"before"+｛content:"加的内容"｝

    例子：h1:before{
    content: "F51";
    }
    表示在元素前面加内容

    2.格式：元素名称+":"+"after"+｛content:"加的内容"｝

    例子：h1:before{
    content: "F51";
    }
    表示在元素后面加内容

    3.格式：元素名称+":"+"first-line"+{声明块}
    例子：p:first-line{color:green}
    表示选中第一行
    
    4.格式：元素名称+":"+"first-letter"+{声明块}
    例子：p:first-letter{color:red}
    表示选中第一个字母

    5.格式：元素名称+"::"+"selection"+{声明块}
    例子：p::selection{background-color:green;color:chocolate}
    表示设置选中内容的背景色和字体色

层叠

层叠机制

当发生声明冲突（同一个样式的不同值应用到同一个标签上）时浏览器会触发层叠机制。

层叠过程

比较优先级

重要性：属性值+！important;
来源：用户>开发者>浏览器

比较特殊性（特指值或特指度）
每个声明都有一个特殊性（specificity）
选择器规则适用范围越大，特殊性越小。
行内样式>ID选择器>类选择器>元素选择器>通配符选择器

a：声明是行内样式则为1，否则为0；
b：规则中ID选择器的个数；
c：规则中类选择器，伪类选择器，属性选择器个数；
d：规则中元素选择器，伪元素选择器的个数
通配符选择器的特殊性为0。

a, b, c, d依次比较只要对应位相同进入下一位比较，否则停止比较，该位上数值大的胜出。

选择器分组时（并集选择器）要分开计算
h1,h2,h3{color:red;}
h1{color:blue;} 胜出

比较源次序

最后出现的声明胜出，其他的全部淘汰。
该规则的实际应用：
CSS Reset代码前置 解决兼容性问题；
a元素的伪类书写顺序。

继承（inherit）

是指子元素会自动拥有父元素的某些属性

可被继承的属性：color,font-size,font-weight,text-align等
基本上文本类的样式都可以被继承。
不可被继承的属性：background-color。
继承的场景：

该属性是可继承属性；
该属性在样式表中没有声明。

强制继承

    也叫显示继承，是指将css属性值设置为inherit。
    为了继承某些不可继承属性或已声明属性。

盒子模型

    每个元素都在页面中形成一个矩形区域，CSS称该区域为盒子（box）

盒模型单个盒子组成
视觉格式化模型多个盒子的排列（相互作用，影响）
布局实际应用

margin

    外边框，与其他盒子之间的距离。
    指盒模型可见部分之外的透明区域空间，让我们可以控制页面元素之间的距离，帮助将元素定位到页面上的一个特定位置上，或者给元素提供呼吸的空间，让他与其他元素保持一个安全的距离。

padding

    内边距，边框和内容之间的可选距离。
    他会应用到内容和内边距组成的区域。因此，内边距常被用于在内容周围创建一个隔离带，这样内容就会与背景混在一起。

content

    内容的高度和宽度。

overflow

    超出内容的展示方式。

1.overflow:hidden 表示超出内容隐藏；
2.overflow:auto 表示哪个方向的内容超出，该方向出现滚动条；
3.overflow:visible 默认值，溢出部分显示；
4.overflow:scroll 表示垂直和水平方向上都出现滚动条，但只有超出的方向滚动条可用。

    全屏显示时页面紧张出现横向滚动条。

盒模型padding

    类似于箱子和内部物品之间的填充物。
    padding-top：上内边框，不可继承，默认值为0px，其他取值单位em、%。

padding：取1,2,3,4,个值分别对应不同的意义。
上，右，下，左对应top，right，bottom，left方向。

取1个值时，4个方向相同；
取2个值时，上下相同对应第一个值，右左相同对应第二个值；
取3个值时，第一个值对应上，第三个值对应下，第二个值对应相同的右左；
取4个值时，分别对应上右下左。

border-radius

取1个值时，4个角的弧度半径；
取2个值时，第一个是左上和右下的弧度半径；第二个是右上和左下的弧度半径。
设置某一个角的圆角：
border-bottom-right-radius:30px(对应x轴半径) 20px（对应y轴半径）;
border的默认颜色是当前标签的字体颜色。
取transparent值表示透明色。
#盒子模型补充

子盒子

边框盒（border-box）
```
背景色默认渲染区域，可通过设置background-clip： 调节。
```
填充盒（padding-box）
```
严格意义上overflow溢出是指溢出填充盒。
```
内容盒（content-box）
```
默认情况下width和height属性是指内容盒的宽度和高度。
```
盒子尺寸的计算
```
box-sizing：设置元素的尺寸范围。
content-box（默认值）
border-box表示元素的width和height设置区域是边框盒。
可以解决页面横向滚动条的问题。
```
注：width：100%的基础上加margin，设置box-sizing:border-box也无效。
outline：外边框，用法和border完全一致。不占尺寸显示，可辅助布局。

视觉格式化模型（visual formatting model）

    css的一种机制，规定了页面中多个盒子如何相互影响，如何布局。

视口（viewport）

    可视窗口，通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关。
    当内容超出视口时，浏览器会出现滚动条。

包含块（contianing block）

    每个元素都有一个包含块，他是指元素在页面中的摆放区域，通常情况下元素的包含块是他父元素的内容盒。
    html根元素的包含块是：初始化包含块（initial containing block）

定位体系

视觉格式化模型的基础，一共有3种：

常规流（normal flow）又叫文档流或常规文档流
浮动（float）默认值为none
绝对定位（absolute positioned）默认值为static
每一个元素都属于其中一个定位体系。
先判断绝对定位，如果position属性值为absolute或fixed则为绝对定位，否则进入浮动判断，如果float值为left或right，则为浮动定位，否则为常规流。

盒模型和定位体系
盒模型 = 盒子尺寸定位体系 = 盒子位置
定位体系会影响盒模型。（width和height值为auto时）
margin px, em, %, auto（可为负值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定单位，固定值或者绝对值；

    1em是指当前标签font-size的一倍。
    注：当前标签没有font-size时注意继承关系。

%和auto是相对单位，相对值。

    常规流中width取值为%，是指相对父级元素（包含块）width的百分比。
    margin，padding，width的百分比是包含块宽度的百分比。

三角形的绘制方法

将一个块级元素的border设置合适宽度，width和height设置为0.只设置一边的颜色，另外三边颜色设置为透明即可。通过调整每个边的border值调整三角形形状。
将width或者height设置合适的值可绘制梯形。

块级元素水平方向居中方法

该元素：margin-left：-50%；
包含块：padding-left：50%；

盒模型padding

    类似于箱子和内部物品之间的填充物。
    padding-top：上内边框，不可继承，默认值为0px，其他取值单位em、%。

padding：取1,2,3,4,个值分别对应不同的意义。
上，右，下，左对应top，right，bottom，left方向。

取1个值时，4个方向相同；
取2个值时，上下相同对应第一个值，右左相同对应第二个值；
取3个值时，第一个值对应上，第三个值对应下，第二个值对应相同的右左；
取4个值时，分别对应上右下左。

border-radius

取1个值时，4个角的弧度半径；
取2个值时，第一个是左上和右下的弧度半径；第二个是右上和左下的弧度半径。
设置某一个角的圆角：
border-bottom-right-radius:30px(对应x轴半径) 20px（对应y轴半径）;
border的默认颜色是当前标签的字体颜色。
取transparent值表示透明色。
#盒子模型补充

子盒子

边框盒（border-box）
```
背景色默认渲染区域，可通过设置background-clip： 调节。
```
填充盒（padding-box）
```
严格意义上overflow溢出是指溢出填充盒。
```
内容盒（content-box）
```
默认情况下width和height属性是指内容盒的宽度和高度。
```
盒子尺寸的计算
```
box-sizing：设置元素的尺寸范围。
content-box（默认值）
border-box表示元素的width和height设置区域是边框盒。
可以解决页面横向滚动条的问题。
```
注：width：100%的基础上加margin，设置box-sizing:border-box也无效。
outline：外边框，用法和border完全一致。不占尺寸显示，可辅助布局。

视觉格式化模型（visual formatting model）

    css的一种机制，规定了页面中多个盒子如何相互影响，如何布局。

视口（viewport）

    可视窗口，通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关。
    当内容超出视口时，浏览器会出现滚动条。

包含块（contianing block）

    每个元素都有一个包含块，他是指元素在页面中的摆放区域，通常情况下元素的包含块是他父元素的内容盒。
    html根元素的包含块是：初始化包含块（initial containing block）

定位体系

视觉格式化模型的基础，一共有3种：

常规流（normal flow）又叫文档流或常规文档流
浮动（float）默认值为none
绝对定位（absolute positioned）默认值为static
每一个元素都属于其中一个定位体系。
先判断绝对定位，如果position属性值为absolute或fixed则为绝对定位，否则进入浮动判断，如果float值为left或right，则为浮动定位，否则为常规流。

盒模型和定位体系
盒模型 = 盒子尺寸定位体系 = 盒子位置
定位体系会影响盒模型。（width和height值为auto时）
margin px, em, %, auto（可为负值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定单位，固定值或者绝对值；

    1em是指当前标签font-size的一倍。
    注：当前标签没有font-size时注意继承关系。

%和auto是相对单位，相对值。

    常规流中width取值为%，是指相对父级元素（包含块）width的百分比。
    margin，padding，width的百分比是包含块宽度的百分比。

三角形的绘制方法

块级元素水平方向居中方法

该元素：margin-left：-50%；
包含块：padding-left：50%；

盒模型padding

    类似于箱子和内部物品之间的填充物。
    padding-top：上内边框，不可继承，默认值为0px，其他取值单位em、%。

padding：取1,2,3,4,个值分别对应不同的意义。
上，右，下，左对应top，right，bottom，left方向。

取1个值时，4个方向相同；
取2个值时，上下相同对应第一个值，右左相同对应第二个值；
取3个值时，第一个值对应上，第三个值对应下，第二个值对应相同的右左；
取4个值时，分别对应上右下左。

border-radius

取1个值时，4个角的弧度半径；
取2个值时，第一个是左上和右下的弧度半径；第二个是右上和左下的弧度半径。
设置某一个角的圆角：
border-bottom-right-radius:30px(对应x轴半径) 20px（对应y轴半径）;
border的默认颜色是当前标签的字体颜色。
取transparent值表示透明色。
#盒子模型补充

子盒子

边框盒（border-box）
```
背景色默认渲染区域，可通过设置background-clip： 调节。
```
填充盒（padding-box）
```
严格意义上overflow溢出是指溢出填充盒。
```
内容盒（content-box）
```
默认情况下width和height属性是指内容盒的宽度和高度。
```
盒子尺寸的计算
```
box-sizing：设置元素的尺寸范围。
content-box（默认值）
border-box表示元素的width和height设置区域是边框盒。
可以解决页面横向滚动条的问题。
```
注：width：100%的基础上加margin，设置box-sizing:border-box也无效。
outline：外边框，用法和border完全一致。不占尺寸显示，可辅助布局。

视觉格式化模型（visual formatting model）

    css的一种机制，规定了页面中多个盒子如何相互影响，如何布局。

视口（viewport）

    可视窗口，通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关。
    当内容超出视口时，浏览器会出现滚动条。

包含块（contianing block）

    每个元素都有一个包含块，他是指元素在页面中的摆放区域，通常情况下元素的包含块是他父元素的内容盒。
    html根元素的包含块是：初始化包含块（initial containing block）

定位体系

视觉格式化模型的基础，一共有3种：

常规流（normal flow）又叫文档流或常规文档流
浮动（float）默认值为none
绝对定位（absolute positioned）默认值为static
每一个元素都属于其中一个定位体系。
先判断绝对定位，如果position属性值为absolute或fixed则为绝对定位，否则进入浮动判断，如果float值为left或right，则为浮动定位，否则为常规流。

盒模型和定位体系
盒模型 = 盒子尺寸定位体系 = 盒子位置
定位体系会影响盒模型。（width和height值为auto时）
margin px, em, %, auto（可为负值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定单位，固定值或者绝对值；

    1em是指当前标签font-size的一倍。
    注：当前标签没有font-size时注意继承关系。

%和auto是相对单位，相对值。

    常规流中width取值为%，是指相对父级元素（包含块）width的百分比。
    margin，padding，width的百分比是包含块宽度的百分比。

三角形的绘制方法

块级元素水平方向居中方法

该元素：margin-left：-50%；
包含块：padding-left：50%；

盒模型padding

    类似于箱子和内部物品之间的填充物。
    padding-top：上内边框，不可继承，默认值为0px，其他取值单位em、%。

padding：取1,2,3,4,个值分别对应不同的意义。
上，右，下，左对应top，right，bottom，left方向。

取1个值时，4个方向相同；
取2个值时，上下相同对应第一个值，右左相同对应第二个值；
取3个值时，第一个值对应上，第三个值对应下，第二个值对应相同的右左；
取4个值时，分别对应上右下左。

border-radius

取1个值时，4个角的弧度半径；
取2个值时，第一个是左上和右下的弧度半径；第二个是右上和左下的弧度半径。
设置某一个角的圆角：
border-bottom-right-radius:30px(对应x轴半径) 20px（对应y轴半径）;
border的默认颜色是当前标签的字体颜色。
取transparent值表示透明色。
#盒子模型补充

子盒子

边框盒（border-box）
```
背景色默认渲染区域，可通过设置background-clip： 调节。
```
填充盒（padding-box）
```
严格意义上overflow溢出是指溢出填充盒。
```
内容盒（content-box）
```
默认情况下width和height属性是指内容盒的宽度和高度。
```
盒子尺寸的计算
```
box-sizing：设置元素的尺寸范围。
content-box（默认值）
border-box表示元素的width和height设置区域是边框盒。
可以解决页面横向滚动条的问题。
```
注：width：100%的基础上加margin，设置box-sizing:border-box也无效。
outline：外边框，用法和border完全一致。不占尺寸显示，可辅助布局。

视觉格式化模型（visual formatting model）

    css的一种机制，规定了页面中多个盒子如何相互影响，如何布局。

视口（viewport）

    可视窗口，通常指浏览器的可视区域。视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关。
    当内容超出视口时，浏览器会出现滚动条。

包含块（contianing block）

    每个元素都有一个包含块，他是指元素在页面中的摆放区域，通常情况下元素的包含块是他父元素的内容盒。
    html根元素的包含块是：初始化包含块（initial containing block）

定位体系

视觉格式化模型的基础，一共有3种：

常规流（normal flow）又叫文档流或常规文档流
浮动（float）默认值为none
绝对定位（absolute positioned）默认值为static
每一个元素都属于其中一个定位体系。
先判断绝对定位，如果position属性值为absolute或fixed则为绝对定位，否则进入浮动判断，如果float值为left或right，则为浮动定位，否则为常规流。

盒模型和定位体系
盒模型 = 盒子尺寸定位体系 = 盒子位置
定位体系会影响盒模型。（width和height值为auto时）
margin px, em, %, auto（可为负值）
border px, em
padding px, em, %
width px, em, %, auto
height px, em, %, auto

px和em是固定单位，固定值或者绝对值；

    1em是指当前标签font-size的一倍。
    注：当前标签没有font-size时注意继承关系。

%和auto是相对单位，相对值。

    常规流中width取值为%，是指相对父级元素（包含块）width的百分比。
    margin，padding，width的百分比是包含块宽度的百分比。

三角形的绘制方法

块级元素水平方向居中方法

该元素：margin-left：-50%；
包含块：padding-left：50%；

块盒在常规流下的位置

    盒子在包含块的content垂直方向上依次摆放；
    依次摆放：按照HTML元素的书写顺序从上到下摆放；
    盒子在包含块中的尺寸是整个盒子的尺寸。

垂直方向上

若两个盒子外边距相邻（margin），则进行合并（折叠）。水平方向上不会。

    外边距相邻：两个元素的外边距之间没有padding，border，content。

兄弟元素合并：margin都为正值取最大，都为负值取最小，一正一负相加。

快盒常规流盒模型的auto值

水平方向

常规流盒子水平方向上的尺寸，必须等于包含块的尺寸。如果该盒子的width+margin小于包含块的width，不足部分有该元素的margin补齐。

    margin-left：auto && margin-right：auto 居中
    margin-left：定值 && margin-right：auto  右边补齐
    margin-left：定值 && margin-right：定值 仍不足，同margin-right：auto 的情况。

想要一个块级元素居中的方法：
给固定宽度，左右margin值设置为auto。

垂直方向

margin-top || margin-bottom：auto = 0。
height：auto = 适应内容的高度。

浮动

当元素的float属性取值为left和right时，元素属于浮动定位。
float：不可继承；
取值：none（默认取值）= 不浮动；
left = 左浮动；
right = 右浮动；
浮动时： margin：auto = 0；
width：auto = 适应内容宽度；
height：auto = 适应内容高度。

浮动规则

左浮动的盒子向左、向上排列；
右浮动的盒子向右、向上排列；
浮动盒子的顶边不得高于上一个盒子的顶边；
若剩余的空间无法放下浮动的盒子，则该盒子向下移动，知道具备足够的空间容纳盒子，然后再向左或向右移动。

当常规流遇上浮动
常规流盒子和浮动盒子混合摆放；
浮动盒子在摆放时避开常规流盒子；
常规流盒子在摆放时无视浮动盒子。

HTML5和css3

超链接

文本元素

无语义元素

实体字符

常见的CSS属性

CSS选择器

基础选择器

层次选择器

伪类选择器

伪元素选择器

层叠

层叠机制

层叠过程

继承（inherit）

强制继承

盒子模型

margin

padding

content

overflow

盒模型padding

border-radius

子盒子

边框盒（border-box）

填充盒（padding-box）

内容盒（content-box）

盒子尺寸的计算

视觉格式化模型（visual formatting model）

视口（viewport）

包含块（contianing block）

定位体系

盒模型和定位体系

三角形的绘制方法

块级元素水平方向居中方法

盒模型padding

border-radius

子盒子

边框盒（border-box）

填充盒（padding-box）

内容盒（content-box）

盒子尺寸的计算

视觉格式化模型（visual formatting model）

视口（viewport）

包含块（contianing block）

定位体系

盒模型和定位体系

三角形的绘制方法

块级元素水平方向居中方法

盒模型padding

border-radius

子盒子

边框盒（border-box）

填充盒（padding-box）

内容盒（content-box）

盒子尺寸的计算

视觉格式化模型（visual formatting model）

视口（viewport）

包含块（contianing block）

定位体系

盒模型和定位体系

三角形的绘制方法

块级元素水平方向居中方法

盒模型padding

border-radius

子盒子

边框盒（border-box）

填充盒（padding-box）

内容盒（content-box）

盒子尺寸的计算

视觉格式化模型（visual formatting model）

视口（viewport）

包含块（contianing block）

定位体系

盒模型和定位体系

三角形的绘制方法

块级元素水平方向居中方法

块盒在常规流下的位置

垂直方向上

快盒常规流盒模型的auto值