頁面架構HTML+CSS ヾ(o◕∀◕)ﾉ經常使用居中&多列布局

時間 2019-11-08

標籤頁面架構 html+css html css 經常使用居中多列佈局欄目系統架構简体版

原文原文鏈接

CSS Reset

1.做用

（1）清除瀏覽器默認樣式
（2）全局樣式定義css

2.特別注意

（1）項目開發初期就定義好
（2）reset.css 在引入的時候必定要放在第一位
（3）不一樣的產品reset.css不同html

3.table合併邊框間距

table {
  border-collapse: collapse; // 合併邊框
  border-spacing: 0; //邊框間距。當 `border-collapse` 值爲 `seperate` 時生效

}

4.一個並不完整也並不通用的reset.css樣例

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}

佈局解決方案

居中佈局

1.水平居中

父元素和子元素寬度未知。express

<div class="parent">
  <div class="child">child</div>
</div>

要達到的效果是這樣：
瀏覽器

方法一：flex + justify-content

主要代碼：iphone

.parent { 
  display: flex;
  justify-content: center;
}

沒啥好解釋，直接看神奇的flex實現栗子吧 (~￣▽￣)~ide

方法二：absolute + transform

主要代碼：模塊化

.parent { position: relative; }
.child { 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

原理是：left: 50%;在子元素的左側添加了一段距離，這段距離是父元素寬度的50%，接着由於translateX(50%) 設置百分比時的參照物是自身寬度，因此向左偏移了自身寬度的50%，就居中啦 ╮(‵▽′)╭ wordpress

動動小手看看栗子工具

方法三：inline-block + text-align

主要代碼：佈局

.parent { text-align: center; }
.child { display: inline-block; }

這種方法有一個問題是：parent設置了text-align: center;後，由於這個屬性可繼承，會致使child中的文字也會居中，而這個效果是咱們未必須要的，因此咱們不少時候須要在.child中加一句 text-align: left;

本身看看栗子

方法四：table + margin

主要代碼：

.child { display: table; margin: 0 auto; }

table的特色：寬度爲內容寬度的塊狀元素，因此也能夠用margin: 0 auto;居中。

優勢：只設置子元素樣式就能夠了，不需關心父元素。

看看栗子

不喜歡這第四個方案，table是辣麼有語義的一個樣式，爲何隨便把人家變成table (￣.￣)

2.垂直居中

父元素和子元素高度未知。

意欲達到的效果：

方法一：flex+ align-items

.parent {
  display: flex;
  align-items: center;
}

同水平居中的方法一

栗子

方法二：absolute + transform

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

同水平居中的方法二

栗子

方法三：table-cell + vertical-align

.parent {
  display: table-cell;
  vertical-align: middle;
}

vertical-align 能夠做用在 inline元素，inline-table元素，以及table-cell元素上。

栗子

3.水平垂直居中

父元素和子元素寬高都未知。

方法一：flex + justify-content + align-items

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

綜合了水平居中和垂直居中的方法一

栗子

方法二： absolute + transform

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

綜合了水平居中和垂直居中的方法二

栗子

方法三： absolute + margin: auto; （經常使用）

.parent { position: relative; }
.child {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

栗子

方法四：[inline-block + text-align] + [table-cell + vertical-align]

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  display: inline-block;
}

栗子

多列布局

1.一列定寬 + 一列自適應

<div class="parent">
  <div class="left"><p>left</p></div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

方法1：float + margin

.left {float: left; width: 100px;}
.right { margin-left: 120px;} //有20px是間距

方法2：（對方法一的改進）float + margin + (fix)

由於方法1在低版本瀏覽器有兼容性問題，因此改進一下。

// 首先在right外面加了right-fix這個div
<div class="parent">
  <div class="left"><p>left</p></div>
  <div class="right-fix"> 
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

CSS改動：

STEP1：

// .left 和 .right 設置暫時不變
.right-fix {float: right; width: 100%;}

效果爲：（注意：咱們把right-fix設置爲白色背景，只是爲了方便觀察。）

STEP2：

能夠看到，因爲right-fix寬度爲100%，因此跑到了left下面一行。想要回到同一行，須要給right-fix設置一個負的margin-left值-100px。

.right-fix { margin-left: -100px; }

關於爲何設置了margin-left: 100px;就可使得回到同一行呢？是由於設置了負的margin-left值以後，瀏覽器計算right-fix元素的寬度後，會加上-100px，也就是減掉100px，這也就是left的寬度，因此left 與 right-fix 加起來沒有超過整行的寬度。
想要進一步瞭解負的margin值能夠參考這篇文章：CSS佈局奇淫巧計之-強大的負邊距

效果如圖：

STEP3：

不幸的是，由於html文檔中right-fix處於left後面，因此left被right-fix遮住了，實際應用中right-fix雖然沒有背景色，可是咱們仍是不會但願它覆蓋在left上面。

因此，咱們須要提升 left 的層級。如何提升呢？因爲設置了position: relative;的元素層級要高於普通元素，因此加上這樣一條：

.left{ position: relative; }

具體能夠參考張鑫旭寫的一篇講解position:relative;很詳細的文章：CSS 相對/絕對(relative/absolute)定位系列（四）

最終達到咱們要的效果：

到jsfiddle中本身試試去

方法3：float + overflow

.left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}

