HTML5 and CSS3

Hypertext links

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

1. Page Address:
A basic function for accessing the linked page;
2. Anchor point:
Need to define the tag name ID, the link address is #id name, you can jump on the current page;
3. Functional Links:
Make a phone call;
Send an email;
***

Text elements

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

No semantic elements

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

Entity characters

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

Common CSS Properties

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

CSS Selector Base Selector

1. Elements
2. Class

3. ID (anchor Point can be used, generally not recommended for use, reserved for JS)

4. Wildcard Selector

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

5. and set Selector

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

   Hierarchy Selector

6. Subset Selector

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

7. Descendant Selector

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

8. Brother Selector

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

9. Universal Selector

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

   Pseudo class Selector

• Dynamic Pseudo class Selector

1. Not accessed

     format: A + ":" + "link" + declaration block example: a:link{color:black;}  

2. Accessed (after access)

     format: A + ":" + "visited" + declaration block example: A:visited{color:green;}  

3. Hover (style when mouse over link)

     format: A + ":" + "hover" + declaration block example: A:hover{color:deeppink;}  

4. When clicked

     format: A + ":" + "active" + declaration block example: A:active{color:deeppink;}  

5. Focus Box (more for input frame Ken link)

     format: A + ":" + "Focus" + declaration block A:focus{color: colorful;} above pseudo-class writing order a scheme: Link,visited,focus,
   HOVER,ACTIVEB Scenario: visited,link,focus,hover,active Note: IE7 was previously unsupported: Focus Note: IE6 was previously unsupported: hover,active  

• Structure pseudo-Class selector

  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;}表示选中偶数项

• Negation pseudo-Class selector

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

Pseudo element Selector

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

Cascade CASCADE Mechanism

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

Cascade Process

1. Compare priority levels

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

2. Comparative particularity (of a particular value or degree of specificity)
   Each declaration has a special character (specificity)
   The greater the scope of the selector rule, the smaller the specificity.
   Inline style >id selector > class selector > Element selector > Wildcard Selector

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

3. Compare Source Order

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

   Inheritance (Inherit)

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

   Properties that can be inherited: color,font-size,font-weight,text-align, etc.
   Basically, the style of a text class can be inherited.
   Properties that cannot be inherited: Background-color.
   Inherited scenarios:

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

Forced inheritance

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

Box model

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

1. Box Model Single Box composition
2. Visual formatting models multiple boxes of arrangement (interaction, influence)
3. Layout Practical Application

Margin

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

Padding

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

Content

    内容的高度和宽度。

Overflow

    超出内容的展示方式。

1.overflow:hidden indicates that the content is hidden beyond;
2.overflow:auto indicates which direction the content exceeds, the scroll bar appears in that direction;
3.overflow:visible default value, overflow part display;
4.overflow:scroll indicates that scrollbars appear both vertically and horizontally, but only in the direction of the scroll bar that is out of use.

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

Box model padding

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

padding: Take 1,2,3,4, the value of each corresponding to different meanings.
Upper, right, bottom, left corresponds to top,right,bottom,left direction.

• When 1 values are taken, the 4 directions are the same;
  
• When 2 values are taken, the first value is the same as the upper and lower right, and the second value corresponds to the left.
  
• When 3 values are taken, the first value corresponds to the third value, and the second value corresponds to the same right-left;
• When you take 4 values, the corresponding upper right and bottom left are respectively.

Border-radius

• When taking 1 values, the arc radius of 4 corners;

• When you take 2 values, the first one is the arc radius at the top left and bottom right, and the second is the radius of radians on the upper right and bottom left.
  To set a corner fillet:
  border-bottom-right-radius:30px (corresponding to the x-axis radius) 20px (corresponding to the y-axis radius);
  The default color for border is the font color of the current label.
  Take the transparent value to indicate the transparent color.
  #盒子模型补充

  Sub box Border box (Border-box)

  背景色默认渲染区域，可通过设置background-clip： 调节。

  Filling box (Padding-box)

  严格意义上overflow溢出是指溢出填充盒。

  Content Box (Content-box)

  默认情况下width和height属性是指内容盒的宽度和高度。

  Calculation of box size

  box-sizing：设置元素的尺寸范围。content-box（默认值）border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。

  Note: width:100% based on the margin, set Box-sizing:border-box also invalid.
  Outline: outer border, usage and border exactly the same. Does not occupy a size display, can assist the layout.

