淺談css網(wǎng)頁的幾種布局
發(fā)布時間：2018-01-08 15:17:22 作者：愛健身的前端攻城獅 
我要評論
我要評論這篇文章主要介紹了淺談css網(wǎng)頁的幾種布局的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018年已經(jīng)過了一周，總結(jié)一下2017年在公司wiki上寫的一篇關(guān)于css布局的知識，當(dāng)時也借鑒了幾個大神寫的css布局知識，和自己在項目中遇到的坑。廢話不多說。請看以下的干貨。
1、左邊固定，右邊自適應(yīng)布局的兩種實現(xiàn)方式
效果圖如下：
大屏展示：
小屏展示：
第一種實現(xiàn)方式通過負(fù)邊距與浮動 實現(xiàn)左邊固定，右邊自適應(yīng)的布局。 主要代碼如下：
<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">
設(shè)置子元素的margin,然后父元素必須浮動。
用父元素包裹，主要是因為right會覆蓋left，從而導(dǎo)致left內(nèi)容不可以看到，如果直接在left上設(shè)置margin或者padding會導(dǎo)致布局變化，因此只能再用一個div包裹內(nèi)容，并且去除right覆蓋的寬度。
</div>
</div>
<div class="right">-margin必須大于或等于自身的寬度才會上移</div>
<div class="layout0"></div>
</div>
</body>
實現(xiàn)過程中需要注意的是:
1.自適應(yīng)的容器需要容器包裹住，否則容器內(nèi)的內(nèi)容會被覆蓋。
2.right容器的負(fù)邊距必須大于或等于自身的寬度才會上移。
3.如果right容器負(fù)邊距等于自身的寬度它會靠右對齊，如果負(fù)邊距等于-100%，則會靠左對齊。
第二種 通過浮動布局來實現(xiàn)左邊固定，右邊自適應(yīng)的布局
主要的代碼如下：
<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">左邊固定寬度，右邊自適應(yīng)</div>
<div class="right"></div>
</div>
</body>
實現(xiàn)過程中需要注意的是： 1. left需要脫離文檔流，而right只需要正常顯示就可以。
2.left只是覆蓋在right上邊，因此想要讓right內(nèi)容完整顯示需要給right padding-left或者margin-left。
大屏展示：
小屏展示：
主要代碼如下：
<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">即左右固定，中間自適應(yīng)，它可以利用margin-left為負(fù)數(shù)來實現(xiàn)，它的實現(xiàn)原理就是margin為負(fù)值可以改變float元素的排列位置</div>
<div id="body">
<div class="main">當(dāng)多個元素同時從標(biāo)準(zhǔn)流中脫離開來時，如果前一個元素的寬度為100%寬度，后面的元素通過負(fù)邊距可以實現(xiàn)上移。當(dāng)負(fù)的邊距超過自身的寬度將上移，只要沒有超過自身寬度就不會上移</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
實現(xiàn)過程中需要注意:
1.中間自適應(yīng)的div需要放在left和right容器前面并且內(nèi)容div需要用父容器包裹
2.left和right容器向同一個方向浮動。
主要代碼如下：
<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設(shè)置兩邊的margin</div>
<div id="body">
<div class="left"></div>
<div class="right"></div>
<div class="main">該方案有一個缺陷，在小屏幕情況下回導(dǎo)致right被擠下去，main沒有了</div>
</div>
<div id="footer"></div>
</body>
實現(xiàn)過程中需要注意:
1.該方式只需要注意中間自適應(yīng)的div需要放在left和right容器的后面。
2.left和right容器向兩邊浮動。
主要代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>使用flex 實現(xiàn)“雙飛翼布局”</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 語法我參照了阮一峰關(guān)于flex語法介紹 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
如果未了解過flex布局請移至文末點擊鏈接查看 阮一峰大神寫的關(guān)于flex語法
3、定位布局
這邊就不絮絮叨叨的講一些基礎(chǔ)的css定位知識了（ps:不會的請自行到w3c官網(wǎng)查閱），我主要來講解一下工作中遇到的坑。以免其他人和我一樣掉入坑中。
第一：使用多個fixed時，注意自己需要基于什么定位，因為如果父級有用transform屬性時，可能會導(dǎo)致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：
在上圖中我可以發(fā)現(xiàn)中間黑色的小框是基于父級來定位，并且寬度也基于父容器的50%。詳細(xì)的請看下面代碼：
<!DOCTYPE html>
<html>
<head>
<title>關(guān)于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;
}
/*第一個模態(tài)框的樣式*/
#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;
}
/*第二個模態(tài)框的樣式*/
.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">關(guān)閉</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%寬度。效果圖如下：
詳細(xì)請看代碼：
<!DOCTYPE html>
<html>
<head>
<title>關(guān)于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;
}
/*第一個模態(tài)框的樣式*/
#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;
}
/*第二個模態(tài)框的樣式*/
.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">關(guān)閉</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>
第二：解決在手機上的抖動問題（ps：這個問題我參照了網(wǎng)上大神寫的一篇博客請移至文末查看）
**一、**在webkit內(nèi)核瀏覽器中 給fixed加上防抖樣式 - webkit - transform: translateZ(0);
**二、**設(shè)置html 和body 的css {height:100%;overflow:auto;margin:0;} 這個影響全局樣式不建議使用。
三、在fiexd內(nèi)設(shè)置position:absolute，如下：
<div style="position:fiexd;bottom:0px;"> <div style="position:absolute;"> </div> </div>
4、百分比布局 主要通過設(shè)置元素的寬度為百分比或者高度為百分比。比如：width:50%; height:50%; 這樣的寫法。
5、響應(yīng)式布局（主要使用媒體查詢來實現(xiàn)響應(yīng)式設(shè)計） 主要使用CSS3 @media 來做不同終端的響應(yīng)式設(shè)計
主要在css文件中寫入
@media screen and (max-width:600px){
寫入當(dāng)屏幕小于或等于600px時的樣式
}
@media screen and (min-width:900px){
寫入當(dāng)屏幕大于或等于900px時的樣式
}
@media screen and (min-width:600px) and (max-width:900px){
寫入當(dāng)屏幕在600px-900px之間的樣式
}
@media screen and (max-device-width: 480px){
寫入最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實際分辨率，也就是指可視面積分辨率
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
寫入專門針對iPhone4的移動設(shè)備樣式
}
@media all and (orientation:portrait){
寫入設(shè)備在縱向時的樣式
}
@media all and (orientation:landscape){
寫入設(shè)備在橫向時的樣式
}
@media not print and (max-width: 1200px){
not是用來排除某種制定的媒體類型
寫入在除打印設(shè)備和設(shè)備寬度小于1200px下的所有設(shè)備的樣式
}
@media only screen and (max-device-width:240px){
only用來定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器。
寫入只能在最大設(shè)備寬度為240px的屏幕下使用的樣式
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解css布局實現(xiàn)左中右布局的5種方式的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-05- 這篇文章主要介紹了CSS實現(xiàn)多行多列的布局的實例代碼,需要的朋友可以參考下2018-02-28
這篇文章主要介紹了css Flex布局的可伸縮性(Flexibility)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-07
這篇文章主要介紹了如何理解 CSS 布局和塊級格式上下文的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-14- 本篇文章主要介紹了css sticker-footer 布局，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-06
詳解使用CSS3的@media來編寫響應(yīng)式的頁面
這篇文章主要介紹了詳解使用CSS3的@media來編寫響應(yīng)式的頁面,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-01
這篇文章主要介紹了CSS布局方案小結(jié)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-13
