最全CSS各种布局详解
生活随笔
收集整理的這篇文章主要介紹了
最全CSS各种布局详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、單列布局的實現
1、單列布局中最常用的水平居中的四種方法
- 同時設置父元素和子元素的樣式：父元素使用text-align實現，子元素使用inline-block。這里寬高背景只是為了展示。
- 使用margin:0 auto來實現，必須要設置一個width.
- 使用絕對定位，父元素使用相對，子元素絕對。
- 使用彈性盒flex布局實現
彈性盒是專為不同尺寸和不同設備的元素排布而設計的。父元素中使用block:flex設置一個彈性盒，子元素中flex:number設置該子元素占一行中的幾份。
彈性盒幾乎能實現目前存在的所有布局，它還有很多的內容在這里也詳細說一下。
flex-direction:定義了排布是按行還是列。justify-content:對于彈性項沒有填滿彈性容器的時候，它定義彈性項是怎么對齊的。二、多列布局
1、多列布局的“雙飛翼布局”，即左右固定，中間自適應，他可以利用margin-left為負數來實現，它的實現原理就是margin為負值可以改變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);}多列布局的“雙飛翼布局”，也可以利用彈性盒實現，同樣父元素設置display:flex, 子元素中左右固定欄設置為固定寬度，中間自適應部分設置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為負值可以增加寬度的方式來進行多列布局。
同樣我們也可以使用彈性盒布局
<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>三、響應式布局
響應式布局在不同的大小的屏幕上如何做出不同的布局，視口指的是瀏覽器窗口的可視區域，視口大小決定了頁面布局的可用寬度，我們可以使用meta標簽設置設置布局寬度等于設備寬度,布局viewport等于度量viewport.
<meta name="viewport" content="width=device-width,initial-scale=1">此時，頁面布局的寬度就是你的設配的寬度。
使用媒體查詢來實現響應設計（CSS3 media queries）
CSS3的media queries的模塊擴展了@media的應用，不僅可以識別不同煩人媒體類型，還能識別媒體的特征——比如屏幕寬度，像素等參數。media queries語法：@media 媒體類型 媒體識別條件表達式。
@media handheld, (min-width:700px) and (orientation:landscape){}當使用有顯示屏的設備的時候：當最小寬度<700px,或者是橫屏的時候執行代碼。
在三欄布局中使用響應設計
.row{width: 960px;}.row:after{clear: left;content: '';/*清除浮動*/display: table;}[class^='col']{float: left;}.col1{width: 25%;}.col2{width: 50%;}.col3{width: 75%;}/** 屏幕設備寬度大于1200的時候，row寬度固定為1170px**/@media (min-width: 1200px) {.row{width:1170px}}/** 平板電腦的設置**/@media (min-width: 768px) and (max-width: 979px){.row{width:724px}}/** 橫屏手機或者豎屏平板的所有列按行排列**/@media (max-width:767px){[class^='col']{float:none;width: 100%;}.row{width: 100%;}}/** 豎屏手機**/@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>
?
總結
以上是生活随笔為你收集整理的最全CSS各种布局详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VLC框架分析
- 下一篇： 如何和何时使用 CSS 的权重设置 !i