原理是：設置了overflow:hidden; 以後，會觸發BFC模式，而BFC模式內部的佈局不受外部影響，因此不會受浮動影響，不會圍繞left而是跑到left右邊去了。

方法4：table

.parent{
  display: table;
  width: 100%;
  table-layout: fixed; //加速table渲染，實現了佈局優先
}
.left, .right {
  display: table-cell;
}
.left {
  width: 100px;
  padding-right: 20px;//由於table-cell不能設margin，因此設置padding來加間距
}

根據table的特性,left設置了100px後，right就佔了剩餘寬度。

方法5：flex

.parent{ display: flex; }
.left{ width: 100px; margin-right: 20px; }
.right{ flex: 1; }

So easy.

2.多列定寬 + 一列自適應

再加一列定寬就行啦 o(≧v≦)o

3.不定寬 + 一列自適應

不定寬意思是：
1.能夠隨意更改寬度：好比改成100px，200px，同時不須要更改其餘樣式也能夠作到兩列自適應佈局。
2.或不設置寬度而是由裏面子元素的寬度決定。

如下方法對應 [一列定寬+一列自適應] 中的方法

方法1： float + margin ？

很差意思，作不到。

方法2： float + margin +（fix）？

很差意思，也作不到。

方法3： float + overflow ？

闊以！right的樣式沒有依賴於width的寬度。代碼量也少，很棒棒哦！

方法4：table

闊以！right的樣式沒有依賴於width的寬度，即不關心width的寬度。

方法5：flex

強大的flex固然能夠~（傲嬌臉）

4.兩列不定寬 + 一列自適應

沒錯，跟你想的同樣，加一列不定寬的就好了，樣式都同樣ㄟ( ▔, ▔ )ㄏ

5.等分佈局

C + G = 4*（W + G）
如下例子假設間距G = 20px

結構：

<div class="parent">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>

方法1：float

.parent{ margin-left: -20px; }//就是上面公式中等號左邊的G
.column{
  float: left;
  width: 25%;
  padding-left: 20px;//這裏要注意，由於咱們用padding來表示間距，因此若是你是給p元素設置了background-color，會發現沒有間距，p標籤的width纔是上圖中的W
  box-sizing: border-box;
}

方法2：table

<div class="parent-fix">
    <div class="parent">
      <div class="column"><p>1</p></div>
      <div class="column"><p>2</p></div>
      <div class="column"><p>3</p></div>
      <div class="column"><p>4</p></div>
    </div>
</div>

.parent-fix{
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding-left: 20px;//由於單元格不能設置margin，因此間距只能用padding來作。
}

