HTML and CSS layout skills

One 、 Single column layout

1. Horizontal center ：（ notes ： The implementation in the following examples is child Element alignment operations ,child The parent container of the element is parend Elements ）

1-1： Use inline-block and text-align Realization ：

.parent{text-align: center;}

.child{display:inline-block;}

advantage ： Compatibility is good. ;

Insufficient ： You need to set both parent and child elements ;

1-2: Use margin：0 auto To achieve

.child{width：200px;margin: 0 auto;}

advantage ： Compatibility is good. ;

Insufficient ： Width needs to be set ;

1-3： Use table Realization ：

.child{display:table;margin:0 auto;}

advantage ： Just set yourself up ;

Insufficient ：IE6,7 We need to restructure ;

1-4： Use absolute positioning to achieve ：

.parent{position: relative;}

/* Or practical margin-left The negative value of is half the width of the box , But then you have to know the section of the box , But compatibility is good */

.child{position:absolute;left:50%;transform:translate(-50%)}

Insufficient ： Compatibility is poor ,IE9 And above

1-5： practical flex Layout implementation ：

/* The first method */

.parent{display:flex;justify-content:center;}

/* The second method */

.parent{display:flex;}

.child{margin:0 auto;}

Insufficient ： Compatibility is poor , If the layout of a large area is carried out, the efficiency may be affected

2. Vertical center ：vertical-align( be called “inline-block Dependent elements ”, in other words , Only one element belongs to inline or inline-block,table-cell It can also be understood as inlin-block, On him vertical-align Attributes work )

In the use of vertical-align When , Because its baseline is marked with the baseline of row height , So we need to set line-height Or set display:table-call;

/* The first method */

.parent{display:table-cell;vertical-align:middle;height:20px;}

/* The second method */

.parent{display:inline-block;vertical-align:middle;inline-height:20px;}

2-1: Practical absolute positioning ：

.parent{position:relative;}

.child{position：absolute;top:50%;transform:translate(0,-50%);}

2-2： practical flex Realization ：

.parent{display:flex;align-items:center;}

3. Horizontal vertical center ：

3-1： utilize vertial-align,text-align,inline-block Realization

.parent{display:table-cell;vertial-align:middle;text-align:center;}

.child{display:inline-block;}

3-2: Use absolute positioning to achieve ：

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3-3: Use flex Realization ：

.parent{display:flex;justify-content：center;align-items:center;}

Two 、 Multi column layout

1. Left column fixed width , Right column adaptive （ This layout is very common , The side that is suitable for sizing is often navigation , The adaptive side is the layout of the content ）

1-1. utilize float + margin Realization ：

.left{float:left;width:100px;}

.right{margin-left:100px;}

Be careful ：IE9 Yes 3px Of bug

1-2. utilize float + margin(fix) Realization

 <div class="parent">

<div class="left"></div>

<div class="right-fix">

<div class="right"></div>

</div>

</div>

.left{width:100px;float:left;}

.right-fix{width:100%;margin-left:-100px;float:right;}

.right{margin-left:100px;}

1-3. Use float+overflow Realization

.left{width:100px;float:left;}

.right{overflow:hidden;}

Trigger bfc Pattern , Floating can't affect , Isolate other elements ,IE6 I won't support it , left left Set up margin-left treat as left And right The margin between , The right side uses overflow:hidden To form bfc Pattern .

If we need to set both columns to climb , The following methods can be used to “ background ” Set to contour , In fact, it's not equal in content .

.left{width:100px;float:left;}

.right{overflow:hidden;}

.parent{overflow:hidden;}

.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

1-4. utilize table Realization ：

.parent{display:table;table-layout:fixed;width:100%;}

.left{width:100px;}.right,.left{display:table-cell;}

1-5. Use flex Realization ：

.parent{display:flex;}

.left{width:100px;}.right{flex:1;}

Take advantage of the container on the right flex:1, Divide the remaining width equally , The same effect has been achieved , and align-items The default value is stretch, So they are equal in height .

2. Right column fixed width , The left column is adaptive

2-1. Use float+margin Realization

.parent{background:red;height:100px;margin:0 auto;}

.left{background:green;margin-right:-100px;width:100%;float:left;}

.right{float:right;width:100px;background:blue;}

2-2. Use table Realization ：

.parent{display:table;table-layout:fixed;width:100%;}

.left{display:table-cell;}

