前端整理——css部分

chaosx110 發布于2019-04-23 11:56 / 1087人閱讀

摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內容不被遮擋，直接在中間內部創建子用于放置內容，在該子里用和為左右兩欄留出位置。

（1）盒模型（普通盒模型、怪異盒模型）

1、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型
2、IE盒模型和W3C盒模型
1）IE盒模型是怪異模式下的盒模型，W3C盒模型是標準模式下的盒模型；
2）IE盒模型的width/height包含了content的width/heigh+padding+border
W3C盒模型的width/height只是content的width/height
3、CSS3中的box-sizing
不同的人有不同的習慣，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（該屬性的值從父元素繼承）

（2）如何讓元素水平居中

1、絕對定位實現水平垂直居中：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

注意：
1>對父元素要使用 position: relative; 對子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。
2>如果只要垂直居中，可以不寫right: 0；left: 0;
margin: auto; 可以換成 margin-top: auto; margin-bottom: auto;
3>如果只需要水平居中，top: 0; bottom: 0; 可以省略不寫
margin: auto; 可以換成 margin-rihgt: auto; margin-left: auto; 。

2、確定高度的塊級元素居中：

position：absolute;
top:50%;
margin-top:(自身高度的值的一半的負值)

3、對不定高的div實現垂直居中
a、利用css3的彈性布局實現
在父元素的css樣式中加入以下代碼：

display：flex；
justify-center:center;
align-items：center；

b、利用平移實現
在子組件中加入以下代碼：

position：relative：
left:50%；
top:50%;
transform:translate(-50%,-50%);
-weikit-transform: translate(-50%,-50%);

4、一段文本、一張圖片水平居中
text-content:center;
圖片是行內元素，在 ie, edge, chrome, firefox, opera 中對于 img 的默認顯示方式是： display: inline;
5）塊級元素水平居中，使用margin：auto；
6）單行文本垂直居中，讓height和line-height相等
注意：當box-sizing:content-box時，line-height和height相等；
當box-sizing:border-box時，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四個值，也就是說line-height等于content的有效高度。

（3）浮動&清浮動

1、是什么浮動？
浮動的元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。
2、為什么要清浮動？
浮動會導致父元素的高度塌陷。當父元素不設置高度，由內容撐開時，浮動元素脫離了文檔流，并不占據文檔流的位置，父元素就不能被撐開，也就沒有了高度。所以需要通過清浮動來解決父元素高度坍塌的問題。
3、清浮動的方式：
1）clear清除浮動
在浮動元素后面添加一個空的div，設置clear屬性為both。
clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，原理在被清除浮動的元素上面或者下面添加足夠的清除空間。
2）clear清除浮動的最佳實踐：利用偽類元素來清除有浮動的標簽
IE8和非ie瀏覽器才支持：after，相當于在該元素后面添加了一個空元素，利用clear：both清除浮動。zoom可解決ie6、ie7的浮動問題。

3）父級div定義overflow：hidden
原理：必須要定義width或zoom：1，同時不能定義高，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

（4）圣杯布局和雙飛翼布局

圣杯布局和雙飛翼布局都是三欄布局，兩邊的盒子寬度固定，中間盒子寬度自適應。
1)圣杯布局
寫結構時優先寫中間盒子，因為中間盒子優先被渲染，設置其自適應，寬度設為100%。中間欄放在文檔流前面以優先渲染。
第一步：設置center寬度為100%,然后left和right設置固定寬度。然后三個div都左浮動。

第二步：設置最外層包裹box： padding-left:200px;padding-right:250px;

第三步：設置left： margin-left: -100%; 設置right：margin-left: -250px;

第四步：需要將left和right通過相對定位移動到兩側

注意：最好給body加一個最小寬度min-width
圣杯布局有個問題，就是當面板的main部分比兩個子面板寬度小的時候，布局就會亂掉。


    
    Title

2）雙飛翼布局



    
        center
    
    left
    right

https://www.zhihu.com/question/21504052/answer/50053054

圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局。
不同在于解決”中間欄div內容不被遮擋“問題的思路不一樣：
圣杯布局，為了中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。
雙飛翼布局，為了中間div內容不被遮擋，直接在中間div內部創建子div用于放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（圣杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼布局子div里用margin-left和margin-right共2個屬性，6-2=4），個人感覺比圣杯布局思路更直接和簡潔一點。
簡單說起來就是”雙飛翼布局比圣杯布局多創建了一個div，但不用相對布局了“。

GPU云服務器云服務器前端css css前端前端css框架浮動-前端-css

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

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

前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
前端開發-從入門到Offer - 收藏集 - 掘金

摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。工欲善其事必先利其器-前端實習簡歷篇 - 掘金有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助。現在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...

sf_wangchong 2019-08-20 16:10 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0