Box model
1. What is the box model?
The box model is a box that encapsulates HTML elements. All html elements can be said to be a box model, which includes borders, margin padding and content
. 2. There are two types of
box models. Standard box models are
in standard mode. Width = width + margin (left and right) + padding (left and right) + border (left and right)
Weird box model (IE box model)
In the weird mode, the total width of a block = the width of the content (including the values of padding [left and right] and border [left and right]) + margin (left and right)
3. Switch between the two box models
box-sizing can switch the box model (the default attribute is content-box)
box-sizing: content-box is the W3C (standard) box model
box-sizing: border-box is the IE (weird) box model
flex layout
Flex layout is an elastic layout. Any container can be designated as an elastic layout, which can implement various page layouts easily, completely, and responsively.
Basic concept: Elements that use Flex layout are called Flex containers. All of its child elements automatically become members of the container, called Flex items.
Container properties
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
summary is shown in the figure
For example:
justify-content:
flex-start (default): left-aligned
flex-end: right-aligned
center: centered
space-between: justified at both ends, the space between items is equal.
Space-around: The space on both sides of each item is equal. Therefore, the interval between items is twice as large as the interval between items and the border.
注意：设为Flex布局以后，子元素的float,clear和verticak-align属性将失效