preface
2018 has been a week, summarize 2017 in the company wiki to write a knowledge about CSS layout, then also draw on the CSS layout knowledge written by several gods, and their own pit encountered in the project. Without further ado. Please look at the dry goods below.
1, left fixed, right adaptive layout of the two ways to achieve
The renderings are as follows:
Large screen display:
The first implementation uses negative margins and floating to achieve a fixed left and adaptive right layout.
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>
<div id="body">
<div class="left">
<div class="left-content"> set the margin of the child element, then the parent element must float. If you set margin or padding directly on the left, the layout will change. Therefore, you can only use another div to wrap the content and remove the width of the right overlay. </div> </div> <div class="right">-margin must be greater than or equal to its own width to move up </div> <div class="layout0"></div>
</div>
</body>
Copy the codeNote the following during the implementation: 1. The adaptive container needs to be wrapped around the container, otherwise the contents of the container will be overwritten. 2. The negative margin of the right container must be greater than or equal to its own width. 3. The right container is aligned to the right if the negative margin equals its width, and to the left if the negative margin equals -100%.
The second uses a floating layout to fix the left and adapt the right
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>
<div id="main">
<div class="left"> fixed width on the left and adaptive </div> <div class= on the right"right"></div>
</div>
</body>
Copy the codeNote the following: 1. Left needs to be removed from the document stream, while right only needs to be displayed normally. 2. Left is just overlaid on top of right, so you need to give right padding-left or margin-left to make right content fully displayed.
2. Three ways to achieve the layout of double flying wings
The renderings are as follows:
Large screen display:
The first is done with negative margins and float
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>
<div id="head"> is fixed left and right, and adaptive in the middle. It can be realized by using margin-left to be negative. Its realization principle is that the margin can be changed if it is negativefloat</div> <div id="body">
<div class="main"> When multiple elements are separated from the standard flow at the same time, subsequent elements can be moved up by negative margins if the previous element is 100% wide. </div> </div> <div class= when a negative margin exceeds its own width it will move up"left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
Copy the codeThe middle adaptive div needs to be placed before the left and right containers and the content div needs to be wrapped around the parent container. 2. The left and right containers float in the same direction.
The second is implemented by floating divs on both sides
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>
<div id="head"Margin </div> <div id="body">
<div class="left"></div>
<div class="right"></div>
<div class="main"</div> <div id= </div> <div id= </div> <div id="footer"></div>
</body>
Copy the code1. This method only needs to be noted that the middle of the adaptive div needs to be placed after the left and right containers. 2. Float the left and right containers on both sides.
The third is implemented through flex properties
The main code is as follows:
<! DOCTYPE html> <html> <meta charset="utf-8"> <head> <title> Use Flex to achieve "double wing layout" </title> </head> <styletype="text/css">
#main{display: flex; display: -webkit-flex; Flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .left{ flex: 0 0 auto; width:100px; height: 200px; background-color: red; word-wrap:break-word;
overflow: hidden;
}
.main{
flex: 1 1 auto;
height: 200px;
background-color: green;
}
.right{
flex: 0 0 auto;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<div id="main">
<div class="left"> I reference to the flex grammar nguyen other introduction on the flex grammar http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html < / div > < div class ="main"></div>
<div class="right"></div>
</div>
</body>
</html>
Copy the codeIf you are not familiar with flex layout, please click the link at the end of this article to see the Flex syntax written by Ruan Yifeng
3, positioning layout
Instead of going over the basics of CSS positioning (ps: please go to the W3C website if you don’t), I’ll focus on the pitfalls I’ve encountered in my work. Lest anyone else fall into the same trap as me.
First: When using multiple fixed, pay attention to what location you need to base your location on, because if the parent has the transform attribute, the fixed location of the child element may be based on the parent element container instead of the body location. The effect is as follows:
<! DOCTYPE HTML > < HTML > <head> <title> </title> </head> <styletype="text/css">
body{
margin: 0;
padding: 0;
}
i{
font-style: normal;
cursor: pointer;
}
#delete-button{
position: absolute;
left: 45%;
top: 45%;
text-align: center;
vertical-align: middle;
height: 50px;
margin: auto;
cursor: pointer;
}
#delete-button > i{display: inline-block; width: 32px; height: 32px; border-radius: 16px; background-color: orange; color: red; font-size: 32px; vertical-align: middle; line-height: 28px; } /* The first modal box style */#layout{display: none; width: 100%; height: 100%; } /* Use Flex to center the layout horizontally */ /*#layout-box{position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: flex; display: -webkit-flex; flex-flow: column nowrap; justify-content: center; align-items: center; Background - color: rgba (0,0,0,0.3); }*/ /* Use postion and transform to center horizontally */#layout-box{position: fixed; width: 100%; height: 100%; Background - color: rgba (0,0,0,0.3); } .modal-dialog{ position: absolute; left: 50%; top: 50%; width: 500px; height: 200px; border-radius: 10px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); background-color:#fff;
}
.dialog-title{
text-align: center;
color: # 333;
font-size: 28px;
margin-bottom: 10px;
}
.dialog-content{
text-align: center;
color: # 666;
font-size: 18px;
}
.dialog-button{
margin-top: 20px;
width: 100%;
color: # 333;
}
.dialog-button >.button-box{
display: inline-block;
width: 48%;
text-align: center;
}
.button-box span{
display: inline-block;
padding: 10px;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
#confirm{
background-color: #27ad9a;
}
#cancel{background-color: red; } /* Add button styles */#add-button > i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: #27ad9a;
color: #fff;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
#add-button{display: inline-block; cursor: pointer; } /* Second modal box style */.layout2{display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; Background - color: rgba (0,0,0,0.2); } .modal-dialog2{ position: fixed; left: 50%; top: 50%; width: 50%; height: 50%; border-radius: 10px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); Background - color: rgba (0,0,0,0.2); } .modal-dialog2 > span{ display: block; } .modal-text{float: left;
}
#close{
color: red;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<body>
<div id="delete-button">< I >-</ I > Delete </div> <div id="layout">
<div id="layout-box">
<div class="modal-dialog">
<div class="dialog-title"> prompt </div> <div class="dialog-content"> To delete this item, click OK </div> <div class="dialog-button">
<div class="button-box">
<span id="confirm"</span> </div> <div class="button-box">
<span id="cancel"> Cancel </span> </div> <div id="add-button">< I >+</ I > Add </div> <div class="layout2">
<div class="modal-dialog2">
<span class="modal-text"<span > <span id="close"Closed > < / span > < / div > < / div > < / div > < / div > < / div > < / body > < scripttype="text/javascript">
document.getElementById("delete-button").onclick= function(){
var layout = document.getElementById("layout")
layout.style.display = "block"
}
document.getElementById("confirm").onclick=function(){
var layout = document.getElementById("layout")
layout.style.display = "none"
}
document.getElementById("cancel").onclick=function(){
var layout = document.getElementById("layout")
layout.style.display = "none"
}
document.getElementById("add-button").onclick=function(){
var layout = document.getElementsByClassName("layout2")
layout[0].style.display = "block"
}
document.getElementById("close").onclick=function(){
var layout = document.getElementsByClassName("layout2")
layout[0].style.display = "none"
}
</script>
</html>
Copy the codeIf we try to remove the transform property from the parent, we can see that the child container is positioned not based on the parent, but based on the body, and the width is 50% of the width given by the body. The renderings are as follows:
<! DOCTYPE HTML > < HTML > <head> <title> </title> </head> <styletype="text/css">
body{
margin: 0;
padding: 0;
}
i{
font-style: normal;
cursor: pointer;
}
#delete-button{
position: absolute;
left: 45%;
top: 45%;
text-align: center;
vertical-align: middle;
height: 50px;
margin: auto;
cursor: pointer;
}
#delete-button > i{display: inline-block; width: 32px; height: 32px; border-radius: 16px; background-color: orange; color: red; font-size: 32px; vertical-align: middle; line-height: 28px; } /* The first modal box style */#layout{display: none; width: 100%; height: 100%; } /* Use Flex to center the layout horizontally and vertically */#layout-box{position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: flex; display: -webkit-flex; flex-flow: column nowrap; justify-content: center; align-items: center; Background - color: rgba (0,0,0,0.3); } /* Use postion and transform to center horizontally */. Modal-dialog {width: 500px; height: 200px; border-radius: 10px; background-color:#fff;
}
.dialog-title{
text-align: center;
color: # 333;
font-size: 28px;
margin-bottom: 10px;
}
.dialog-content{
text-align: center;
color: # 666;
font-size: 18px;
}
.dialog-button{
margin-top: 20px;
width: 100%;
color: # 333;
}
.dialog-button >.button-box{
display: inline-block;
width: 48%;
text-align: center;
}
.button-box span{
display: inline-block;
padding: 10px;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
#confirm{
background-color: #27ad9a;
}
#cancel{background-color: red; } /* Add button styles */#add-button > i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: #27ad9a;
color: #fff;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
#add-button{display: inline-block; cursor: pointer; } /* Second modal box style */.layout2{display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; Background - color: rgba (0,0,0,0.2); } .modal-dialog2{ position: fixed; left: 50%; top: 50%; width: 50%; height: 50%; border-radius: 10px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); Background - color: rgba (0,0,0,0.2); } .modal-dialog2 > span{ display: block; } .modal-text{float: left;
}
#close{
color: red;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<body>
<div id="delete-button">< I >-</ I > Delete </div> <div id="layout">
<div id="layout-box">
<div class="modal-dialog">
<div class="dialog-title"> prompt </div> <div class="dialog-content"> To delete this item, click OK </div> <div class="dialog-button">
<div class="button-box">
<span id="confirm"</span> </div> <div class="button-box">
<span id="cancel"> Cancel </span> </div> <div id="add-button">< I >+</ I > Add </div> <div class="layout2">
<div class="modal-dialog2">
<span class="modal-text"<span > <span id="close"Closed > < / span > < / div > < / div > < / div > < / div > < / div > < / body > < scripttype="text/javascript">
document.getElementById("delete-button").onclick= function(){
var layout = document.getElementById("layout")
layout.style.display = "block"
}
document.getElementById("confirm").onclick=function(){
var layout = document.getElementById("layout")
layout.style.display = "none"
}
document.getElementById("cancel").onclick=function(){
var layout = document.getElementById("layout")
layout.style.display = "none"
}
document.getElementById("add-button").onclick=function(){
var layout = document.getElementsByClassName("layout2")
layout[0].style.display = "block"
}
document.getElementById("close").onclick=function(){
var layout = document.getElementsByClassName("layout2")
layout[0].style.display = "none"
}
</script>
</html>
Copy the codeSecond: to solve the jitter problem on the mobile phone (PS: this problem I refer to a blog written by the online god, please move to the end of the article to view)
Fixed | webkit-transform: translateZ(0) | webkit-transform: translateZ(0)
** Set HTML and body CSS {height:100%; overflow:auto; margin:0; } This impact global style is not recommended.
Set position to absolute in FIexD as follows:
<div style="position:fiexd; bottom:0px;">
<div style="position:absolute;">
</div>
</div>
Copy the code
4. Percentage layout is done by setting the width of an element to a percentage or the height to a percentage. Such as: width: 50%; height:50%; I’ll write it like this.
5. Responsive layout (mainly using media queries to achieve responsive design)
CSS3@media is mainly used to do the responsive design of different terminals
Mainly in the CSS file
@media screen and (max-width:600px){write the style when the screen is smaller than or equal to 600px} @media screen and (min-width:900px){write the style when the screen is larger than or equal to 900px} @media screen and (min-width:600px) and (max-width:900px){@media screen and (max-width:900px)} @media screen and (max-device-width: 480px){write a maximum device width of 480px, such as iPhone display, where max-device-width refers to the actual resolution of the device, } @media only screen and (-webkit-min-device-pixel-ratio: 2){write the style of the mobile device specifically for iPhone4} @media all and (orientation:portrait){write the style of the device in portrait} @Media all and (orientation:landscape){ The style of the write device in landscape} @media notprintand (max-width: @media only screen and (max-device-width:240px){ Only specifies a specific media type and can be used to exclude browsers that do not support media queries. Write styles that can only be used under a screen with a maximum device width of 240px}Copy the codeReference articles:
CSS3 and page layout learning summary (four) – – a variety of methods of page layout Ruan Yifeng – about flex syntax introduction to the most complete CSS layout in detail CSS layout said – may be the most complete CSS black magic tips, let you write less unnecessary JS, This paper introduces the pixel density _(-webkit-min-device-Pixel -ratio)_ responsive layout of each mobile phone Zhang Xinxu on the device pixel than devicePixelRatio simple introduction to CSS3– media query @media
Summary:
I didn’t pay much attention to CSS learning at first, but every page in the project had to be responsive, so in order to write less CSS code for myself, increase productivity, and reduce redundant CSS, I had to understand the CSS layout to deal with various UI drawings and responses. At the same time writing this article, also hope that you, do not step on the same pit. Write an article for the first time, if there is anything wrong in the article, but also hope to correct, thank you see the official big men.