Box model and page layout
1. Introduction of web page layout
See @sugar_coffee ~~
1.1 Fixed Layout
Set the width of a web page to a fixed size, usually px. This is common on PC pages.
This layout is very stable and controllable, and does not have compatibility issues, but does not behave differently depending on the user’s screen size. A scroll bar appears if the user’s screen resolution is smaller than this width, and blank space is left if the user’s screen resolution is larger than this width.
1.2 Liquid Layout
For web page set the width of a relative, the size of the page elements shall be carried out in accordance with the screen resolution adaptive adjustment, but the overall layout is the same, usually as a percentage as a unit of length (usually collocation, Max min – * – * flow attributes control the size range in order to avoid too big or too small can’t normal to display an element), height are mostly use px to hold. A representative of streaming layout is the grid system.
For example, set the width of the web page body to 80% and min-width to 960px. Do the same for the image (width:100%, max-width is generally set to the size of the image itself, to prevent distortion caused by stretching).
Disadvantages: Because the width is defined by % %, but the height and text size are mostly fixed by PX, so the display effect under the large screen will be some page elements width is pulled too long, but the height, text size is still the same, very inconsistent display
1.3 Rasterized layout
Divide the width of the page into artificial equal lengths, and then use these equal lengths as units of measurement for layout, usually using percentages as units of length to divide the page into equal lengths.
Frameworks such as Bootstrap and Foundation use the grid system, and simply add the class names specified by the grid system to the page elements to achieve the desired responsive layout.
Bootstrap’s grid system creates a page layout by combining a series of rows and columns. Its grid system is divided into up to 12 sections
1.4 Adaptive Layout
Adaptive layouts define layouts for different screen resolutions, that is, create different static layouts for different types of devices, and each static layout corresponds to a screen resolution range. Changing the screen resolution allows you to toggle and call the corresponding layout (page elements change position but not size), but in each static layout, page elements do not change with window size. You can think of adaptive layout as a family of static layouts.
In this layout, when the viewport size is lower than the minimum set viewport, the interface will not display fully, overflow, and appear scroll bars. And multiple sets of code may change as requirements change.
To use adaptive layout, first add a viewPort tag to the header of the page code:
<meta name="viewport" content="width=device-width, initial-scale=1" /> Copy the code
The default page width is set to be equal to the screen width (width=device-width) and the original scale (initial-scale=1) is 1.0, i.e. the initial page size is 100% of the screen area. Then CSS code cannot use absolute size, i.e. cannot specify pixel px width, can only use relative size EM or % %, REM, etc.
1.5 Responsive layout
The goal of responsive layout is to ensure that a page looks good on all devices (PCS of all sizes, phones, ipads, etc.). The web page layout is determined by detecting device information. That is, if users use different devices to access the same web page, they may see different display effects. In general, the screen width of the device is detected to achieve this. Responsive layout can be thought of as a fusion of the design concepts of streaming layout and adaptive layout.
To apply a responsive layout, you first reset it using the view’s meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> Copy the code
Then use the @media media query to switch different styles for devices of different sizes and media. As with adaptive layouts, when writing CSS styles, element widths are not absolute widths, but relative sizes.
Media Queries are the core of responsive design, telling the browser how to render the page for a specified view width based on criteria. Under the excellent response range design can give the best experience to the device within the range, in the same device is actually fixed layout. But media queries are limited, that is, can be enumerated, can only adapt to the mainstream width and height. Matching enough screen sizes can be a lot of work, and hiding elements in pages can lead to redundant code, longer load times, and multiple versions of the design.
1.6 Flexible Layout (REM/EM Layout)
Elastic layouts are similar to streaming layouts in that the width of the page is not fixed, and they use EM or REM units for relative layouts. They avoid the disadvantages of using pixel px layouts in high resolution, and are more flexible than % % layouts. At the same time, they can support the normal display of the browser’s font size and zoom. However, flexible layouts have their limitations. If you don’t set a minimum width for this layout, it can cause the layout to become severely misaligned when the user shrinks the window too small.
1.7 Flex Layout (Flex Box)
Use the CSS3 Flex family of properties for relative layout to provide maximum flexibility for the box model. Support for rich media and complex typography is great, but there are compatibility issues. Any container can be specified as a Flex layout, and inline elements can also be used.
Note: With flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.
1.8 Comparison between adaptive layout and responsive layout:
Difference:
- 1. Adaptive needs to develop multiple sets of interfaces; Responsiveness requires only one set of interfaces to be developed.
- 2. Adaptive screen adaptation to the page is a certain range, such as: PC > 1024px; Tablet 768 ~ 1024px; Mobile < 768px; Responsive is a set of pages that are compatible with different viewports on PC, tablet and mobile, rather than a specific version for each terminal, so there are a lot of states to consider.
Similarities:
- By detecting the viewport resolution, the page ADAPTS to different viewport resolutions.
Three traditional PC layout methods:
- Traditional DIV+CSS layout
- HTML + CSS 3 layout
- Responsive layout
1.9 Web Layout – DIV+CSS layout
The most commonly used!
This layout is a general term for HTML pages developed by DIV tags +CSS style sheet code.
DIV+CSS layout benefits: easy maintenance, favorable SEO (Google takes page opening speed as ranking factor and SEO factor),
Web page open speed restore, in line with web standards.
1.10 Web Layout — HTML5+CSS3 layout
HTML5 can replace a lot of meaningless DIV tags with more semantic structured code tags
- 1. This semantic feature improves the quality and semantics of web pages
- 2. Reduced class and ID attributes previously used for CSS calls
Search engine friendly The new structure tags bring changes to the layout of web pages and improve search engine friendly. (Compared to div tags, HTML5 semantic tags provide richer and more accurate information to help search engines search page elements better.)
HTML5’s new tag elements are:
Define the header of a page or section; Define the end of a page or section; Define the navigation area of a page or section; A logical area or combination of content on a page; Define a body of text or a complete text; Define supplementary or related content;
Note: Layout patterns using HTML5 semantic tags are not compatible with IE9 and can be resolved using the code below
<! --[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <! [endif]-->Copy the code1.11 Web Layout — Responsive layout
1) The first: use CSS styling directly in the header.
2) Second: import different CSS style files
DIV+CSS web layout
2.1 Simulation Effect
Simple page division
2.2 coding
1) Initial code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>DIV+CSS traditional web layout </title> </head> <body> <! <div id="header"></div> <! -- End of page header --> <! <div id="nav"></div> <! -- End of navigation --> <! Start the page body --> <div id="container"></div> <! -- End of page body --> <! <div id="footer"></div> <! -- Page body end --> </body> </ HTML >Copy the code2) Simple style writing
After running, it is found that there is blank edge, which is because there is internal padding inside the body.
3) Eliminate padding through common styles
4) Further improve the head
5) Perfect the body style
6) Improve the body content
7) Enrich individual lists
8) Final code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <title>DIV+CSS </title> <style> /* public CSS */ *{margin:0px; padding:0px} a{text-decoration: none; } ul{list-style:none; } #header{ position:fixed; /* fixed position */ top: 0px; /* height: 80px; */ width: 100%; border-bottom:1px solid #46474a; /* border */} # header. header-nav{height:80px; width:1200px; background-color: goldenrod; margin:0px auto; #nav{height: 60px; margin-top:81px; /* / background-color: #46474a; } #container{ /* height: 800px; */ width: 100%; } #container .content{ width: 1200px; margin: 0px auto; margin-top: 50px; } #container .content .main{ width: 950px; /* height: 800px; */ margin: 0px auto; /* background-color: #ededed; */ } #container .content .main ul li{ display: block; height: 220px; width: 100%; margin-bottom: 20px; border: 1px dashed #f60; } .main ul li .info{ height:100%; width:680px; float:right; background-color:snow; border-bottom:1px solid #aaa; } .main ul li .info .info-right{ width:80px; height:80px; border:1px dashed orange; float: right; margin-top:70px; } .main ul li .info .info-left{ width:300px; height:120px; border:1px dashed orange; margin-top:50px; } .main ul li .ids{ height:50px; width:50px; margin-top:85px; /* margin-bottom:85px; background-color:orange; display:inline-block; }. Main ul li. PIC {height:200px; width:160px; margin:10px 25px; border:1px dashed green; display: inline-block; /* Make sure it's on the same line */} #footer{height: 300px; background-color: #46474a; } </style> </head> <body> <! <div id="header"> <div class="header-nav"> <h2> https://maoyan.com/board </div> </div> <! -- End of page header --> <! <div id="nav"></div> <! -- End of navigation --> <! Start of page body --> <div id="container"> <div class="content"> <div class="main"> <ul> <li> <div class="info" class="info-right"></div> <div class="info-left"></div> </div> <div class="ids"></div> <div class="pic"></div> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> <! -- End of page body --> <! <div id="footer"></div> <! -- Page body end --> </body> </ HTML >Copy the code3. HTML5 semantic page layout
This is similar to div tags, except that div tags are converted to tags with specific meaning
1) Replace labels
2) Compatibility issues
To solve compatibility problems, add to the code body
However, sometimes foreign websites may take too long to visit. You can also put the downloaded HTML5. js file in the folder where the HTML document is
3) Examples using semantic tags entirely
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layout TEST</title> <! --[if lt IE 9]> <script src="./html5.js" type="text/javascript"></script> <! [endif]--> <style type=" color: #CCCCCC; color: #CCCCCC; Font: Geneva, sans-serif; Margin: 10px auto; /* Margin */ max-width: 800px; border: solid; /* border-bottom: #FFFFFF; /* align: center; /* align: center; /* align: center; /* Text center */} header {/* Body page header applies */ background-color: #F47D31; color: #FFFFFF; text-align: center; } article {/* body page article applies */ background-color: #eee; } p {/* body page p applies */ color: #F36; } nav,article,aside {/* common attributes */ margin: 10px; padding: 10px; display: block; } header#page_header nav {/*header#page_header nav attribute */ list-style: none; margin: 0; padding: 0; } header#page_header ul li {/*header#page_header ul li attribute */ padding: 0; margin: 0 20px 0 0; display: inline; } section#posts {/*#posts section */ display: block; float: left; width: 70%; height: auto; background-color: #F69; } section#posts article footer {/*section#posts article footer */ background-color: #039; clear: both; height: 50px; display: block; color: #FFFFFF; text-align: center; padding: 15px; } section#posts aside {/*section#posts aside */ background-color: #069; display: block; float: right; width: 35%; margin-left: 5%; font-size: 20px; line-height: 40px; } section#sidebar {/*section#sidebar */ background-color: #eee; display: block; float: right; width: 25%; height: auto; background-color: #699; margin-right: 15px; } footer#page_footer {/*footer#page_footer attribute */ display: block; clear: both; width: 100%; margin-top: 15px; display: block; color: #FFFFFF; text-align: center; background-color: #06C; } </style> </head> <body> <h2>body bootstrap</h2> <header id="page_header"> <h1>Header</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav> </header> <section id="posts"> <h2>Section</h2> <article class="post"> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you? I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> <article class="post"> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you? I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> </section> <section id="sidebar"> <h2>Section</h2> <header> <h2>Sidebar Header</h2> </header> <nav> <h3></h3> <ul> <li><a href="2012/04">April 2012</a></li> <li><a href="2012/03">March 2012</a></li> <li><a href="2012/02">February 2012</a></li> <li><a href="2012/01">January 2012</a></li> </ul> </nav> </section> <footer id="page_footer"> <h2>Footer</h2> </footer> </body> </html>Copy the code
4. Introduction to responsive layout
1) Simple responsive layout examples
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style> div. Dd {border:1px solid red; width:1200px; margin:0px auto; } ul{list-style:none; } ul li{ width:180px; height:300px; margin:5px; float:left; border:1px solid #ddd; } @media all and (min-width:501px) and (max-width:1000px) { div.dd{width:980px} ul li{border-color:green; } } @media all and (min-width:0px) and (max-width:500px) { div.dd{width:450px} ul li{border-color:red; }} < / style > < / head > < body > < h1 > responsive layout < / h1 > < div class = "dd" > < ul > < li > < / li > < li > < / li > < li > < / li > < li > < / li > < li > < / li > <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div style="clear: both; width: 100%; height:1px;" ></div> </div> </body> </html>Copy the code
2) Respond in percentage
<! Doctype HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title>Document</title> <style> Min-height,max-width,max-height combine to simulate responsive and streaming layout, the container will change with the browser size, min-width limit mutation minimum width, */ div{width:100%; height:auto; overflow:hidden; background:pink; } div>img{ width:15%; min-width:80px; max-width:150px; margin-left:5px; } </style> </head> <body> <div> <img src="68.jpg" alt=""> <img src="69.jpg" alt=""> <img src="70.jpg" alt=""> <img src="71.jpg" alt=""> <img src="72.jpg" alt=""> <img src="68.jpg" alt=""> </div> </body> </html>Copy the code
The chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.
Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)