2018年已通過了一週,總結一下2017年在公司wiki上寫的一篇關於css佈局的知識,當時也借鑑了幾個大神寫的css佈局知識,和本身在項目中遇到的坑。廢話很少說。請看如下的乾貨。javascript
大屏展現: css
主要代碼以下:html
<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">
設置子元素的margin,而後父元素必須浮動。
用父元素包裹,主要是由於right會覆蓋left,從而致使left內容不能夠看到,若是直接在left上設置margin或者padding會致使佈局變化,所以只能再用一個div包裹內容,而且去除right覆蓋的寬度。
</div>
</div>
<div class="right">-margin必須大於或等於自身的寬度纔會上移</div>
<div class="layout0"></div>
</div>
</body>
複製代碼
實現過程當中須要注意的是:
1. 自適應的容器須要容器包裹住,不然容器內的內容會被覆蓋。
2. right容器的負邊距必須大於或等於自身的寬度纔會上移。
3. 若是right容器負邊距等於自身的寬度它會靠右對齊,若是負邊距等於-100%,則會靠左對齊。
java
主要的代碼以下:
git
<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">左邊固定寬度,右邊自適應</div>
<div class="right"></div>
</div>
</body>
複製代碼
實現過程當中須要注意的是: 1. left須要脫離文檔流,而right只須要正常顯示就能夠。
2. left只是覆蓋在right上邊,所以想要讓right內容完整顯示須要給right padding-left或者margin-left。
github
大屏展現:
web
主要代碼以下:
瀏覽器
<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">即左右固定,中間自適應,它能夠利用margin-left爲負數來實現,它的實現原理就是margin爲負值能夠改變float元素的排列位置</div>
<div id="body">
<div class="main">當多個元素同時從標準流中脫離開來時,若是前一個元素的寬度爲100%寬度,後面的元素經過負邊距能夠實現上移。當負的邊距超過自身的寬度將上移,只要沒有超過自身寬度就不會上移</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
複製代碼
實現過程當中須要注意:
1. 中間自適應的div須要放在left和right容器前面而且內容div須要用父容器包裹
2. left和right容器向同一個方向浮動。
bash
主要代碼以下:
wordpress
<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">左右固定寬度而且向兩邊浮動,中間的div設置兩邊的margin</div>
<div id="body">
<div class="left"></div>
<div class="right"></div>
<div class="main">該方案有一個缺陷,在小屏幕狀況下回致使right被擠下去,main沒有了</div>
</div>
<div id="footer"></div>
</body>
複製代碼
實現過程當中須要注意:
1. 該方式只須要注意中間自適應的div須要放在left和right容器的後面。
2. left和right容器向兩邊浮動。
主要代碼以下:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>使用flex 實現「雙飛翼佈局」</title>
</head>
<style type="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">flex 語法我參照了阮一峯關於flex語法介紹 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
複製代碼
若是未了解過flex佈局請移至文末點擊連接查看 阮一峯大神寫的關於flex語法
這邊就不絮絮不休的講一些基礎的css定位知識了(ps:不會的請自行到w3c官網查閱),我主要來說解一下工做中遇到的坑。以避免其餘人和我同樣掉入坑中。
<!DOCTYPE html>
<html>
<head>
<title>關於position的定位的坑</title>
</head>
<style type="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;
}
/*第一個模態框的樣式*/
#layout{
display: none;
width: 100%;
height: 100%;
}
/*使用flex佈局水平豎直居中*/
/*#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);
}*/
/*使用postion 和 transform 水平垂直居中*/
#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 > 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;
}
/*第二個模態框的樣式*/
.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>刪除</div>
<div id="layout">
<div id="layout-box">
<div class="modal-dialog">
<div class="dialog-title">提示</div>
<div class="dialog-content">是否刪除該項,點擊肯定</div>
<div class="dialog-button">
<div class="button-box">
<span id="confirm">肯定</span>
</div>
<div class="button-box">
<span id="cancel">取消</span>
</div>
</div>
<div id="add-button"><i>+</i>添加</div>
<div class="layout2">
<div class="modal-dialog2">
<span class="modal-text">你是個人小可愛</span>
<span id="close">關閉</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="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>
複製代碼
若是咱們嘗試把父容器上的transform屬性去除,咱們能夠看到 子容器沒有基於父容器定位,而是基於body定位的,寬度也是基於body給的50%寬度。效果圖以下:
<!DOCTYPE html>
<html>
<head>
<title>關於position的定位的坑</title>
</head>
<style type="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;
}
/*第一個模態框的樣式*/
#layout{
display: none;
width: 100%;
height: 100%;
}
/*使用flex佈局水平豎直居中*/
#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);
}
/*使用postion 和 transform 水平垂直居中*/
.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 > 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;
}
/*第二個模態框的樣式*/
.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>刪除</div>
<div id="layout">
<div id="layout-box">
<div class="modal-dialog">
<div class="dialog-title">提示</div>
<div class="dialog-content">是否刪除該項,點擊肯定</div>
<div class="dialog-button">
<div class="button-box">
<span id="confirm">肯定</span>
</div>
<div class="button-box">
<span id="cancel">取消</span>
</div>
</div>
<div id="add-button"><i>+</i>添加</div>
<div class="layout2">
<div class="modal-dialog2">
<span class="modal-text">你是個人小可愛</span>
<span id="close">關閉</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="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>
複製代碼
**1、**在webkit內核瀏覽器中 給fixed加上防抖樣式 - webkit - transform: translateZ(0);
**2、**設置html 和body 的css {height:100%;overflow:auto;margin:0;} 這個影響全局樣式不建議使用。
3、 在fiexd內設置position:absolute,以下:
<div style="position:fiexd;bottom:0px;">
<div style="position:absolute;">
</div>
</div>
複製代碼
主要在css文件中寫入
@media screen and (max-width:600px){
寫入當屏幕小於或等於600px時的樣式
}
@media screen and (min-width:900px){
寫入當屏幕大於或等於900px時的樣式
}
@media screen and (min-width:600px) and (max-width:900px){
寫入當屏幕在600px-900px之間的樣式
}
@media screen and (max-device-width: 480px){
寫入最大設備寬度爲480px,好比說iPhone上的顯示,這裏的max-device-width所指的是設備的實際分辨率,也就是指可視面積分辨率
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
寫入專門針對iPhone4的移動設備樣式
}
@media all and (orientation:portrait){
寫入設備在縱向時的樣式
}
@media all and (orientation:landscape){
寫入設備在橫向時的樣式
}
@media not print and (max-width: 1200px){
not是用來排除某種制定的媒體類型
寫入在除打印設備和設備寬度小於1200px下的全部設備的樣式
}
@media only screen and (max-device-width:240px){
only用來定某種特定的媒體類型,能夠用來排除不支持媒體查詢的瀏覽器。
寫入只能在最大設備寬度爲240px的屏幕下使用的樣式
}
複製代碼
CSS3與頁面佈局學習總結(四)——頁面佈局的多種方法
阮一峯——關於flex語法介紹
最全CSS各類佈局詳解
CSS 佈局說——多是最全的
CSS 黑魔法小技巧,讓你少寫沒必要要的JS,代碼更優雅 實用的60個CSS代碼片斷 解決CSS position:fixed 抖動問題 介紹了各手機的像素密度_(-webkit-min-device-pixel-ratio)_響應式佈局
張鑫旭關於設備像素比devicePixelRatio簡單介紹
CSS3--媒體查詢@media
起初我並不注重css學習,但項目中每張頁面都要作響應式,因此爲了本身少寫css代碼,提升工做效率,並減小冗餘css,我不得很差好了解css佈局,來應對各類UI圖紙和響應式。同時寫這篇文章,也但願各位,不要再去踩相同的坑。初次寫文章,如若文中有什麼不對的地方,還望指正,謝謝各位看官大佬們。