最全CSS各种布局详解
一、單列布局的實(shí)現(xiàn)
1、單列布局中最常用的水平居中的四種方法
- 同時(shí)設(shè)置父元素和子元素的樣式：父元素使用text-align實(shí)現(xiàn)，子元素使用inline-block。這里寬高背景只是為了展示。
- 使用margin:0 auto來實(shí)現(xiàn)，必須要設(shè)置一個(gè)width.
- 使用絕對(duì)定位，父元素使用相對(duì)，子元素絕對(duì)。
- 使用彈性盒flex布局實(shí)現(xiàn)
彈性盒是專為不同尺寸和不同設(shè)備的元素排布而設(shè)計(jì)的。父元素中使用block:flex設(shè)置一個(gè)彈性盒，子元素中flex:number設(shè)置該子元素占一行中的幾份。
彈性盒幾乎能實(shí)現(xiàn)目前存在的所有布局，它還有很多的內(nèi)容在這里也詳細(xì)說一下。
flex-direction:定義了排布是按行還是列。justify-content:對(duì)于彈性項(xiàng)沒有填滿彈性容器的時(shí)候，它定義彈性項(xiàng)是怎么對(duì)齊的。二、多列布局
1、多列布局的“雙飛翼布局”，即左右固定，中間自適應(yīng)，他可以利用margin-left為負(fù)數(shù)來實(shí)現(xiàn)，它的實(shí)現(xiàn)原理就是margin為負(fù)值可以改變float元素的排列位置。
<div class="main"><div class="main-content">main content</div> </div> <div class="left">left</div> <div class="right">right</div>*{margin:0;padding: 0}.main{float: left;width: 100%;}.main .main-content{margin: 0 210px;background-color: rgba(33, 114, 214, 0.8);height: 500px}.left{width: 200px;float: left;background-color: rgba(255, 82, 0, 0.8);margin-left: -100%;height: 200px}.right{width: 200px;height: 200px;margin-left: -200px;float: left;background-color: rgba(90, 243, 151, 0.8);}多列布局的“雙飛翼布局”，也可以利用彈性盒實(shí)現(xiàn)，同樣父元素設(shè)置display:flex, 子元素中左右固定欄設(shè)置為固定寬度，中間自適應(yīng)部分設(shè)置flex:1.
<style>.parent{display:flex;}.left{width:100px;background-color: aqua;}.main{flex:1;background-color: red;}.right{width:100px;background-color: greenyellow;} </style> <div class="parent"><div class="left">left</div><div class="main">main</div><div class="right">right</div> </div>2、真正的多列布局
借助margin為負(fù)值可以增加寬度的方式來進(jìn)行多列布局。
同樣我們也可以使用彈性盒布局
<style>.parent{display:flex;}.column{flex:1;}.column +.column{margin-left:20px;} </style> <body> <div class="parent"><div class="column">1</div><div class="column">1</div><div class="column">1</div><div class="column">1</div> </div> </body>三、響應(yīng)式布局
響應(yīng)式布局在不同的大小的屏幕上如何做出不同的布局，視口指的是瀏覽器窗口的可視區(qū)域，視口大小決定了頁面布局的可用寬度，我們可以使用meta標(biāo)簽設(shè)置設(shè)置布局寬度等于設(shè)備寬度,布局viewport等于度量viewport.
<meta name="viewport" content="width=device-width,initial-scale=1">此時(shí)，頁面布局的寬度就是你的設(shè)配的寬度。
使用媒體查詢來實(shí)現(xiàn)響應(yīng)設(shè)計(jì)（CSS3 media queries）
CSS3的media queries的模塊擴(kuò)展了@media的應(yīng)用，不僅可以識(shí)別不同煩人媒體類型，還能識(shí)別媒體的特征——比如屏幕寬度，像素等參數(shù)。media queries語法：@media 媒體類型 媒體識(shí)別條件表達(dá)式。
@media handheld, (min-width:700px) and (orientation:landscape){}當(dāng)使用有顯示屏的設(shè)備的時(shí)候：當(dāng)最小寬度<700px,或者是橫屏的時(shí)候執(zhí)行代碼。
在三欄布局中使用響應(yīng)設(shè)計(jì)
.row{width: 960px;}.row:after{clear: left;content: '';/*清除浮動(dòng)*/display: table;}[class^='col']{float: left;}.col1{width: 25%;}.col2{width: 50%;}.col3{width: 75%;}/** 屏幕設(shè)備寬度大于1200的時(shí)候，row寬度固定為1170px**/@media (min-width: 1200px) {.row{width:1170px}}/** 平板電腦的設(shè)置**/@media (min-width: 768px) and (max-width: 979px){.row{width:724px}}/** 橫屏手機(jī)或者豎屏平板的所有列按行排列**/@media (max-width:767px){[class^='col']{float:none;width: 100%;}.row{width: 100%;}}/** 豎屏手機(jī)**/@media (max-width: 480px){} </style> <body> <div class="container"><div class="row"><div class="header">header</div></div><div class="row"><div class="col1">q</div><div class="col2">w</div><div class="col1">e</div></div><div class="row"><div class="footer">footer</div></div> </div> </body>
?
總結(jié)
以上是生活随笔為你收集整理的最全CSS各种布局详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VLC框架分析
- 下一篇： 如何和何时使用 CSS 的权重设置 !i