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> & ...