常見的CSS布局樣式

derek_334892 發(fā)布于2019-08-30 11:20 / 1369人閱讀

摘要：在定義樣式前要設(shè)定一些默認(rèn)樣式一列布局兩個(gè)要點(diǎn)頁面內(nèi)容區(qū)域有一個(gè)固定寬度。自適應(yīng)寬的列根據(jù)瀏覽器窗口的大小自動(dòng)判斷寬度，主要放置主體內(nèi)容。

在定義樣式前要設(shè)定一些默認(rèn)樣式

*{margin:0;padding:0;}
html body{height:100%;}

一列布局

兩個(gè)要點(diǎn)

頁面內(nèi)容區(qū)域有一個(gè)固定寬度。
頁面內(nèi)容區(qū)域在瀏覽器窗口中自適應(yīng)居中

實(shí)現(xiàn)方法：

頁面內(nèi)容區(qū)域box{width: 自定義寬度；margin：0 auto;}

兩列布局

*{margin:0;padding:0;}
html,body{height:100%;}
aside,main{height:100%;}
aside{background:#72C7A1;}
.main{background:#E0C569;}

aside{width:200px;float:left;}
.main{margin-left:200px;}

一列固定寬，一列自適應(yīng)寬：

固定寬度的列：通常稱為邊欄（左右均可），主要放置一些固定性的內(nèi)容，如導(dǎo)航，菜單之類。
自適應(yīng)寬的列：：根據(jù)瀏覽器窗口的大小自動(dòng)判斷寬度，主要放置主體內(nèi)容。

應(yīng)用場(chǎng)景：

后臺(tái)管理、用戶中心、博客等

三列布局

特點(diǎn)：

三列布局，中間寬度自適應(yīng)，兩邊定寬。
中間列放置主體內(nèi)容，在瀏覽器中優(yōu)先展示渲染。

原理：

當(dāng)元素處于浮動(dòng)狀態(tài)時(shí)，設(shè)置負(fù)margin >= 子元素寬度時(shí)，子元素會(huì)覆蓋到兄弟元素之上

*{margin:0;padding:0;}
html,body{height:100%;}
main,.sidebox-left,sidebox-right{height:100%;}
main{background:#1A2F90;color:#ffff;}
.sidebox-left{width:200px;background:#CDE36D;}
.sidebox-right{width:300px;background:#FB81E7;}

main,.sidebox-left,sidebox-right{float:left}
main{width:100%;
** box-sizing:border-box; **這個(gè)是將標(biāo)準(zhǔn)盒模型轉(zhuǎn)化為框架盒模型
padding-left:200px;}
.sidebox-left{margin-left:-100%;}
.sidebox-right{maring-left:-300px;}

云服務(wù)器 GPU云服務(wù)器 css的樣式 html的css樣式樣式和布局 iOS書架布局樣式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114925.html

相關(guān)文章

前端常見知識(shí)點(diǎn)匯總（面試）-HTML和CSS部分

摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom 塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 評(píng)論0 收藏0
前端常見知識(shí)點(diǎn)匯總（面試）-HTML和CSS部分

摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom 塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding3、可以使用displa...

wuyangnju 2019-08-02 13:58 評(píng)論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁慕課網(wǎng)個(gè)人中心頁個(gè)人中心頁二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁3、慕課網(wǎng)個(gè)人中心頁4、github個(gè)人中心頁二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評(píng)論0 收藏0
css權(quán)重與常見布局（1）

摘要：實(shí)戰(zhàn)例題某廠前端工程師筆試題基于以下的結(jié)構(gòu)和樣式，文本的顏色是計(jì)算權(quán)重權(quán)重最大因?yàn)樗晕谋撅@示的這種顏色 CSS的選擇器類型與權(quán)重值通配符選擇器權(quán)重值為 0 元素選擇器，和偽元素(例如::before) 權(quán)重值為 1 類選擇器(class)，屬性選擇器，偽類(:hover) 權(quán)重值為 10 ID選擇器權(quán)重值為 100 行內(nèi)樣式權(quán)重值為 1000 ！impor...

CoderStudy 2019-08-30 11:03 評(píng)論0 收藏0
CSS常見問題小結(jié)

摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁面不夠純凈，文件體積過大不利于，后期維護(hù)成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)；比如：一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁面的時(shí)...

ivyzhang 2019-08-30 10:48 評(píng)論0 收藏0