如何把控css的方向感

時間 2019-11-06

標籤如何 css 方向感欄目 CSS 简体版

原文原文鏈接

做者博客地址：豬

github: MrXujiang

學習方法推薦

問題學習法：帶着問題去學習，有利於集中注意力，目的明確，這既是有意學習的要求，也是發現學習的必要條件。心理學家把注意分爲無心注意與有意注意兩種。有意注意要求預先有自覺的目的，必要時需通過意志努力，主動地對必定的事物發生注意。它代表人的心理活動的主體性和積極性。問題學習法就是強調有意注意有關解決問題的信息，使學習有了明確的指向性，從而提升學習效率。css

在介紹完問題學習法以後，進入咱們今天的主題，接下來我會介紹css的一些底層的知識和比較詭異的現象，藉此來讓你們對css有更深刻的理解。html

一.css尺寸

1.首選最小寬度–實現複雜圖形效果

在css中，圖片和文字的權重遠大於佈局，所以當width:0時表現出來的寬度就是「首選最小寬度」。中文的最小寬度爲每一個漢字的寬度，西方文字取決於連續的英文字符單元。前端

所以，咱們能夠跟據這個它特性，去實現一些複雜的圖形，以下：vue

當鼠標通過時，變成了下面的樣子：

代碼以下：react

.minW{
    display: inline-block;
    width: 0
}

.minW::before {
    content: "love 你 love";
    color: transparent;
    outline: 2px solid #cd0000;
}

.minW:hover::before{
    content: "你 love 我";
    color: transparent;
    outline: 2px solid #cd0000;
}
複製代碼

咱們會發現，當容器寬度設置爲0後，因爲首選寬度的影響，出現了基於文字空間的形狀。jquery

2.2.子元素寬度設爲100%時的奇怪現象原理探究

父元素的寬度 = 圖片寬度 + 文字內容寬度
瀏覽器渲染原理：先下載文檔內容，加載頭部樣式資源，而後按從上到下、自外而內的順序渲染dom內容。本例的現象產生的緣由就是：當渲染到父元素時，子元素的width:100%並無渲染，寬度就是圖片加文字內容的寬度；等渲染到文字這個子元素的時候，父元素的寬度已經固定，此時的width:100%就是以固定好的父元素的寬度，寬度不夠只能溢出。webpack

.box{
    display: inline-block;
    white-space: nowrap;
}
    .text{
    display: inline-block;
    width: 100%;
}
複製代碼

理論上父元素寬度因該是子元素寬度之和，可是卻出現了上圖的現象，緣由歸根就在於瀏覽器渲染的順序：自外而內，這點十分重要。css3

3.如何讓元素支持height:100%效果

知識點：絕對定位的寬高百分比是基於padding-box的，而非絕對定位的寬高百分比是基於content-boxgit

方法以下：github

* 1.設置顯示的高度值
* 2.使用絕對定位
複製代碼

4.任意高度元素的展開收起動畫(max-height/min-height)

1.min-height/min-width的初始尺寸爲auto, max-height/max-width的初始尺寸爲none

2.min-height/min-width的優先級高於max-width/max-height

要想實現如上圖所示的展開收起動畫，就可使用max-height/min-height：

.nav > .sub-nav{
    max-height: 0;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
    max-height: 400px;
}
複製代碼

二.內聯元素深刻探究

常見的內聯元素有：display設置爲inline,inline-block,inline-table的元素內聯盒模型:

內容區域：能夠理解爲文本選中的背景色區域(重點)
內聯盒子：內聯標籤或者純文本
行框盒子：由內聯盒子組成的一行，每一行就是一個行框盒子
包含盒子：由行框盒子組成的盒子幽靈空白節點：在HTML5文檔聲明中，內聯元素的解析和渲染表現就像每一個行框盒子的前面有一個空白節點同樣。以下案例所示：

三.深刻理解content

1.在web中，不少替換元素在沒有明確尺寸設定的狀況下，其默認的尺寸（不包含邊框）爲300*150，如video,iframe,canvas等，少數爲0，如img,而表單元素的替換尺寸和瀏覽器自身有關。

2.對於img元素，若是有css尺寸，則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)

3.當圖片的src屬性缺省時，圖片不會有任何請求，是最高效的實現方式，以下展現的是使用此方式的圖片佔位代碼(對於firefox瀏覽器，src缺省的img是一個普通的內聯元素，寬高設置無效)：

img { visibility: hidden; }
img[src] { visibility: visible; }
複製代碼

content內容生成技術

1.實現換行

::after{
   content: '\A';
   white-space: pre;
}
複製代碼

2.實現正在加載動畫

.dot{
   display: inline-block;
   width: 8em;
   height: 1em;
   line-height: 1;
   text-align: left;
   vertical-align: -.25em;
   overflow: hidden;
}
.dot::after{
   display: block;
   margin-left: 5.2em;
   content: '...\A..\A.';
   white-space: pre-wrap;
   animation: dot 3s infinite step-start both;
}
@keyframes dot{
   33% { transform: translateY(-3em);}
   66% { transform: translateY(-2em);}
   99% { transform: translateY(-1em);}
}
複製代碼

3.屬性值內容生成

<div class="icon" data-tip="江小白"></div>
/* 可使用原生屬性和自定義屬性 */
.icon::after{
    content: attr(data-tip);
}
複製代碼

4.計數器屬性---純css實現技術器效果

.box1{
    counter-reset: count1;
}
.xigua:checked::before{
    content: counter(count1);
    counter-increment: count1;
    position: absolute;
    color: transparent;
}
.box1::after{
    content: counter(count1);
}
</style>
<div class="counter">
    <div class="box1">
        <div>西瓜<input class="xigua" type="checkbox" /></div>
        <div>香蕉<input class="xigua" type="checkbox" /></div>
        <div>蘿蔔<input class="xigua" type="checkbox" /></div>
    </div>
</div>
複製代碼

四.padding深刻研究

1.對於盒模型設置爲box-sizing: border-box的元素，若是padding足夠大，那麼width將失效:

width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;
複製代碼

2.對於內聯元素，padding對視覺層和佈局層都會有影響，若是父元素設置overflow:auto,則內聯子元素的垂直padding可能會使父元素出現滾動條，不然若是父元素不設置設置overflow，只會在垂直方向上發生重疊，不會影響佈局:

/* 父元素設置 */
.pd-2-1{
    overflow: auto;
}
.pd-2-1 > span{
    padding-top: 1em;
    padding-bottom: 1em;
}
複製代碼

3.padding的實際應用（具體實現可自行思考）

1.增長連接或按鈕的點擊區域的大小
2.利用內聯元素的padding實現高度可控的分割線
3.用內聯元素實現瞄點定位距離
複製代碼

4.利用padding百分比值實現等比例縮放圖片效果:

.pd-3{
    padding: 10% 50%;
    position: relative;
}
.pd-3 img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
複製代碼

** 注：內聯元素的垂直padding會讓幽靈空白節點顯現,此時可考慮設置font-size:0

5.padding與圖形繪製

/* 菜單 */
 .icon-menu{
    display: inline-block;
    width: 120px;
    height: 10px;
    padding: 35px 0;
    border-bottom: 10px solid;
    border-top: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}
/* 雙層圓點 */
.icon-dot{
    display: inline-block;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 50%;
    border: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}
複製代碼

五.margin深刻研究

1.使用:nth-type-of(3n)去除子元素尾部margin

.mg-item:nth-of-type(3n){
    margin-right: 0;
}
複製代碼

注：若是容器能夠滾動，在IE和firefox下會忽略padding-bottom的值，chrome則不會，此時能夠經過margin-bottom實現滾動容器的底部留白

其本質區別在於：chrome是子元素超過父元素content box尺寸觸發滾動條顯示，而IE和Firefox瀏覽器是超過padding box尺寸時觸發滾動條顯示

2.margin合併條件

塊級元素，但不包含浮動和絕對定位元素
在默認文檔流下只出如今垂直方向

margin合併的三種場景

相鄰兄弟元素

父級和第一個/最後一個子元素

* 解決方案： 父級設置爲塊級格式化上下文元素
            父元素設置border-top/bottom值
            父元素設置padding-top/bottom值
            父元素設置高度