由於table的width默認是隨內容寬度變化的，因此須要手動設置width: 100%;。又由於明確設置了寬度的元素就沒辦法用將margin設爲負值的方式增長20px寬度了，因此須要在外面加一個父元素parent-fix。
這裏你們能夠本身試試比較一下給parent-fix設置width爲100%與不設置width時parent-fix實際寬度（用調試工具裏的查看元素看）的區別來理解。

吶，jsfiddle示例在這

方法3：flex

.parent { display: flex; }
.column { flex: 1; } 
.column + .column { margin-left: 20px; }//好用的兄弟選擇器 (｡・`ω´･)

6.一列定寬+一列自適應（當其中較高的一列高度變化，另外一列同步變化）

右側變高，左側高度隨之變化：

↓↓

方法1：table

table的列之間有自然等高的特性。

就是上面 1.一列定寬 + 一列自適應中的方法4：table。

方法2：flex

flex也是自然的等高 <(￣︶￣)> 由於它默認的align-items爲stretch，即在交叉軸上默認拉伸佔滿整個容器。

仍舊是上面1.一列定寬 + 一列自適應中的方法5：flex。

簡單到很差意思給栗子

方法3：float

仍舊是參照上面1.一列定寬 + 一列自適應中的方法3：float + overflow，float並無自然等高，因此要在這個基礎上作改動。

.left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
//增長部分
.left, .right{
  padding-bottom: 9999px;//使得有背景色的部分變的很高
  margin-bottom: -9999px;//用負的margin抵消掉很高的padding，讓高度變回left和right中較高的那部分的內容高度，以便parent用overflow: hidden;去隱藏掉超出部分
}
.parent {
  overflow: hidden;//隱藏掉超出邊界的部分 
}

其實left的實際高度並無變，是一種僞等高，只是背景變高。

栗子

7.全等四宮格

這是練習題，置幾試試吧。

<div class="parent">
  <div class="outer">
    <div class="column">1</div>
    <div class="column">2</div>
  </div>
  <div class="outer">
    <div class="column">3</div>
    <div class="column">4</div>
  </div>
</div>