Visual formatting models (visual formatting model)

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

Viewport (viewport)

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

Containing blocks (contianing block)

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

Positioning System

The basis of the visual formatting model, a total of 3 kinds:

1. Normal flow, also known as a document flow or regular document flow
   
2. Float (float) default value is None

3. Absolute positioning (absolute positioned) default value is static
   Each element belongs to one of the positioning systems.
   The absolute positioning is determined first, if the Position property value is absolute or fixed is absolute positioning, otherwise enter the floating judgment, if the float value is left or right, it is floating positioning, otherwise the regular flow.

   Box model and Positioning System box model = box size Positioning system = Box position
   The positioning system will affect the box model. (Width and height values are auto)
4. Margin px, em,%, auto (can be negative)
5. Border px, EM
6. padding px, em,%
7. width px, em,%, auto

8. Height px, em,%, auto

PX and EM are fixed units, fixed or absolute values;

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

% and auto are relative units, relative values.

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

How to draw triangles

Sets the border of a block-level element to the appropriate width, with width and height set to 0. Set only one side of the color, and the other three-sided color is set to transparent. Adjust the triangle shape by adjusting the border value for each edge.
Set the width or height to the appropriate value to draw the trapezoid.

Block-level element horizontal centering method

The element: margin-left:-50%;
Contains blocks: padding-left:50%;

Box model padding

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

padding: Take 1,2,3,4, the value of each corresponding to different meanings.
Upper, right, bottom, left corresponds to top,right,bottom,left direction.

• When 1 values are taken, the 4 directions are the same;
  
• When 2 values are taken, the first value is the same as the upper and lower right, and the second value corresponds to the left.
  
• When 3 values are taken, the first value corresponds to the third value, and the second value corresponds to the same right-left;
• When you take 4 values, the corresponding upper right and bottom left are respectively.

Border-radius

• When taking 1 values, the arc radius of 4 corners;

• When you take 2 values, the first one is the arc radius at the top left and bottom right, and the second is the radius of radians on the upper right and bottom left.
  To set a corner fillet:
  border-bottom-right-radius:30px (corresponding to the x-axis radius) 20px (corresponding to the y-axis radius);
  The default color for border is the font color of the current label.
  Take the transparent value to indicate the transparent color.
  #盒子模型补充

  Sub box Border box (Border-box)

  背景色默认渲染区域，可通过设置background-clip： 调节。

  Filling box (Padding-box)

  严格意义上overflow溢出是指溢出填充盒。

  Content Box (Content-box)

  默认情况下width和height属性是指内容盒的宽度和高度。

  Calculation of box size

  box-sizing：设置元素的尺寸范围。content-box（默认值）border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。

  Note: width:100% based on the margin, set Box-sizing:border-box also invalid.
  Outline: outer border, usage and border exactly the same. Does not occupy a size display, can assist the layout.

Visual formatting models (visual formatting model)

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

Viewport (viewport)

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

Containing blocks (contianing block)

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

Positioning System

The basis of the visual formatting model, a total of 3 kinds:

1. Normal flow, also known as a document flow or regular document flow
   
2. Float (float) default value is None

3. Absolute positioning (absolute positioned) default value is static
   Each element belongs to one of the positioning systems.
   The absolute positioning is determined first, if the Position property value is absolute or fixed is absolute positioning, otherwise enter the floating judgment, if the float value is left or right, it is floating positioning, otherwise the regular flow.

   Box model and Positioning System box model = box size Positioning system = Box position
   The positioning system will affect the box model. (Width and height values are auto)
