css (e) box model

Box model

Border Properties

Border width: border-width

Border color: border-color

Border-style: border-style

4 represents a direction (vertical and horizontal)

Set the width of an element's border

border-width: thin | medium | thick | length value

Border Color

border-color: color

Border Style

border-style：值 | none | hidden

padding

padding padding properties is from (padding or stuffing) the content of the element is provided between the inner frame, four directions (up, right, down, left)

padding-top: length value | percentage

padding-right: length value | percentage

padding-bottom: length value | percentage

padding-left: length value | percentage

Note: Value can not be negative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            div{width: 100px;height: 100px;
            border: 1px red solid}
     </style>
</head>
<body>
        <div></Testdiv>
</body>
</html>

View Code

The code above effect is a border of 100 * 100, the test word in the upper left corner, if we want the text from the top of 20px, you can add padding-top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            div{width: 100px;height: 100px;
            border: 1px red solid;
            padding-top: 20px;
            }
     </style>
</head>
<body>
        <div>测试</div>
</body>
</html>

padding-top

Description, because the addition of the packed padding-top: 20px, the height of the 100 * 100 frame before becomes 120, 100 or width

If you want from the left 30px, you can add padding-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            div{width: 100px;height: 100px;
            border: 1px red solid;
            padding-top: 20px;
            padding-left: 30px;
            }
     </style>
</head>
<body>
        <div>测试</div>
</body>
</html>

padding-left

Description: The width of the border increased by 30px

If you give up and down about the content have increased padding, we can be abbreviated '

padding: the value of 1; four directions to a value of 1 
padding: the value 1 value 2; down = value 1, the left and right = value 2 
padding: the value 1 value 2 value 3;       a = value 1, the left and right = value 2, the = value 3 
padding: value value 1 2 3 value value 4: the value = 1, the right value = 2, the value = 3, the value of 2 left =

margin

margin for the padding property, provided the distance between the element and the element (margins), four directions (up, right, down, left)

margin-top: length value | percentage | auto

margin-right: length value | percentage | auto

margin-bottom: length value | percentage | auto

margin-left: length value | percentage | auto

Description: The value can be negative

margin: value 1; a value of four directions 1
margin: value 1 value 2; down = 1 value, the left and right = value 2
margin: 3 binary values of value 1; on = value 1, value = about 2, = the value 3
margin: value value 1 2 3 Value Value 4: = the value 1, the value of the right = 2, the value = 3, the value of 2 left =

Margin Properties

By default, the corresponding block-level HTML elements present Margins

body、h1~h6、p......

Statement margin properties, override the default style

body,h1,h6,p{margin:0;}

margin is auto, to achieve the horizontal direction is centered, by the browser Margin Calculation

The vertical direction, two adjacent elements are disposed margins, margins merge occurs, the maximum combined height of the margins of the outer margin of the merger occurred after two height =

Box computing model

In the CSS, width, and height are the width and height refers to the content area

Increase in margins, borders, and margins will not affect the size of the content area, but will increase the overall size of the frame elements

display properties

inline: inline element displayed element, the element has no line break before and after

block: the display element is block-level element, with a line break before and after the element will

inline-block: block elements within the row, the element is rendered inline, having characteristics corresponding block

none: This element will not be displayed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
        div{color: red;}
         span{display: none}
         div:hover span{display: inline}
     </style>
</head>
<body>
        <div href="#">指我。。。
            <span  >
                捉迷藏。。。
            </span>
        </div>
</body>
</html>

捉迷藏

1.相应内联元素及使用 display: inline设置成内联元素的元素width和 height属性无效。

水平方向 margin-left/ margin- right/ padding-left / padding-right有效

垂直方向 margin-top/ margin- bottom/ padding-top/padding- bottom无效

2.块级元素及使用 display: block设置成块级元素的元素width/ height/ margin/ padding属性都生效