HTML(4) 基础界面介绍

一、Box Model

1. Margin

Clears an area outside the border. The margin is transparent.

        1) Property: 

            margin-top, margin-right, margin-left, margin-bottom

        2) Syntax examples: 

  四值均为0

h1 { margin: 0; }

  20px: top and bottom, 10px: left and right.

h1 { margin: 20px 10px; }

  10px: top, 30px: right and left, 20px: bottom.

h1 { margin: 10px 30px 20px; } 

  top, right, bottom, left（上-右-下-左）

h1 { margin: 20px 30px 0 30px; }

2. Border 

A border that goes around the padding and content.

(顺序同margin)

3. Padding

Clears an area around the content. The padding is transparent.

(顺序同margin)

4. Content

The content of the box, where text and images appear.

二、float porperty

三、clear porperty

四、overflow porperty

          1. Value: 

           auto, hidden, and scroll.

五、dispaly porperty

          1. display: none

  The element will not be displayed.

main { margin-left: 100px; 
       padding: 10px;
       background-color: #FFFFFF; 
       display: none;}

          2. display: block

The element is rendered as a block element – even if it is actually an inline element, such as a hyperlink.

main { margin-left: 100px; 
       padding: 10px;
       background-color: #FFFFFF; 
       display: block;}

          3. display: inline

The element will be rendered as an inline element – even if it is actually a block element – such as a <li>.

main { margin-left: 100px; 
       padding: 10px;
       background-color: #FFFFFF; 
       display: inline;}

          4. display: inline-block

The element will display as an inline display element adjacent to other inline display elements but also can be configured with properties of block display elements including width and height.

main { margin-left: 100px; 
       padding: 10px;
       background-color: #FFFFFF; 
       display: inline-block;}

六、Position Property

        1. Static

                -Default value, the element is rendered in normal flow.

        2. Fixed

                -Configures the location of an element within the browser viewport; the element does not move when the page is scrolled.

        3. Relative

                -Configures the location of an element relative to where it would otherwise render in normal flow.

        4. Absolute

                -Configures the location of an element outside of normal flow precisely in its container element.

七、Pseudo-classes

          1. link（默认状态）

                - default state for a hyperlink.

          2. visited （访问过的链接）

•         – a hyperlink that has been visited.   

          3. focus （用键盘选中时）

•         – triggered when the hyperlink has focus.

          4. hover （鼠标移动到链接上时）

•         – triggered when the mouse moves over the hyperlink.

          5. active （双击时）

•          – triggered when the hyperlink is being clicked.

          6. 优先级 Priority

1. :link（最低）< :visited < :focus < :hover < :active（最高）