Horizontally centered layout

  1. text-align + inline-block

Text-align sets the alignment of the text content, while the display of the child element is set to inline-block.

<style type="text/css"> .parent{ text-align: center; width: 100%; height: 200px; background: #ccc; } .child{ display: inline-block; width: 200px; height: 200px; background: #c9394a; } </style> <div class="parent"> <div class="child">Copy the code

  • Advantages: Good browser compatibility

  • Disadvantages: Attributes are inheritable, causing text in child elements to be centered

  1. Table /block element + margin

Display: table; Behaves like the

tag
	<div class="parent1">
		<style type="text/css">
			.parent1{
				width: 100%;
				height: 200px;
				background: #ccc;
			}
			.child1{
				display: table/block;
				margin: 0 auto;
				
				width: 200px;
				height: 200px;
				background: #c9394a;
			}
		</style>
		<div class="child1">table + margin</div>
	</div>	
Copy the code
  • Advantages: Horizontal centering can be achieved only by setting the child elements
  • Disadvantages: If the child element leaves the document flow (float.postion:absolute/fixed) will cause the margin attribute to be invalid
  1. absolute + transform
	<div class="parent2">
		<style type="text/css">
			.parent2{
				width: 100%;
				height: 200px;
				background: #ccc;

				position: relative;
			}
			.child2{
				width: 200px;
				height: 200px;
				background: #c9394a;

				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		</style>
		<div class="child2">table + margin</div>
	</div>	
Copy the code
  • Advantages: Horizontal centering of child elements does not affect whether or not the parent element leaves the document flow
  • Cons: The Transform property is a feature in CSS3 and not well supported by browsers

Vertically centered layout

  1. table-cell + vertical-align
  • Disadvantages: The parent must be wide and tall
<div class="parent"> <style type="text/css"> .parent { width: 500px; height: 600px; background: #ccc; display: table-cell; vertical-align: middle; text-align: center; } .child { width: 200px; height: 200px; background: #c9394a; display: inline-block; } </style> <span class="child">Copy the code
  • Advantages: Good browser compatibility
  • Disadvantage 1: The vertical-align attribute is inheritable, causing the text of the parent element to be centered. If there are other text elements in the parent element, the effect is undesirable.
  • Defect 2: The parent must have a fixed width and height
  1. position+transform
<div class="parent1"> <style type="text/css"> .parent1{ width: 200px; height: 600px; background: #ccc; position: relative; } .child1{ width: 200px; height: 200px; background: #c9394a; position: absolute; top: 50%; transform: translateY(-50%); } </style> <div class="child1"> Implement vertically centered layout </div> </div>Copy the code
  • Advantages: Centering of child elements does not affect the parent element even if the parent element leaves the document flow
  • Disadvantages: Transforom is a CSS3 property, be aware of browser compatibility

Horizontal center + vertical center

  1. Table + margin achieves horizontal center, and table-cell + vertical-align achieves vertical center layout
<div id='parent'> <style type="text/css"> #parent{ width: 1000px; height: 600px; background: #ccc; /* indicates td*/ display: table-cell; vertical-align: middle; } #child{ width: 200px; height: 200px; background: #c9394a; /* display:table; <tabel> td contains table */ display: block; margin:0 auto; } < / style > < div id = 'child' > I am a horizontal vertical center < / div > < / div >Copy the code
  • Advantages: Good browser compatibility
  • Disadvantages: If the child element is set todisplay:tabel, the parent element setsdisplay:table-cellSo semantically unfriendly.
  1. The position + negative margin
  • Must beknowThe width and height of the middle box
<div id='parent1'> <style type="text/css"> #parent1 { width: 1000px; height: 600px; background: #ccc; /* indicates td*/ position: relative; } #child1 { width: 200px; height: 200px; background: #c9394a; text-align: center; } #child1 { position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style> <div id='child1'> I am horizontally centered </div> </div>Copy the code
  1. Position: Absolute combined with Magin: Auto
  • The middle box must have width and height, but you don’t need to know the exact value
<div id='parent1'> <style type="text/css"> #parent1 { width: 1000px; height: 600px; background: #ccc; /* indicates td*/ position: relative; } #child1 { width: 200px; height: 200px; background: #c9394a; text-align: center; } #child1 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> <div id='child1'> I am horizontally centered </div> </div>Copy the code
  1. position+transform:translate(-50%; – 50%)
<div id='parent1'> <style type="text/css"> #parent1{ width: 1000px; height: 600px; background: #ccc; /* indicates td*/ position: relative; } #child1{ width: 200px; height: 200px; background: #c9394a; /* display:table; */ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); } </style> <div id='child1'> I am horizontally centered </div> </div>Copy the code
  1. flex
<div id='parent2'> <style type="text/css"> #parent2 { width: 1000px; height: 600px; background: #ccc; display: flex; justify-content: center; align-items: center; } #child2 { width: 200px; height: 200px; background: #c9394a; text-align: center; } </style> <div id='child2'> I am horizontally centered </div> </div>Copy the code

Fixed width left and right, adaptive three-column layout in the middle

  1. The holy grail layout
<style> html, body { height: 100%; overflow: hidden; } .container { height: 100%; padding: 0 200px; } .left, .right { width: 200px; min-height: 200px; background: blue; } .center { width: 100%; min-height: 400px; background: orange; } .left, .right, .center { float: left; } .left { margin-left: -100%; position: relative; left: -200px; } .right { margin-right: -200px; } </style> <div class="container clearfix"> <div class="center"> middle </div> <div class="left"> left </div> <div Class ="right"> </div> </div>Copy the code
  1. Twin wing layout
<style> .container { width: 100%; } .container .center { margin: 0 200px; min-height: 400px; background: red; } .container, .left, .right { float: left; } .left { background: yellow; width: 200px; min-height: 200px; margin-left: -100%; } .right { background: yellow; width: 200px; min-height: 200px; margin-left: -200px; } </style> <div class="container clearfix"> <div class="center"> middle </div> </div> <div class="left"> left </div> <div Class = "right" > right < / div >Copy the code
  1. A pure float implementation
<section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div Class ="center"> <h1> Floating solution </h1> <p> 1. This is the middle of the three-column layout </p> <p> 2. This is the middle of the three-column layout </p> <p> 3. </p> <p> 4. Create BFC</p> </div> </article> </section>Copy the code
  1. Positioning to achieve
<section class="layout absolute"> <style> .layout.absolute .left-right-center>div { position: absolute; } .layout.absolute .left { left: 0; width: 300px; background: red; } .layout.absolute .center { left: 300px; right: 300px; background: yellow; } .layout.absolute .right { right: 0; width: 300px; background: blue; } </style> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h1> Absolute positioning solution </h1> <p>1. This is the middle of the three-column layout </p> <p>2. This is the middle of the three-column layout </p> <p>3. Document layout from < / p > < / div > < div class = "right" > < / div > < / article > < / section >Copy the code
  1. Flex layout
<section class="layout flexbox"> <style> .layout.flexbox { margin-top: 300px; } .layout.flexbox .left-right-center { display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .center { flex: 1; background: yellow; } .layout.flexbox .right { width: 300px; background: blue; } </style> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h1> Flex solution </h1> <p>1. This is the middle of the three-column layout </p> <p>2. This is the middle of the three-column layout </p> <p>3. </p> </div> <div class="right"></div> </article> </section>Copy the code

Table layout

Implementation method 1: Use table form to achieve table layout

<style type="text/css"> table{ width: 800px; height: 200px; border-collapse: collapse; }. Red {background: red; } .blue{ background: blue; } </style> <h1> <td class="red"><div> </td> <td </td> <td class="red"> </td> </tr> </table>Copy the code
Advantages:
  • By default, the column width is evenly distributed.
  • If you set the width of one column, the other column widths are automatically evenly distributed. It is convenient to realize one side fixed and one side adaptive layout.
  • The contents of each table are automatically centered vertically.

Implementation method 2: Use CSS to achieve the table layout

<style type="text/css"> .table{ display: table; width: 800px; height: 200px; margin-top: 10px; } .table-row{ display: table-row; } .table-cell{ display: table-cell; } </style> <h1> <div class="table"> <div class="table-row"> <div class="red" </div> <div class="blue table-cell"> </div> </div>Copy the code
Advantages:
  • By default, the column width is evenly distributed.
  • If you set the width of one column, the other column widths are automatically evenly distributed. It is convenient to realize one side fixed and one side adaptive layout.
Disadvantages:
  • Content in each table will no longer automatically be vertically centered.

Click me to see the effect

floating

advantages
  • Can solve the gap problem of inline elements
  • There are no margin merge problems

Flex layout

flex container

display:flex;

Flex-direction Specifies the direction of the spindle

  1. row; // The default is left — > right
  2. column; // indicates up — > down
  3. row-reverse; // indicates that the main axis is right — > left
  4. column-reverse; // indicates down — > up

Flex-wrap newline mechanism

If the total width and height of the element is greater than the set total width and height, and line breaks are not set, Flex will distribute the total width and height equally for each element.

  1. No-wrap // The default value is no line breaks
  2. Wrap / / line

flex-group:flex-direction+flex-wrap

Context-content Specifies the alignment of the main axis

  1. Flex-start // Start alignment
  2. Flex-end // End alignment
  3. Center // Center aligned
  4. Space-betten // Evenly distributed
  5. Space-around // The left and right sides are equally spaced

Align-items Aligns the cross axis

  1. Flex-start // Start alignment
  2. Flex-end // End alignment
  3. Center // Center aligned
  4. Stretch // The Flex imte will fill up on the cross axis when no height is set for a Flex item. If the height is set for a Flex item, this property will not take effect.
  5. Baceline // Align according to the text baseline in flex item.

Align-content: Treat multiple lines as a whole

  • Newline elements are centered on the intersecting axis, so there may be problems with spacing between the lines before the newline:
  • Solution: Solve the problem by setting the width or height.

Why row-reverse will align to the right and column-reverse will not align to the bottom

Because the height of the entire container is the same as the height of the containing block, the total width horizontally is greater than the width of the containing block.

flex item

Flex-basis: Sets the base value, or width, of the elastic box

Flex-grow: Extends the scale to divide up the remaining space

5. Flex-shrink: 0 indicates that it does not shrink,

flex:flex-group|flex-shrink|flex-basis

  • Flex: 1 said flex – group: 1; flex-shrink:1; flex-basis:0%;

  • Flex: auto said flex – group: 1; flex-shrink:1; flex-basis:auto;

  • Flex: none said flex – group: 0; flex-shrink:0; flex-basis:auto;

  • advantages

Modern floating solutions are relatively easy to implement

  • disadvantages

Compatibility is not good

Click me to view an example flex layout

The inline – block layout

<style type="text/css"> .container{ width: 800px; height: 200px; background: yellow; font-size: 0; } .left{ width: 200px; height: 200px; background: red; display: inline-block; font-size: 20px; } .right{ width: 600px; height: 200px; background: blue; display: inline-block; font-size: 20px; } </style> <div class="container"> <div class="left"> </div> <div class="right"> </div> </div>Copy the code
disadvantages
  1. There will be gaps between blocks
  • Reason: Because there are gaps between words
  • Solution: Add the parent element’sfont-sizeSet to zero
  1. Not suitable for width-adaptive layouts
advantages
  • Does not want to float to affect other elements
  • More suitable for fixed width layout

Click me to view an inline-block layout instance

Responsive layout

Main methods:

Adaptive space [REM /viewport], hide [Media Query], fold [Media Query].

  • Viewport solution
<! <meta name="viewport" content="width=device-width" initial-sacle=1.0> <! <meta name="viewport" content="width=320" initial-sacle=1.0>Copy the code
  • Media Query solution
  1. Hide with media Query
@media (max-width:640px){
	.left{
		display: none
	}
}
Copy the code
  1. Use Media Query for line folding
@media (max-width:640px){ .intro{ display: block; margin: 7px auto; }}Copy the code
  • Rem solution

Pixel based on the FONT size of THE HTML. The default font size for HTML is 16px, but can be set to 10px for ease of calculation.


@media(max-width: 375px){
	html{
		font-size: 24px;
	}
}
@media (max-width: 320px){
	html{
		font-size: 20px;
	}
}
.intro1{
	display: inline-block;
	width: 18rem;
	height: 18rem;
	line-height: 18rem;
	text-align: center;
	border-radius: 9rem;
	border: .1rem solid red;
	margin: .7rem;
}

Copy the code
Disadvantages of REM: Rem units are not necessarily very precise.

Click on me to see the code demo