Learning the html (11) CSS box model from scratch-bottom, starting from scratch css
Vi. Box Model-border (1)
1 <! Doctype html> 2 Box Model-border (1)The border of the box model is the line centered around the content and the padding. You can set the width, style, and color of the line (three border attributes ).
For example, the following code sets the Border width to 2px, the style to solid, and the color to red as the border:
div{ border:2px solid red;}The above is the abbreviation of the border code, which can be written separately:
div{ border-width:2px; border-style:solid; border-color:red;}Note:
1. border-style (border style) Common styles include:
Dashed (dotted line) | dotted (dotted line) | solid (solid line ).
2. The color in border-color (border color) can be set to hexadecimal color, for example:Border-color: #888; // do not forget the previous well number.
3. The width in border-width (border width) can also be set:Thin | medium | thick (but not frequently used), which is usually pixel (px ).
Let's try. Set the border style of the p tag.
In line 2 of the editor, enter:
P {border: 2px dotted # ccc ;}
7. Box Model-border (2)1 <! Doctype html> 2 Box Model-border (2)Now there is a problem. What if I want to set the lower border for the p tag, but do not set the border style for the other three sides?
In css Styles, you can set a style for the border in one direction only:
div{border-bottom:1px solid red;}You can also use the following code to set the borders of other three sides (top, right, and left:
border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;TaskTo set the bottom border style for the li label.
In line 2 of the editor, enter:
Border-bottom: 1px dotted # ccc;
8. Box Model-width and height1 <! Doctype html> 2 Box Model-width and heightThe width and height of the box model are different from the width and height of the object we usually call. The width and height defined in css are ), it refers to the content range in the filling.
Therefore, the actual width of an element (the width of the box) = left border + Left Border + Left fill + content width + right fill + Right Border + right border.
The height of the element is also the same.
For example:
Css code:
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }Html code:
<Body> <div> text content </div> </body>The actual length of the element is 10px + 1px + 20px + 200px + 20px + 1px + 10px = 262px. You can view the element box model in chrome, for example:
TaskTo set the length of each item in the list to 200px.
Li is a block element. A block element has one feature: without setting the width, it is displayed as 100% of the parent container.
In line 2 of the editor, enter the following code:
Width: 200px; height: 30px;
9. Box Model-Filling
1 <! Doctype html> 2 Box Model-FillingThe distance between the element content and the border can be set, which is called "fill ". Filling can also be divided into upper, right, lower, left (clockwise ). The following code:
div{padding:20px 10px 15px 30px;}Do not confuse the sequence. The above code can be written separately:
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}If the top, right, bottom, and left are filled with 10px, you can write it like this.
div{padding:10px;}If the padding is 10px, And the padding is 20px, you can write it like this:
div{padding:10px 20px;}TaskLet's try and set the filling 10px for the div.
In line 2 of the editor, enter:
padding:10px;Padding is not the distance from text to border!
Is the distance from the content to the border. The content size is determined by width and hight.
If there are too many texts, the width is limited to write down, the box size remains unchanged, and the text exceeds. Example:
# Box1 {
Background: green;
Width: 100px;
Height: 100px;
Padding: 10px;
Border: 1px solid red;
<Body>
<Div id = "box1"> box 1 box </div>
</Body> append two text centers.
# Box1 {
Width: 100px;
Height: 100px;
Padding: 10px;
Text-align: center;
Line-height: 100px;
Border: 1px solid red;
} 10. Box Model-Boundary1 <! Doctype html> 2 Box Model-BoundaryThe distance between the element and other elements can be set using the border (margin. The boundary can also be divided into upper, right, lower, and left. The following code:
div{margin:20px 10px 15px 30px;}You can also write separately:
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}If the upper right bottom left boundary is 10px, write as follows:
div{ margin:10px;}If the upper and lower boundary is 10 PX, and the left and right sides are 20 PX, you can write this statement:
div{ margin:10px 20px;}To sum up, the difference between padding and margin is that padding is inside the border and margin is outside the border.
Task
Try: Add a 30-pixel bottom margin to the div element with the id name box1
Enter the following code in line 2 of the Code Editor:
#box1{margin-bottom:30px;}
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
