Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
