常見的CSS布局樣式

derek_334892 發布于2019-08-30 11:20 / 1362人閱讀

摘要：在定義樣式前要設定一些默認樣式一列布局兩個要點頁面內容區域有一個固定寬度。自適應寬的列根據瀏覽器窗口的大小自動判斷寬度，主要放置主體內容。

在定義樣式前要設定一些默認樣式

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

一列布局

兩個要點

頁面內容區域有一個固定寬度。
頁面內容區域在瀏覽器窗口中自適應居中

實現方法：

頁面內容區域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;}

一列固定寬，一列自適應寬：

固定寬度的列：通常稱為邊欄（左右均可），主要放置一些固定性的內容，如導航，菜單之類。
自適應寬的列：：根據瀏覽器窗口的大小自動判斷寬度，主要放置主體內容。

應用場景：

后臺管理、用戶中心、博客等

三列布局

特點：

三列布局，中間寬度自適應，兩邊定寬。
中間列放置主體內容，在瀏覽器中優先展示渲染。

原理：

當元素處于浮動狀態時，設置負margin >= 子元素寬度時，子元素會覆蓋到兄弟元素之上

*{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; **這個是將標準盒模型轉化為框架盒模型
padding-left:200px;}
.sidebox-left{margin-left:-100%;}
.sidebox-right{maring-left:-300px;}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114925.html

前端常見知識點匯總（面試）-HTML和CSS部分

摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 評論0 收藏0
前端常見知識點匯總（面試）-HTML和CSS部分

摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...

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

摘要：目錄一大結構上的導航欄和內容區域兩欄布局博客園為例騰訊課堂個人中心頁慕課網個人中心頁個人中心頁二版的結構三類似九宮格布局的兩列結構四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。目錄：一、大結構上的導航欄和內容區域兩欄布局1、博客園為例2、騰訊課堂個人中心頁3、慕課網個人中心頁4、github個人中心頁二、mini版的nav+cont結構三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0
css權重與常見布局（1）

摘要：實戰例題某廠前端工程師筆試題基于以下的結構和樣式，文本的顏色是計算權重權重最大因為所以文本顯示的這種顏色 CSS的選擇器類型與權重值通配符選擇器權重值為 0 元素選擇器，和偽元素(例如::before) 權重值為 1 類選擇器(class)，屬性選擇器，偽類(:hover) 權重值為 10 ID選擇器權重值為 100 行內樣式權重值為 1000 ！impor...

CoderStudy 2019-08-30 11:03 評論0 收藏0
CSS常見問題小結

摘要：常見問題小結一行內樣式內聯樣式外部樣式行內樣式代碼寫在具體網頁中的一個元素內比如一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時候需要為很多的標簽設置屬性，所以會導致頁面不夠純凈，文件體積過大不利于，后期維護成本高。 CSS常見問題小結一、行內樣式、內聯樣式、外部樣式行內樣式：代碼寫在具體網頁中的一個元素內；比如：一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時...

ivyzhang 2019-08-30 10:48 評論0 收藏0