HTML advanced CSS (4)

Box model-borders

First, look.

! DOCTYPE html>                  . pingguo{border-bottom:1px solid Red;}
                  . xiangjiao{border-top:1px solid Red;}
                  . mangguo{border-right:1px solid Yellow;}
                  . juzi{border-left:2px solid Red;}

            </style>             <ul>
                 <li class= "Pingguo" > Apple </li>
                 <li class= "Xiangjiao" > Banana </li>
                 <li class= "Mangguo" > Mango </li>
                 <li class= "Juzi" > Orange </li>
             </ul>
</body>

1) Border-style Border style common style:

Dashed (dashed line) dotted (dot) solid (solid)

2) The color in the Border-color border color can be set to hex color,

Border-color: #888;

3) The width of the border-width border can also be set to:

Thin|medium|thick These are not commonly used, the most commonly used is the pixel px.

If you want to set up (top), down (bottom), left, or right, individually. The border is in the following format

. pingguo{border-bottom:1px solid Red;}
. xiangjiao{border-top:1px solid Red;}
. mangguo{border-right:1px solid Yellow;}
. juzi{border-left:2px solid Red;}

Inside the DIV is a box model format

<!doctype html>
. hez{margin:20px 10px 15px 30px}
/* Upper right lower left ibid. */</style> <p class= "Hez" > Box model boundaries </p> </body>

You can set the distance between the element content and the border, which is called "padding". Fill also divided into upper, right, bottom, left, order must not mess up.

If the top, right, bottom, left, and fill are all 10px, you can write:

div{padding:10px;}

If the upper and lower fills are the same as 10px, about the same as 20px, you can write:

div{padding:10px 20px;}

The padding is the same as the margin writing format.

The difference between padding and margin, padding inside the border, margin outside the border

CSS Layout model

Understanding the basic concept of CSS model, box model type, we can discuss the basic model of Web page layout in depth. The layout model is the same as the box mode, which is the most basic and core concept of CSS. But the layout model is built on the box model and differs from the CSS layout style or CSS layout module that we often say. If the layout model is this, then the CSS layout pattern is the last, is the external manifestation. The CSS contains 3 basic layout models in English: flow, layer, and float.

In Web pages, elements are composed of three layout models:

1) mobile model (flow)

The flow model is the default page layout mode, which means that the HTML page elements in the default state of the Web page are distributed according to the flow model. The flow layout model has 2 more typical features:

1th, the block element extends vertically from top to bottom in the containing element, because in the default state, the width of the block element is 100%. In fact, block elements occupy positions in the form of rows.

2nd, in flow mode, inline elements are displayed horizontally from left to right within the containing element in which they are located.

2) floating model (float)

3) layer model (layers)

HTML advanced CSS (4)