1, There are three ways to center elements:
Method 1: after the parent phase is destroyed, the child segment moves half of its width and height to the left and upward (transform:translate(-50%,-50%) can also be used)
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
Method 2: the parent element is set as an elastic box, and the child element is centered horizontally and vertically
#box{
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#x{
width: 200px;
height: 200px;
background: yellow;
}
Method 3: from parent to child, all child elements are positioned as 0, and margin is set to auto adaptive.
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
2, Common page layout (two column layout, three column layout (Holy Grail, double wings)
1. Two column layout, fixed width on the left and adaptive on the right
//html <div id="left">Left fixed width</div> <div id="right">Right adaptive,Front end front end front end front end front end front end front end</div>
Float on the left and add oveflow:hidden on the right; become BFC Clear the influence of floating elements on the left
#left{
float: left;
width: 200px;
background: green;
}
#right{
overflow: hidden;
background: red;
}
2. Three column layout, Holy Grail layout and double wing layout
The Holy Grail layout and double wing layout are important layout methods that front-end engineers need to master daily. The functions of the two are the same. Both are to realize a three column layout with fixed width on both sides and adaptive width in the middle. (load rendering first in the middle)
The Holy Grail layout comes from the article In Search of the Holy Grail, while the double wing layout comes from Taobao UED. Although their implementation methods are slightly different, they both follow the following points:
- Fixed width on both sides and adaptive width in the middle
- The middle part takes precedence over the DOM structure for first rendering
- Allow any of the three columns to be the highest column
- Just use an additional < div > outer label
Grail layout
1. DOM structure
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
First, define the DOM structure of the whole layout. The main part is the three columns of center, left and right wrapped by container, of which center is defined in the front.
2. CSS code
Assuming that the fixed width on the left is 200px and the fixed width on the right is 150px, set it on the container first:
#container {
padding-left: 200px;
padding-right: 150px;
}
Then set the width and float for the three columns respectively, and clear the float for the footer:
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
According to the floating characteristics, since the width of the center is 100%, that is, it occupies all the space in the first row, so left and right are "squeezed" into the second row.
The next work is to place the left in the previously reserved position, where the negative outer margin is used:
#left {
width: 200px;
margin-left: -100%;
}
Here, position: relative and right: 200px are used to move the left position 200px to the left based on the original position to complete the placement of the left:
Next, place right, just add a declaration:
#right {
width: 150px;
margin-right: -150px;
}
At this point, the layout effect is completed. However, the last step needs to be considered, that is, the minimum width of the page: to ensure the normal display of the layout effect, since both sides have a fixed width, it is necessary to give a minimum width of the page, but this is not just a simple 200+150=350px. Recall that left used position: relative before, which means that there is still a left width in the area where the center starts. Therefore, the minimum width of the page should be set to 200+150+200=550px:
body {
min-width: 550px;
}
To sum up, the CSS code of the Holy Grail layout is:
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
Dual wing layout
1.DOM structure
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
The difference between the DOM structure of the double flying wing layout and the Holy Grail layout is that only the center is wrapped with the container, and the. column class is moved from the center to the container.
2. CSS code
According to the same idea as the Holy Grail layout, first set the width and float of each column, reserve space for the left and right columns, and set float clear for footer:
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
In the above code, the container, left and right are set to float: left. In the container, since the center does not set float, its width defaults to 100% of the container's width. By setting margin left and margin right, space is reserved for the left and right columns.
Place left in the reserved position:
#left {
width: 200px;
margin-left: -100%;
}
Get and place right in the reserved position:
#right {
width: 150px;
margin-left: -150px;
}
Finally, calculate the minimum page width: since position:relative is not used for positioning in the dual wing layout, the minimum page width should be 200+150=350px. However, when the page width is reduced to about 350px, it will occupy the width of the middle column, so that its content is covered by the right column,
Therefore, when setting the minimum page width, you should appropriately increase some width for the middle column (assuming 150px), then:
body {
min-width: 500px;
}
So far, the layout of the two wings has been completed! The overall code of its layout is:
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
3, flex layout
Properties of the container
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. Flex direction attribute
The flex direction attribute determines the direction of the spindle (that is, the arrangement direction of items)
- row (default): the main axis is horizontal and the starting point is at the left end.
- Row reverse: the spindle is horizontal and the starting point is at the right end.
- column: the main axis is vertical and the starting point is at the top edge.
- Column reverse: the main axis is vertical, and the starting point is at the lower edge
2. Flex wrap attribute
By default, projects are arranged on a single line (also known as a grid line). The flex wrap attribute defines how to wrap lines if one axis cannot be arranged.
- nowrap (default): no line breaks.
- Wrap: wrap, first line above
- Wrap reverse: wrap line, first line below
3. flex-flow
The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap.
4. Justify content attribute
The justify content attribute defines the alignment of items on the spindle.
- Flex start (default): align left
- Flex end: right justified
- center: center
- Space between: both ends are aligned, and the spacing 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 that between items and borders.
5. Align items attribute
The align items property defines how items are aligned on the cross axis
- Flex start: align the start point of the cross axis.
- Flex end: align the ends of the cross axes.
- center: align the midpoint of the cross axis.
- Baseline: the baseline alignment of the first line of text of the project.
- stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container
6 align content attribute
The align content attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.
- Flex start: align with the start point of the cross axis.
- Flex end: align with the end of the cross axis.
- center: align with the midpoint of the cross axis.
- Space between: align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
- Space around: the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
- stretch (default): the axis occupies the entire cross axis.