KHL 002 11-computer-job-front-end box model, khl11-

KHL 002 11-computer-job-front-end box model, khl11-
CSS Box Model

Box Model in CSS

• Inline

• Inline-block

• Block

• Table

• Absolute position

• Float

Box 3D Model

 

 

We can see that:
Padding, content, background-image, and background-color constitute the Z axis. The parallel relationship between border, margin, and padding should be in the plane, it cannot form a cascade of Z states.

Reset the box model resolution Model

• W3C standard Box Model

Outer box size calculation (element space size)
Element space Height = content height + inner margin + border + outer margin
Element space width = content width + inner margin + border + outer margin

Inner box size calculation (element size)
Element space height = content height + inner distance + border (height is content height)
Element space width = content width + inner distance + border (width indicates content height)

• ID: Traditional lower-box model (IE6 or earlier, excluding IE6 or IE5.5 + in QuirksMode)

Outer box size calculation (element space size)
Element space height = content height + margin (height is content height)
Element space Height = content height + margin (width is content height)

Inner box size calculation (element size)
Element space height = content height + (height includes the element content width, border, and inner distance)
Element space width = content width + (width contains the element content width, border, and padding)

Currently, most browser elements are based on W3C-standard box models, but some elements in form are also based on traditional box models, such as submit, reset, button, and select elements in input, in this way, if you set border and padding for them, they will only extend to the element box.

CSS3 box model attribute syntax and parameters of box-sizing attribute

• Centent-box: Default Value, allowing elements to maintain W3C standard box Model

• Border-box: This value will redefine the mode composed of box models in CSS2.1, so that elements can maintain the traditional box Model of IE.

• Inherit: This value enables the element to inherit the box model of the parent element.

Use box-sizing

<! DOCTYPE html> 
 
 
 1 #header{ 2     width: 100%; 3     height: 50px; 4     background-color: #48525E; 5 } 6  7 #seacher{ 8     width: 100%; 9     height: 70px;10     background-image: url("../image/seacher-bg.jpg");11 }12 13 #body-container{14     width: 1200px;15     margin: 0 auto;16 }17 18 #left-container{19     box-sizing: border-box;20     float: left;21     width: 900px;22     height: 400px;23     background-color: #ffffff;24     padding-left: 20px;25     padding-right: 20px;26     padding-top: 20px;27 }28 29 #right-container{30     float: right;31     width: 280px;32     height: 400px;33     padding-top: 20px;34 }35 36 #footer{37     width: 100%;38     height: 120px;39     background-color: #48525E;40 }
 
 

 
Ifleft-containerThe padding of 20 PX is displayed as follows:
 

 
In this case#left-containerOfbox-sizingSetborder-boxIn this way, you do not have to modify the width or embed the div.
 
 1 #left-container{ 2     box-sizing: border-box; 3     float: left; 4     width: 900px; 5     height: 400px; 6     background-color: #ffffff; 7     padding-left: 20px; 8     padding-right: 20px; 9     padding-top: 20px;10 }11 12 #right-container{13     float: right;14     width: 280px;15     height: 400px;16     padding-top: 20px;17 }
 
 

 
 
We can see that the left area has a 20 PX padding, and the layout is not disrupted.
Overflow attributes
This attribute is used to specify how to display content that cannot be accommodated in the box.
Overflow-x/overflow-y

 

 
  
Visible: default value. NO content in the container is cut, no scroll bar is added, the element is cut to the window size that contains the object, and the clip attribute setting is invalid.
 
  
Auto: Cut the content and add a scroll bar as needed
 
  
Hidden: when the content overflows the container, all content is hidden and the scroll bar is not displayed.
 
  
Scroll: overflow-x displays the scroll bar regardless of whether the content overflows from the container. overflow-y displays the vertical scroll bar.
 
  
No-display: when the content overflows the container, the element is not displayed. It is similar to adding the display: none declaration.
 
  
No-content: the content is not displayed when the content overflows. It is similar to adding a visibility: hidden declaration.

 
Resize attributes

 

 
  
None: you cannot drag an element to modify the size.
 
  
Both: You can drag an element to modify the width and height of the element.
 
  
Horizontal: modifiable width
 
  
Vertical: modifiable height
 
  
Inherit: inherits the resize attribute value of the parent element.

 
Outline
Outline is mainly used to draw a contour line around the element until it can highlight the role of the element. Outline is extended in CSS3.

 

 
  
Outline-color: defines the color of the contour line. The default value is black.
 
  
Outline-style: defines the style of the contour. The default value is none.
 
  
Outline-width: defines the width of the contour line. The default parameter is medium, indicating to draw a contour line of medium width.
 
  
Outline-offset: the value that defines the offset position of the contour line. This value can be a negative value. Outward deviation when positive values are positive. Outward offset when negative values are positive.
 
  
Inherit: The outline effect of the element inherited from the parent Element

 
Comparison with boeder

 

 
  
Part of the boeder attribute box model directly affects the box size, while outline does not.
 
  
The sides of outline are the same and cannot be set separately.
 
  
Outline may be non-rectangular. If an element has multiple rows, the outline is at least an outline that can contain all frames of the element.
 
  
Border can only be expanded outward, and outline can be expanded inward.

 
 
 
1 <! DOCTYPE html> 2