方法1：flex

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.outer {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

一顆僅供參考的栗子

方法2：float

個人栗子

方法3：table

一個栗子不必定對

全屏佈局

1.定寬（px）+自適應

只有主內容區 right 隨內容滾動。

方法1.position

<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
<div class="bottom">bottom</div>
</div>

html, body, .parent {height: 100%; overflow: hidden;}//爲了讓整個頁面不滾動
.top {
  position: absolute;
  top: 0; 
  left: 0; right: 0; //注意這個很棒的設置！能夠自動佔滿整行 ヾ(o◕∀◕)ﾉ 
  height: 100px;
}
.left {
  position: absolute;
  left: 0;
  top: 100px; bottom: 50px;
  width:200px;
}
.right {
  position: absolute;
  left: 200px; right: 0;
  top: 100px; bottom: 50px; //這也是上下佔滿除了top和bottom以外的全部高度
  overflow: auto;//讓主內容區能夠滾動
}
.help-right {//僞裝有不少內容
  width: 1000px;
  height: 1000px;
}
.bottom{
  position: absolute;
  bottom: 0; 
  left: 0; right: 0;
  height: 50px;
}

動手寫寫才記得住

方法2.flex

<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
</div>
<div class="bottom">bottom</div>
</div>

html, body, .parent {height: 100%; overflow: hidden;}
.parent {display: flex; flex-direction: column;}
.top { height: 100px; }
.middle {flex: 1; display: flex;}
.left { width:200px; }
.right { flex: 1; overflow: auto; }
.help-right { width: 1000px; height: 1000px; }
.bottom{ height: 50px; }

栗子

2.百分比定寬（%）+自適應

方法1.position ，方法2.flex ：

把原來的用px寫的定寬改爲百分比就能夠了。是相對於body的高度和寬度來變化的。感受top和bottom高度設置百分比不是很實用。

3.自適應+自適應

方法1.position

定寬的高度和寬度影響旁邊欄的佈局，因此實現不了 - 。-

方法2.flex

闊以實現，並且至關簡單 ╮(╯▽╰)╭ 把剛剛設置了高度和寬度的地方去掉就能夠了 ∑(っ °Д °;)っ

驚人的栗子

方法3.Grid

闊以實現，可是由於仍是W3C的草案，因此會常常變化，不穩定，並且瀏覽器支持也很差。

響應式

想要達到的效果

只寫一個網站，在多個終端顯示，在小屏幕上會隱藏部分元素。

如今的狀況

在PC端瀏覽器中能夠正常訪問的網站，到了手機上以後，內容就會變得特別小。
緣由：全部的移動設備都有一個viewport（視窗），這個視窗不是手機屏幕大小，而是一個虛擬的窗口，好比iPhone4的viewport寬度爲980px（以下圖所示）。顯示的時候再按照比例將這980px的內容壓縮顯示到實際的屏幕寬度中。

因此爲防止讓頁面縮小，在移動設備中，咱們會作以下設置

<meta name="viewport" content="
 width=device-width //讓寬度等於設備寬度，由於不一樣的移動設備寬度不一樣 iphone4爲320px
 ,initial-scale=1.0 //初始縮放1.0， 即不縮放，網站就不會被縮小了
 ,user-scalable=no //防止用戶手動縮放
">

設置結束以後，如何具體開發？

方法1.寬度儘可能自適應，而不要用定寬。

方法2.用媒體查詢 @media

@media screen and (max-width: 320px) {
  //最大寬度爲320px，即視窗寬度小於等於320px
  div{..}
  .class-name{...}
}

@media screen and (min-width: 320px) and (max-width: 769px){
  //最小寬度爲320px，最大寬度爲769px，即視窗寬度大於320px，小於769px
}

頁面優化

目的

減小卡頓
利於SEO
便於代碼維護

方法

1. 減小頁面請求

減小css文件請求

（1）多個css文件合併成一個
（2）少許css樣式內聯
（3）避免用import的方式引入css文件，由於每一個import語句都會產生一個css請求，而且是同步的請求。

2.減小資源文件大小

（1）減小圖片大小
選擇合適的圖片格式，小尺寸、半透明的用png，大尺寸、色彩絢麗用jpg（由於jpg會對圖片進行壓縮）
壓縮圖片

（2）css值縮寫
margin，padding，border，font，border-radius等屬性

（3）省略值爲0 的單位

margin: 0 10px;
line-height: .5;
background-position: 50% 0;

（4）顏色值最短表示

red
rgb(0,0,0)
rgba(0,0,0,0)
#000000
#000

（5）css選擇器合併

.left, .right {...}

（6）文件壓縮
用工具對文件進行自動壓縮，去掉空格。

3.提高頁面性能

加載順序

css一般放在head中，而js一般放在body底部，由於js會阻礙其餘資源加載。

減小標籤數量。

選擇器長度

body .menu ul li a { ... } //太長了
.menu a { ... } //更好

避免耗性能屬性

好比：

expression
filter
border-radius
box-shadow
gradients

給圖片設置固定寬高，而且圖片實際寬高與設置寬高相同，不然瀏覽器會迴流設置屢次寬高

全部表現用css實現

4.經過規範提升代碼可讀性，可維護性

（1）規範：縮進，變量名等
（2）語義化：除了標籤，css、id名最好也儘可能有意義
（3）儘可能避免Hack，必定要用也要統一的標識，好比IE7用*
（4）模塊化：相關聯的結構作成一個個模塊，複用性更強
（5）添加註釋

規範與模塊化

規範

1.註釋的文字兩側需加空格，防止因編碼問題致使註釋失效

2.爲避免命名污染，能夠給class加前綴，好比：

g- 佈局命名
m- 模塊命名

3.語義化命名

//結構化命名
top { ... }

//改用語義化命名
nav { ... }

4.屬性的書寫順序

模塊化

什麼是模塊化

一系列相關聯的結構組成的總體

帶有必定的語義，而非表現

好比，翻頁器（或叫分頁器paging）、輪播圖。

怎麼作？

爲模塊分類命名（如.m-, .md-）

以一個主選擇器開頭（模塊根節點）

使用以主選擇器開頭的後代選擇器（模塊子節點）

<div class="m-nav">
  <ul>
    <li class="z-crt"><a>連接</a></li>
    <li><a>連接</a></li>
  </ul>
</div>

//根節點
.m-nav { ... }
//子節點
.m-nav ul{ ... }
.m-nav li{ ... }
.m-nav a{ ... }
.m-nav .z-crt a{ ... }/* 交互狀態變化 */

如有一個模塊只是比上述模塊多了一個按鈕，其他部分徹底相同，怎麼辦？

怎樣擴展？

爲根節點加一個class就行了，這裏咱們加一個 m-nav-1。

<div class="m-nav m-nav-1">
  <ul>
    <li class="z-crt"><a>連接</a></li>
    <li><a>連接</a></li>
  </ul>
  <a class="btn">我是新加的a標籤</a>
</div>

//變化的部分在 .m-nav-1 這個新class中寫
.m-nav-1 { ... }
.m-nav-1 a{ ... }
.m-nav-1 .btn{ ... }

網易的規範和代碼庫

規範頁：包含了CSS規範、HTML規範和工程師規範

代碼庫：包含了經常使用的佈局方式、常見模塊和元件的實現以及一些bug、技巧等

——————
教是最好的學。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

頁面架構HTML+CSS ヾ(o◕∀◕)ﾉ 經常使用居中&多列布局

CSS Reset

1.做用

2.特別注意

3.table合併邊框間距

4.一個並不完整也並不通用的reset.css樣例

佈局解決方案

居中佈局

1.水平居中

方法一：flex + justify-content

方法二：absolute + transform

方法三：inline-block + text-align

方法四：table + margin

2.垂直居中

方法一：flex+ align-items

方法二：absolute + transform

方法三：table-cell + vertical-align

3.水平垂直居中

方法一：flex + justify-content + align-items

方法二： absolute + transform

方法三： absolute + margin: auto; （經常使用）

方法四：[inline-block + text-align] + [table-cell + vertical-align]

多列布局

1.一列定寬 + 一列自適應

方法1：float + margin

方法2：（對方法一的改進）float + margin + (fix)

方法3：float + overflow

方法4：table

方法5：flex

2.多列定寬 + 一列自適應

3.不定寬 + 一列自適應

4.兩列不定寬 + 一列自適應

5.等分佈局

6.一列定寬+一列自適應（當其中較高的一列高度變化，另外一列同步變化）

7.全等四宮格

全屏佈局

1.定寬（px）+自適應

2.百分比定寬（%）+自適應

3.自適應+自適應

響應式

想要達到的效果

如今的狀況

因此爲防止讓頁面縮小，在移動設備中，咱們會作以下設置

設置結束以後，如何具體開發？

方法1.寬度儘可能自適應，而不要用定寬。

方法2.用媒體查詢 @media

頁面優化

目的

方法

1. 減小頁面請求

減小css文件請求

2.減小資源文件大小

3.提高頁面性能

加載順序

減小標籤數量。

選擇器長度

避免耗性能屬性

給圖片設置固定寬高，而且圖片實際寬高與設置寬高相同，不然瀏覽器會迴流設置屢次寬高

全部表現用css實現

4.經過規範提升代碼可讀性，可維護性

規範與模塊化

規範

模塊化

什麼是模塊化

怎麼作？

怎樣擴展？

網易的規範和代碼庫

頁面架構HTML+CSS ヾ(o◕∀◕)ﾉ經常使用居中&多列布局