CSS Reading notes: layout

Source: Internet
Author: User

The similarities and differences between outline and border

Same point: The border is displayed.

Different points: 1.outline does not participate in the layout; border participate in layout

2.outline is bound to surround the element, the element has either a contour, or no, cannot be set independently of one side of the four sides of the style; border can set a side style on four sides

Note: Outline can be used to detect the spatial position occupied by page elements

Here is an example of a different point, with the following HTML:

<Body>    <Div>1 The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, is staying just down the street from Levi's Sta Dium, and practicing miles away at Stanford ' s practice fields and Stanford Stadium, if desired. They would practice Wednesday, Thursday and Friday at Stanford, and has a walk-through practice on Saturday morning, one A. M., at Levi's Stadium, as is their normal custom. They ' ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then being cloistered after that until Sun    Day. </Div>    <Div>2 The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, is staying just down the street from Levi's Sta Dium, and practicing miles away at Stanford ' s practice fields and Stanford Stadium, if desired. They would practice Wednesday, Thursday and Friday at Stanford, and has a walk-through practice on Saturday morning, one A. M., at Levi's Stadium, as is their normal custom. They ' ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then being cloistered after that until Sun    Day. </Div>    <Div>3 The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, is staying just down the street from Levi's Sta Dium, and practicing miles away at Stanford ' s practice fields and Stanford Stadium, if desired. They would practice Wednesday, Thursday and Friday at Stanford, and has a walk-through practice on Saturday morning, one A. M., at Levi's Stadium, as is their normal custom. They ' ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then being cloistered after that until Sun    Day. </Div></Body>

Nothing special, the body contains 3 div, add the following style to it, Div uses outline, and sets the float and width:

        {            width: 1000px;        } {outline: 3px dashed red;                                 /* border:3px dashed blue; */             float: left;             width: 33.33%;        }

The display effect is as follows, note that regardless of the width of the outline set, the thickness of the contour does not disrupt the layout of the page, because outline does not participate in the layout:

If you use border for a Div, the display looks like this:

The third Div is squeezed below, because border is involved in the layout, the width of the border occupies the layout space, that is: 3 div width + border width >1000

If you use both outline and border (just to demonstrate), the outline is outside the bounding box, as follows:

Second, center block box

CSS Reading notes: layout

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.