4. Margin px, em,%, auto (can be negative)
5. Border px, EM
6. padding px, em,%
7. width px, em,%, auto

8. Height px, em,%, auto

PX and EM are fixed units, fixed or absolute values;

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

% and auto are relative units, relative values.

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

How to draw triangles

Sets the border of a block-level element to the appropriate width, with width and height set to 0. Set only one side of the color, and the other three-sided color is set to transparent. Adjust the triangle shape by adjusting the border value for each edge.
Set the width or height to the appropriate value to draw the trapezoid.

Block-level element horizontal centering method

The element: margin-left:-50%;
Contains blocks: padding-left:50%;

Box model padding

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

padding: Take 1,2,3,4, the value of each corresponding to different meanings.
Upper, right, bottom, left corresponds to top,right,bottom,left direction.

• When 1 values are taken, the 4 directions are the same;
  
• When 2 values are taken, the first value is the same as the upper and lower right, and the second value corresponds to the left.
  
• When 3 values are taken, the first value corresponds to the third value, and the second value corresponds to the same right-left;
• When you take 4 values, the corresponding upper right and bottom left are respectively.

Border-radius

• When taking 1 values, the arc radius of 4 corners;

• When you take 2 values, the first one is the arc radius at the top left and bottom right, and the second is the radius of radians on the upper right and bottom left.
  To set a corner fillet:
  border-bottom-right-radius:30px (corresponding to the x-axis radius) 20px (corresponding to the y-axis radius);
  The default color for border is the font color of the current label.
  Take the transparent value to indicate the transparent color.
  #盒子模型补充

  Sub box Border box (Border-box)

  背景色默认渲染区域，可通过设置background-clip： 调节。

  Filling box (Padding-box)

  严格意义上overflow溢出是指溢出填充盒。

  Content Box (Content-box)

  默认情况下width和height属性是指内容盒的宽度和高度。

  Calculation of box size

  box-sizing：设置元素的尺寸范围。content-box（默认值）border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。

  Note: width:100% based on the margin, set Box-sizing:border-box also invalid.
  Outline: outer border, usage and border exactly the same. Does not occupy a size display, can assist the layout.

Visual formatting models (visual formatting model)

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

Viewport (viewport)

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

Containing blocks (contianing block)

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

Positioning System

The basis of the visual formatting model, a total of 3 kinds:

1. Normal flow, also known as a document flow or regular document flow
   
2. Float (float) default value is None

3. Absolute positioning (absolute positioned) default value is static
   Each element belongs to one of the positioning systems.
   The absolute positioning is determined first, if the Position property value is absolute or fixed is absolute positioning, otherwise enter the floating judgment, if the float value is left or right, it is floating positioning, otherwise the regular flow.

   Box model and Positioning System box model = box size Positioning system = Box position
   The positioning system will affect the box model. (Width and height values are auto)
4. Margin px, em,%, auto (can be negative)
5. Border px, EM
6. padding px, em,%
7. width px, em,%, auto

8. Height px, em,%, auto

PX and EM are fixed units, fixed or absolute values;

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

% and auto are relative units, relative values.

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

How to draw triangles

Sets the border of a block-level element to the appropriate width, with width and height set to 0. Set only one side of the color, and the other three-sided color is set to transparent. Adjust the triangle shape by adjusting the border value for each edge.
Set the width or height to the appropriate value to draw the trapezoid.

Block-level element horizontal centering method

The element: margin-left:-50%;
Contains blocks: padding-left:50%;

Box model padding

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

padding: Take 1,2,3,4, the value of each corresponding to different meanings.
Upper, right, bottom, left corresponds to top,right,bottom,left direction.

• When 1 values are taken, the 4 directions are the same;
  
• When 2 values are taken, the first value is the same as the upper and lower right, and the second value corresponds to the left.
  
• When 3 values are taken, the first value corresponds to the third value, and the second value corresponds to the same right-left;
• When you take 4 values, the corresponding upper right and bottom left are respectively.