複製代碼

空塊級元素margin合併

3.margin合併的計算規則

「正正取大值」，」正負值相加」，」負負最負值」

4.深刻理解margin:auto

若是一側定值，一側auto，則auto爲剩餘空間大小
若是兩側均是auto，則平分剩餘空間
觸發margin:auto計算的前提：width或height爲定值時，元素是具備自動填充特性的

/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;
複製代碼

4.絕對定位元素利用margin:auto實現水平垂直居中(兼容到ie8+)

.father{
    position: relative;
}
.child-2{
    position: absolute;
    left: 0; bottom: 0; right: 0; top: 0;
    width: 40px;
    height: 20px;
    margin: auto;
}
複製代碼

*** margin無效情形分析:

display計算值爲inline的非替換元素的垂直margin是無效的

對於內聯替換元素，垂直margin有效，而且沒有margin合併問題，因此永遠不會發生margin合併

內聯特性致使margin失效：一個容器裏面有一個圖片，圖片設置margin-top,隨着margin-top負值愈來愈大，達到某一具體負值時，圖片將再也不往上偏移

六.字母x與css中的基線

基線字母x的下邊緣

x-height 指字母x的高度

ex：ex指小寫字母x的高度，是相對單位

vertical-align:middle 指的是基線往上1/2 x-height高度

內聯元素設置對齊方式時，是基於最前面的內聯元素的基線，而後根據本身的vertical-align來調整對齊的
複製代碼

七.BFC–塊級格式化上下文

表現: 元素內部的佈局變化不會影響外部的元素.因此不會出現margin合併,可用來清除浮動的影響.
觸發BFC的條件:

根元素

float的值不爲none

overflow的值爲auto,scroll,hidden

display的值爲table-cell,inline-block

position的值不爲static或者relative

若元素具有BFC特性,則無需clear:both去清除浮動
display:table-cell的特性: 寬度設置的再大,也不會超過表格容器的寬度
overflow裁切界限:border box: 一個設置了overflow: hidden的元素同時設置了padding和border,則子元素超出容器寬高設置時,裁切的邊界是border box內邊緣而不是padding box內邊緣
在PC端,默認滾動條均來自,PC端滾動高度能夠用document.documentElement.scrollTop獲取,在移動端用document.body.scrollTop獲取
PC端滾動條寬度約爲17px
讓頁面滾動條不出現晃動的方法:

html{
    /* ie8 */
    overflow-y: scroll;
}
:root{
    overflow-y: auto;
    overflow-x: hidden;
}
:root body{
    position: absolute;
}
body{
    width: 100vw;
    overflow: hidden;
}
複製代碼

9.多行文本溢出顯示省略號的css方法:

.ell-rows-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
複製代碼

8.relative難點解析

relative的定位位移是相對於自身的，若是left/top/right/bottom的值爲百分比單位，則計算尺寸是基於父元素
若是left/right 或top/bottom這些對立屬性同時出現時，只有一個方向的屬性會生效，優先級與文檔流的順序有關，默認的文檔流是自上而下，從左到右的，因此top優先級高於bottom,left優先級高於right
relative的最小化原則

儘可能不使用relative,能夠採用無依賴絕對定位解決某些問題

若是必定要使用relative,則relative務必最小化（最小包含區域） –爲了不層級覆蓋等問題

層疊上下文

定位元素的默認z-index:auto;此時和普通元素同樣，一旦z-index設置爲任意數值，就建立了一個層疊上下文，順序爲：
層疊上下文 < 負z-index < block < float < inline < z-index:auto < 正z-index
css3新屬性的層疊上下文：

1.flex
2.opacity不爲1
3.transform不爲none
4.mix-blend-mode不爲normal
5.filter不爲none
6.isolation是isolate
7.will-change爲上面2-6的任意一個
8.元素-webkit-overflow-scrolling設爲touch
複製代碼

z-index負值在block下面，實際應用：

1. 可訪問性隱藏
2. ie8下的多背景隱藏
複製代碼

好啦，關於css的知識還有不少，有些問題也很難經過表象去解決，這個時候，讓你脫穎而出的就是你對代碼底層更深刻的理解了。