unit6 box model
1. Box model
The necessary conditions for the center alignment of the web page:
1. Block element
2. Fixed width
1. Border: border
Border shorthand:
set the thickness, style, and color of the
border at the same time. border:1px solid #3a6587;
you can set
it out of order: if you don’t set one of the values, there will be no problems, such as border:solid #ff0000; is also allowed
- Border color: border-color property
border-color:#eeff34 : The
four borders are the same color
border-color:#369 #000: The
color of the upper and lower borders: #369 The color of the
left and right borders : #000
border-color: #369 #000 #f00: The
upper Border color: #369
Left and right border color: #000
Bottom border color: #f00
border-color: #369 #000 #f00 #00f:
Top, right, bottom and left border colors:
#369, #000, #f00 , #00f
• border-top-color property
Top border color
• border-right-color property
Right border color
• border-bottom-color property
Bottom border color
• border-left-color属性
Left border color
- Border thickness: border-width property
• thin
• Medium is normal
• thick
• Pixel values
- Border style: border-style attribute
• none without border
• hidden hidden border
• dotted
• dashed
• solid solid line
• double double line
2. Outer margin: margin
Align the page in the center:
margin:0px auto;
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
3. Inner margin: padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding
4. The width and height of the element and the actual position
The total size of the box model=border+padding+margin+content width
The actual space occupied by the element (actual width, height)
Box height = height attribute + top and bottom padding height + top and bottom border height
Box width = width attribute + left and right padding width + left and right border width
5、box-sizing
Used to change the default CSS box model used to calculate element width and height
box-sizing: content-box (default value, the total size of the box) | border-box (the width or height of the box is equal to the width or height of the element content) | inherit (the box model mode where the element inherits the parent element);
browser compatibility needs to be considered.
6. The size of the box model
- Content width width: 70px
- Padding: 5px
- Margin: 10px
7. Box layout
- DIV+CSS layout
1. Analyze the block structure of the page to form an HTML organization structure
2. Write the CSS control positioning of each DIV block
- Box attribute layout
2. Rounded border border-radius
border-radius: 20px 10px 50px 30px; the
four attribute values are arranged clockwise: