HTML5和css3

超链接

    <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选择器

基础选择器

1. 元素
2. 类

3. ID（锚点可以使用，一般不推荐使用，预留给JS用）

4. 通配符选择器

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

5. 并集选择器

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

   层次选择器

6. 子集选择器

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

7. 后代选择器

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

8. 兄弟选择器

   格式：兄弟元素A+"+"+兄弟元素B+声明块
   例子：div+p{color:red;}
   
   注：只能选中元素A后面的第一个元素

9. 通用选择器

   格式：兄弟元素A+"~"+兄弟元素B+声明块
   例子：div~p{color:red;}
   
   注：表示可以选择元素A后面任意位置的同级元素

   伪类选择器

• 动态伪类选择器

1. 未访问

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

2. 已访问(访问后）

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

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

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

4. 点击时

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

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

   格式：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}
    表示设置选中内容的背景色和字体色

层叠

层叠机制

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

层叠过程

1. 比较优先级

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

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

   a：声明是行内样式则为1，否则为0；
   b：规则中ID选择器的个数；
   c：规则中类选择器，伪类选择器，属性选择器个数；
   d：规则中元素选择器，伪元素选择器的个数
   通配符选择器的特殊性为0。
   
   a, b, c, d依次比较只要对应位相同进入下一位比较，否则停止比较，该位上数值大的胜出。
   
   选择器分组时（并集选择器）要分开计算
   h1,h2,h3{color:red;}
   h1{color:blue;} 胜出

3. 比较源次序

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

   继承（inherit）

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

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

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

强制继承

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

盒子模型

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

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

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种：

1. 常规流 （normal flow） 又叫文档流或常规文档流
   
2. 浮动（float）默认值为none

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

   盒模型和定位体系

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

8. 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种：

1. 常规流 （normal flow） 又叫文档流或常规文档流
   
2. 浮动（float）默认值为none

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

   盒模型和定位体系

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

8. 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种：

1. 常规流 （normal flow） 又叫文档流或常规文档流
   
2. 浮动（float）默认值为none

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

   盒模型和定位体系

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

8. 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种：

1. 常规流 （normal flow） 又叫文档流或常规文档流
   
2. 浮动（float）默认值为none

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

   盒模型和定位体系

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

8. 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%；

块盒在常规流下的位置

    盒子在包含块的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 = 适应内容高度。

浮动规则

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

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

content