.right{width:100px;display:table-cell;}

2-3. Use flex Realization ：

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

3. Two columns of fixed width , A list of adaptive （ basic html The structure is the parent and the container is parent, From the container is left,center,rigth）, among left,center Fixed width ,right The adaptive .

3-1. utilize float+margin Realization

.left,.center{float:left;width:200px;}

.right{margin-left:400px;}

3-2. utilize float+overflow Realization

.left,.center{float:left;width:200px;}

.right{overflow:hidden;}

3-3. utilize table Realization

.parent{display:table;table-layout:fixed;width:100%;}

.left,.center,.right{display:table-cell;}

.left,.center{width:200px}

3-4. utilize flex Realization ：

.parent{display:flex;}

.left,.center{width:100px}

.right{flex:1;}

4. Width on both sides , The middle bar is adaptive

4-1. Use float+margin Realization ：

.left{width:100px;float:left;}

.center{float:left;width:100%;margin-right:-200px;}

.rigth{width:100px;float:right;}

4-2. Use table Realization ：

.parent{width:100%;display:table;table-layout:fixed}

.left,.center,.right{display:table-cell;}

.left{width:100px;}.right{width:100px;}

4-3. Use flex Realization ：

.parent{display:flex;}

.left,.center{width:100px;}

.right{flex:1}

5. A column of indefinite width , A list of adaptive

5-1. Use float+overflow Realization ：

.left{float:left;}

.right{overflow:hidden;}

5-2. Use table Realization ：

.parent{display:table;table-layout:fixed;width:100%;}

.left{width:0.1%;}

.left,.right{display:table-cell;}

5-3. Use flex Realization

.parent{display:flex;}

.right{flex:1;}

6. Multi column layout ：（ Multi column layout often appears in the content , Most of them are functional , The content of the same class is displayed side by side ）

<div class="parent">

<div class="column">1</div>

<div class="column">1</div>

<div class="column">1</div>

<div class="column">1</div>

</div>

6-1. Use float Realization ：

.parent{margin-left:-20px}/* Suppose the spacing between the columns is 20px*/

.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

6-2. Use table Realization

.parent-fix{margin-left:-20px;}

.parent{display:table;table-layout:fixed;width:100%;}

.column{display:table-cell;padding-left:20px;}

6-3. Use flex Realization

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}

7. Nine palaces layout

7-1. Use table Realization ：

<div class="parent">

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

</div>

parent{display:table;table-layout:fixed;width:100%;}

.row{display:table-row;}

.item{display:table-cell;width:33.3%;height:200px;}

7-2. Use flex Realization ：

<div class="parent">

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

<div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>

</div>

.parent{display:flex;flex-direction:column;}

.row{height:100px;display:flex;}

.item{width:100px;background:red;}

8. Full screen layout

<div class="parent">

<div class="top">top</div>

<div class="left">left</div>

<div class="right">right</div>

<div class="bottom">bottom</div>

</div>
html,body,parent{height:100%;overflow:hidden;}

.top{position:absolute:top:0;left:0;right:0;height：0px;}

.left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}

.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}

.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}

8-1. utilize flex Realization ：

<div class="parent">

<div class="top">top</div>

<div class="middle"><div class="left">left</div>

<div class="right">right</div>

</div>

<div class="bottom">bottom</div>

</div>

9. Responsive layout

meta The utility of labels Set the layout width equal to the device width , Layout viewport It's equal to measurement viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

Media query

HTML 4 and CSS 2 Currently, it supports setting specific style sheets for different media types , such as , Use sans serif font when a page is displayed on the screen , When printing, use serif , screen and print There are two defined media types , Media queries make style sheets more targeted , Expand the function of media type ; A media query consists of a media type and one or more conditional expressions that detect media characteristics , The media features that can be used for detection in media query are width、height and color（ etc. ）, Use media to query , Without changing the content of the page , Customize the display for specific output devices .

grammar

@media screen and (max-width:960px){....}
<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />

Html And CSS More articles on layout techniques