Border-radius

• When taking 1 values, the arc radius of 4 corners;

• When you take 2 values, the first one is the arc radius at the top left and bottom right, and the second is the radius of radians on the upper right and bottom left.
  To set a corner fillet:
  border-bottom-right-radius:30px (corresponding to the x-axis radius) 20px (corresponding to the y-axis radius);
  The default color for border is the font color of the current label.
  Take the transparent value to indicate the transparent color.
  #盒子模型补充

  Sub box Border box (Border-box)

  背景色默认渲染区域，可通过设置background-clip： 调节。

  Filling box (Padding-box)

  严格意义上overflow溢出是指溢出填充盒。

  Content Box (Content-box)

  默认情况下width和height属性是指内容盒的宽度和高度。

  Calculation of box size

  box-sizing：设置元素的尺寸范围。content-box（默认值）border-box表示元素的width和height设置区域是边框盒。可以解决页面横向滚动条的问题。

  Note: width:100% based on the margin, set Box-sizing:border-box also invalid.
  Outline: outer border, usage and border exactly the same. Does not occupy a size display, can assist the layout.

Visual formatting models (visual formatting model)

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

Viewport (viewport)

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

Containing blocks (contianing block)

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

Positioning System

The basis of the visual formatting model, a total of 3 kinds:

1. Normal flow, also known as a document flow or regular document flow
   
2. Float (float) default value is None

3. Absolute positioning (absolute positioned) default value is static
   Each element belongs to one of the positioning systems.
   The absolute positioning is determined first, if the Position property value is absolute or fixed is absolute positioning, otherwise enter the floating judgment, if the float value is left or right, it is floating positioning, otherwise the regular flow.

   Box model and Positioning System box model = box size Positioning system = Box position
   The positioning system will affect the box model. (Width and height values are auto)
4. Margin px, em,%, auto (can be negative)
5. Border px, EM
6. padding px, em,%
7. width px, em,%, auto

8. Height px, em,%, auto

PX and EM are fixed units, fixed or absolute values;

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

% and auto are relative units, relative values.

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

How to draw triangles

Sets the border of a block-level element to the appropriate width, with width and height set to 0. Set only one side of the color, and the other three-sided color is set to transparent. Adjust the triangle shape by adjusting the border value for each edge.
Set the width or height to the appropriate value to draw the trapezoid.

Block-level element horizontal centering method

The element: margin-left:-50%;
Contains blocks: padding-left:50%;

The position of the block box in the normal flow

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

In the vertical direction

If the outer margin of two boxes is adjacent (margin), it is merged (collapsed). Not in the horizontal direction.

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

Brother Element Merge: Margin is the maximum value, all negative values are minimized, a positive and negative sum.

The auto value horizontal direction of the fast box regular flow box model

The normal flow box must be equal to the size of the containing block in the horizontal direction. If the width+margin of the box is less than the width of the containing block, the margin of the element is not sufficient.

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

A method that wants to center a block-level element:
To fixed width, the left margin value is set to Auto.

Vertical direction

Margin-top | | Margin-bottom:auto = 0.
Height:auto = adapts to the height of the content.

Floating

When the value of the float property of an element is left and right, the element belongs to floating positioning.
float: not inheritable;
Value: None (default value) = Not floating;
left = floating on the right;
right = floating on the left;
When floating: Margin:auto = 0;
Width:auto = fit content width;
Height:auto = fit content height.

Floating rules

1. Left floating box to the left, upward arrangement;
   
2. The right floating box is arranged to the right and upward;
3. The top edge of the floating box must not be higher than the top edge of the previous box;
4. If the remaining space is unable to drop the floating box, the box moves downward, knowing that there is enough space to hold the box and then move left or right.

When the regular flow meets the floating
Conventional flow boxes and floating boxes mixed;
The floating box avoids the regular flow box when it is placed;
The regular flow box ignores floating boxes when placed.

HTML5 and CSS3