A box model that must be understood

This article in fact, it should have been written long ago, but when the beef brisket, just follow the teacher knocked, no system of learning CSS This part of the knowledge, from the library borrowed a book, recently wanted to learn this part of the knowledge, so today spent a small day to do a Web page, re-learn the box model and floating knowledge. Let's talk about this part of the box model today. definition

When the CSS is working on the page, it thinks that each element is contained in an invisible box, the box model consists of the content area, the space around the content area (the padding padding), the outer edge of the padding (the border, border) and outside the bounding box make up an invisible area (margin) that separates elements from adjacent elements. We think of the box model as a picture hanging on the wall, the picture is the content, the lining is the inner margin, the frame is the border, and the distance between the adjacent frame is the margin.

Of course, we can also think of it as a real courier box, below to see the box Model Diagram bar.

Box Model Diagram

DEMO:

Do not look at the box model of the four parts, in fact, he is not simple, today with him a day's strength. In fact, the page is composed of a combination of elements assembled together, words do not say, or see a small example of it. This small example is an example of a page navigation with the following code:

Front Code:

Nav is the element of the tag navigation, he can clearly indicate the area of the dominant navigation link, UL is the structure of the unordered list

<nav role= "Navigation" > <%--navigation--%>
                <ul class= "Navli" >
                    <li><a href= "/" class= " Current-page ">Home</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href= "/contact/" >Contact</a></li>
                </ul>
            </nav>

CSS style:

<pre name= "code" class= "CSS" ><pre name= "code" class= "HTML" >/* navigation bar style */
. Navli {
    border-top:5px Solid #019443; /* Green *
    /border-bottom:1px solid #c8c8c8;/* Grey *
    /padding:. 45em 0.5em;/*7 0 8*/
}

    . Navli a {
        color: # 292929;
        Display:inline-block;
        padding:. 5em 1.15em. 5em 1.4em;                                                                                                                          Font-family:sans-serif;     font-weight:700;     text-transform:uppercase;
    }

    . Navli Li {
        border-left:1px solid #c8c8c8;
        Display:inline-block;
    }

        . Navli Li:first-child {/
            * uses the properties below for the first Li, cancels the left border, and changes back to the default style */
            border-left:none;
        }

Final effect:

Brief explanation:

Set the top border to green, the 5-pixel thick line set the bottom border is gray, 1-pixel thin lines do not have the left and right border setting of the width of the padding, 7 pixels and 8 pixels (em is the relative length), there is no padding, set the inner margin is to let the horizontal line and vertical lines apart, if there is no padding, , it's too compact (as shown in the bottom right) margin is the default value

The a element (link) explains:

Display:inline-block is so that they can be displayed horizontally, and has the nature of block-level elements, if not, then there is no margin the following figure shows the setting of the padding, where em is relative distance, relative to the default font value, the font default is 16px, So. 5em is 8px, and so on, the order of four values is in accordance with the direction of the clock pointer, respectively, is on, right, down, left font-family: Can be understood as a font collection, if the browser does not support the first font, you can choose the second, third, I set a font here Font-wight: Is the font weight text-transform:uppercase all uppercase letters

The li Element explains:

First set the left border of the list, 1 pixel solid gray Line, two arrows for landscape layout and portrait layout when the left box set list horizontal arrangement, so that the element is displayed as inline elements, while having elements inside the element of the first Li, that is, the left border of the home If there is no display and first-child settings, then the display is like the second image in the following image

Summary today made this web page of small example, did not touch the Web development before the page layout like word typesetting, really do not imagine that simple, the above small example, in fact, also involves a lot of other small knowledge points, interested students can study. The small example takes time not long, but actually this page has done a day, very has the accomplishment feeling, although does not understand the thing still has many. Learn well ~ Learn a little will be very happy.