當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

最全CSS各种布局详解

發布時間：2023/12/18 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了最全CSS各种布局详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、單列布局的實現

1、單列布局中最常用的水平居中的四種方法

同時設置父元素和子元素的樣式：父元素使用text-align實現，子元素使用inline-block。這里寬高背景只是為了展示。

.parent{text-align: center;}.child{display: inline-block;width: 100px;height: 100px;background-color: aqua;}

使用margin:0 auto來實現，必須要設置一個width.

.child{margin: 0 auto;width: 100px;height: 100px;background-color: aqua;}

使用絕對定位，父元素使用相對，子元素絕對。

.parent{position: relative;} .child{position: absolute;left: 50%;}

使用彈性盒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.

2、真正的多列布局
借助margin為負值可以增加寬度的方式來進行多列布局。

同樣我們也可以使用彈性盒布局

三、響應式布局

響應式布局在不同的大小的屏幕上如何做出不同的布局，視口指的是瀏覽器窗口的可視區域，視口大小決定了頁面布局的可用寬度，我們可以使用meta標簽設置設置布局寬度等于設備寬度,布局viewport等于度量viewport.

此時，頁面布局的寬度就是你的設配的寬度。

使用媒體查詢來實現響應設計（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各种布局详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。