div+css Layout skills total
One .css style 1.float First you need to understand the block level elements (block element). Each block level element occupies one line by default , Only one block element can be added to the same line (float With the exception of ). Block level elements can generally nest block level elements or inline elements ...
css Layout skills
CSS User interface style Mouse style currsor li{ cursor:pointer: } Set or retrieve the system predefined cursor shape for moving the mouse pointer over an object Property value describe default Default pointer ...
CSS Layout skills —— All kinds of media
It's what we use css Come to the situation that we often encounter . Use css To center , Sometimes one attribute can do it , Sometimes it takes skill to be compatible with all browsers , This article makes a brief introduction to some common methods of centering . notes : In addition to the special explanation of the method mentioned in this paper ...
HTML+CSS Layout skills and compatibility issues 【 Reading season 】
stay IE6 and IE7 in , The line height value must be greater than... Of the font 2px The above can ensure the complete display of the font or the underline when used as a link . IE6 Get rid of input Equal elements Border border: 0 none; All browsers will do Frame ...
Html and CSS Layout skills
The single column layout is horizontally centered One of the most common layout forms in horizontal centered page layout , Most of them appear in the title , And the organization of the content area , Here are four ways to achieve horizontal center ( notes : The implementation in the following examples is child Element alignment operations ,child Elemental ...
In the history of the most complete Html And CSS Layout skills
Single column layout is the most common layout form in horizontal centered page layout , Most of them appear in the title , And the organization of the content area , Here are four ways to achieve horizontal center ( notes : The implementation in the following examples is child Element alignment operations ,child The father of the element ...
Html utilize CSS Layout skills
The single column layout is horizontally centered One of the most common layout forms in horizontal centered page layout , Most of them appear in the title , And the organization of the content area , Here are four ways to achieve horizontal center ( notes : The implementation in the following examples is child Element alignment operations ,child Elemental ...
In the history of the most complete Html and CSS Layout skills
The single column layout is horizontally centered One of the most common layout forms in horizontal centered page layout , Most of them appear in the title , And the organization of the content area , Here are four ways to achieve horizontal center ( notes : The implementation in the following examples is child Element alignment operations ,child element ...
CSS Layout skills -- Concave fillet
Round corners , Believe that everyone knows CSS We all know the attributes , adopt border-radius Round the corners ( Convex fillet ), But what if you need to achieve a concave fillet ? For example, the four concave elements , For example, the concave fillet as shown below For this kind of problem , The reaction of a lot of people ...

Random recommendation

In depth understanding of graph optimization and g2o：g2o piece
Summary Finished the basic knowledge of optimization , Let's take a look g2o Structure . This article will discuss g2o Code structure of , And take you to write a simple double view bundle adjustment: Estimate camera motion and feature point position from two images . You can take ...
use AjaxPro Realize two-level linkage
In practice asp.net Projects often encounter no refresh Level 2 or N level (N>=2) Linkage situation , Actually N The principle of two-level linkage and two-level linkage is the same , There are many ways to achieve this , One is pure script implementation ( Dynamic generation Array Array ), A kind of It's using micro ...
asp.net use jquery Judge fileupload The size and type and name of the uploaded file
<script language="javascript" type="text/javascript"> // Check the size of the uploaded file and get the file name fun ...
AI series General catalogue
AI series Agreed to park Daniel Zhang Shanyou To write AI My series of blogs , So it started AI Series Tour . One . Four platform series ( Baidu AI. Ali ET. tencent . IFLYTEK ) 1. Baidu (1) Baidu OCR Character recognition - ID card identification (2) The base ...
[leetcode]43. Multiply Strings High precision multiplication
Given two non-negative integers num1 and num2 represented as strings, return the product of num1 and ...
【POJ1151】Atlantis
The main idea of the topic : Given N A rectangle , Find the area of these rectangles and . Answer key : Using the scan line algorithm . First , Sort by the abscissa of the rectangle , Maintain the covered length of a scan line in the ordinate direction , In this case, the line segment tree is used to maintain . When counting the answers , Scan from left to right 2N individual ...
project - RM Deploy centos7 Some problems and solutions after that
System version : [[email protected] logs]# cat /etc/redhat-release CentOS Linux release (Core) Get it from :https://www. ...
mysql python pymysql modular Additions and deletions insert data Introduce commit() execute() executemany() function
import pymysql mysql_host = '192.168.0.106' port = 3306 mysql_user = 'root' mysql_pwd = ' encoding = ...
management 11gRAC Basic commands ( Reprint )
stay Oracle Clusterware 11g The first 2 edition (11.2) in , Many subroutines and commands are no longer used : crs_stat crs_register crs_unregiste ...
tr th td
<table> <caption></caption> <thead> <tr> & ...