Shulou(Shulou.com)06/02 Report--

This article mainly explains the "html page layout technology is what", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "what is the layout technology of html pages" bar!

Html layout technology are: 1, floating layout technology, compatibility comparison, but the page width is not enough will affect the layout; 2, absolute positioning layout technology; 3, flex flexible layout technology, self-adaptive, height can automatically open; 4, table-cell table layout technology; 5, grid grid layout technology.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Layout Technology of html Page

I. floating layout technology

Floating layout .wrap1 div {min-height: 200px;} .wrap1.left {float: left; width: 300px; background: red;} .wrap1.right {float: right; width: 300px; background: blue } .wrap1.center {background: pink;} floating layout

The compatibility of floating layout is better, but floating brings more impact, when the width of the page is not enough, it will affect the layout.

2. Absolute positioning and layout technology

Absolute positioning layout .wrap2 div {position: absolute; min-height: 200px;} .wrap2 .left {left: 0; width: 300px; background: red;} .wrap2.right {right: 0; width: 300px; background: blue } .wrap2.center {left: 300px; right: 300px; background: pink;} absolute positioning layout

Absolute positioning layout is fast, but less effective because it is separated from the document stream.

Third, flex flexible layout technology.

Flex layout .wrap3 {display: flex; min-height: 200px;} .wrap3.left {flex-basis: 300px; background: red;} .wrap3.right {flex-basis: 300px; background: blue } .wrap3 .center {flex: 1; background: pink;} flex layout

Self-adapting, the height can be stretched automatically

4. Table-cell table layout technology.

Table-cell table layout .wrap4 {display: table; width: 100%; height: 200px;} .wrap4 > div {display: table-cell;} .wrap4.left {width: 300px; background: red } .wrap4 .right {width: 300px; background: blue;} .wrap4.center {background: pink;} table layout

Good compatibility, but sometimes can not be fixed height, because it will be propped up by the content.

5. Grid grid layout technology

Grid layout .wrap5 {display: grid; width: 100%; grid-template-rows: 200px; grid-template-columns: 300px auto 300px;} .wrap5.left {background: red;} .wrap5.right {background: blue } .wrap5 .center {background: pink } Grid layout thank you for reading, the above is the content of "what is the layout technology of html pages?" after the study of this article, I believe you have a deeper understanding of what the layout technology of html pages is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.