2018 has been a week to summarize the 2017 on the company wiki written on the CSS layout of knowledge, at that time also borrowed from a few great God written CSS layout knowledge, and their own in the project encountered in the pit. Don't say much nonsense. Please look at the following dry goods.
1, left fixed, the right self-adaptive layout of two ways to achieve
As follows:
Large screen display:
Small screen display:
The first implementation is fixed on the left by negative margin and floating, and the right adaptive layout is implemented. The main code is as follows:
<style type= "Text/css" >.left{float:left;width:100%;height:200px;background-color:red;}. left-content{margin-left:30%;}. Right{float:left;width:30%;margin-left: -100%;height:200px;background-color:green;}. Layout0{clear:both;width:100px;height:100px;background-color:yellow;} </style><body><p id= "Body" ><p class= "left" ><p class= "left-content" > Set margin of child elements, The parent element must then float. Wrapping with the parent element is mainly because right overwrites left, which causes the leaving content to not be visible, and if the margin is set directly on the right or padding causes the layout to change, it is only possible to wrap the contents with one P and remove the width of the right overlay. </p></p><p class= "Right" >-margin must be greater than or equal to its width before moving up </p><p class= "Layout0" ></p> </p></body>The implementation process should be noted that:
1. The adaptive container needs to be wrapped in containers, otherwise the contents of the container will be overwritten.
The negative margin of a 2.right container must be greater than or equal to its own width before it moves up.
3. If the negative margin of the right container is equal to its width, it will be aligned to the left, and if the negative margin is equal to 100%, it will be aligned with the margin.
The second is a floating layout to achieve the left fixed, the right adaptive layout
The main code is as follows:
<style type= "Text/css" >.left{float:left;width:200px;height:200px;background-color:yellow;}. right{padding-left:200px;height:200px;background-color:red;} @media (min-width:650px) and (max-width:1000px) {. left{width:150px;}. right{margin-left:150px;}} @media (max-width:640px) {. left{width:100px;}. right{margin-left:100px;}} </style><body><p id= "main" ><p class= "left" > Fixed width, right adaptive </p><p class= </p></p></body>The implementation process should be noted that: 1. left needs to be out of the document stream, and right only needs to be displayed properly.
2.left just covers the top of right, so you need to give right padding-left or margin-left to make the right content appear intact.
Large screen display:
Small screen display:
The main code is as follows:
<style type= "Text/css" > #head {height:200px;background-color:yellow;} #body {width:100%;float:left;}. Main{background-color:green;min-height:200px;margin:0 210px;}. Left{float:left;background-color:red;width:200px;height:200px;margin-left:-100%;}. Right{float:right;background-color:blue;width:200px;height:200px;margin-left: -200px;} #footer {clear:both;height:200px;background-color:orange;} </style><body><p id= "Head" > that is fixed around, the middle adaptive, it can use the margin-left as a negative number to achieve, Its implementation principle is that the margin is negative can change the position of the float element </p><p id= "Body" ><p class= "main" > When multiple elements are separated from the standard stream, If the previous element has a width of 100%, the trailing element can be moved up through a negative margin. When the negative margin exceeds its own width will move up, as long as no more than its own width will not move up </p></p><p class= "left" ></p><p class= "right" ></p ><p id= "Footer" ></p></body>The implementation process requires attention:
1. The intermediate adaptive P needs to be placed in front of the left and right containers and the content p needs to be wrapped in the parent container
The 2.left and right containers float in the same direction.
The main code is as follows:
<style type= "Text/css" > #head {height:200px;background-color:yellow;} #body {Overflow:hidden;}. left{float:left;background-color:red;width:200px;height:200px;}. right{float:right;background-color:blue;width:200px;height:200px;}. Main{background-color:green;height:200px;margin:0 210px;} #footer {clear:both;height:200px;background-color:orange;} </style><body><p id= "Head" > Left and right fixed width and floating on both sides, the middle p set margin</p><p id= "Body" ><p Class= "left" ></p><p class= "right" ></p><p class= "main" > This scheme has a flaw that causes right to be squeezed down on a small screen. Main does not have </p></p><p id= "Footer" ></p></body>The implementation process requires attention:
1. This approach only needs to be aware that the intermediate adaptive P needs to be placed behind the left and right containers.
2.left and right containers float to both sides.
The main code is as follows:
<! DOCTYPE html>If you do not know the flex layout, please move to the end of the article click on the link to see Ruan Yi-Feng Great god wrote about Flex syntax
3. Positioning layout
Here is not ramble about some of the basics of CSS positioning knowledge (PS: No, please go to the website), I mainly to explain the work encountered in the pit. Lest other people fall into the pit like me.
First: When using multiple fixed, be aware of what positioning you need to base on, because if the parent is useful, the Transform property may cause the child element's fixed to be positioned based on the parent element container, rather than body positioning. The effect is as follows:
I can see that the middle black box is positioned based on the parent, and the width is based on the parent container's 50%. For details, see the following code:
<! DOCTYPE html>If we try to remove the transform attribute on the parent container, we can see that the child container is not positioned based on the parent container, but is based on the body, and the width is based on the 50% width of the body. As follows:
For details, see the code:
<! DOCTYPE html>Second: Solve the jitter problem on the phone (PS: This question I refer to the online god wrote a blog, please move to the end of the article to view)
* * * * in the WebKit kernel browser to the fixed plus anti-shake style-Webkit-transform:translatez (0);
* * * * * Set HTML and body CSS {height:100%;overflow:auto;margin:0;} This affects the global style is not recommended for use.
Third, in the Fiexd set Position:absolute, as follows:
<p style= "position:fiexd;bottom:0px;" > <p style= "Position:absolute;" > </p></p>4, the percentage layout is mainly by setting the width of the element as a percentage or a height. For example: width:50%; height:50%; This way of writing.
5, responsive layout (mainly using media query to achieve responsive design) mainly use CSS3 @media to do different terminal response design
Write primarily in CSS files
@media screen and (max-width:600px) {writes a style that is less than or equal to 600px} @media screens and (min-width:900px) { Writes a style when the screen is greater than or equal to 900px} @media screens and (min-width:600px) and (max-width:900px) {writes the style of the screen between 600px-900px} @media screens and (max-device-width:480px) {writes the maximum device width of 480px, such as the display on the iphone, where Max-device-width refers to the actual resolution of the device, that is, the visual area resolution} @media Only screen and (-webkit-min-device-pixel-ratio:2) {writes a mobile device style specifically for iPhone4} @media all and (orientation:portrait) {Write Style in Portrait} @media all and (orientation:landscape) {write device in landscape style} @media not print and (max-width:1200px) {Not is used to exclude some of the established The media type is written to the style of all devices except the print device and device width less than 1200px} @media only screen and (max-device-width:240px) {is used to set a specific media type that can be used to exclude media queries that do not support Browser. Write a style that can be used only on screens with a maximum device width of 240px}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
