CSS學習筆記

時間  2019-11-10
標籤 css 學習 筆記 欄目 CSS 简体版
原文   原文鏈接

在網上聽到的CSS大牛的課，感受頗有用，因而就作了筆記，但願與你們一塊兒分享，課程是張鑫旭在慕課網講的CSS。css

Line-height

定義：

  • 行高，兩行文字基線之間的距離html

  • 基線是*線定義的根本css3

  • 一兩行的定義已經據欸的那個了一行的表現web

line-height與行內盒子模型

  1. "內容區域"(content area)是一種圍繞文字看不見的盒子，內容區域的大小與font-size相關，能夠理解爲選中文字時的背景chrome

  2. 「內聯盒子」（inline-boxes），不會讓內容成塊兒嚇死你hi，而是排成一行，若是外部喊inline水平的標籤（span、a、em等），屬於內斂盒子，只有文字屬於匿名內聯盒子；瀏覽器

  3. 「行框盒子」(line boxes),每一行就是一個「行框盒子」，每一個「行框盒子」又是由一個一個「內聯盒子」組成ide

  4. 「包含盒子」（containing boxes)，由一啊很難過一行的行框盒子組成；佈局

line-height的高度機理

  • 內聯元素的高度由行高決定字體

    須要知道的兩點

  1. 行高因爲其繼承性，影響無處不在，單行文本也不例外。flex

  2. 高度的表現不是行高，而是內容區域和行間距。

  • 內容區域（content area)高度+行間距(vertical spacing)=行高(line-height)

  1. 內容區域高度只與字號以及字體有關,與line-height沒有任何關係。

  2. 在宋體（simsun）字體下，內容區域高度等於文字大小值。

  • simsun字體下：font-size+行間距=line-height ###總結：行高決定內聯盒子高度；行間距牆頭草，可大可小(能夠是負值)，保證高度正好等同於行高。

  • 多行文本高度就是當行文本高度的累加。

line-height各種屬性值

  • 支持的屬性值normal number length percent inherit

  1. normal默認屬性值，跟着用戶的瀏覽器走，且與元素字體關聯，因爲其不肯定性，一般會進行reset

  2. number 根據當前元素的font-size大小計算。number*font-size

  3. length 具體長度值：1.5em 1.5rem 20px 20pt

  4. percent 相對於設置了該屬性元素的font-size大小計算

  5. inherit 繼承IE8+支持，行高天生就有繼承性，例如文字。input框等元素的默認行該是normal，使用inherit可讓文本可控性更強

    line-height:1.5 150% 1.5em 區別

  • 計算沒有差異

  • 應用元素有差異

  1. 1.5全部可繼承元素根據font-size從新計算行高，繼承給下面的元素

  2. 150% 1.5 em 當前元素根據font-size計算行高，繼承給下面的元素。

    推薦使用數值的

    body 全局數值行高使用經驗

  • 閱讀爲主要的要1.5-1.6

  • 通常網頁開發，匹配20px-方便心算，例如20px/14px=1.42857，爲了chrome瀏覽器不是19px，要向上四捨五入1.4286

行高與圖片的樣式表現

  • 行高不會影響圖片實際佔據的高度

  • 隱匿文本節點:例如圖片後面跟着看不見的文本節點

    消除圖片底部間隙的方法

  1. 圖片塊兒狀化-無基線對齊img{display:block}

  2. 圖片底線對齊img{vertical-align:bottom}

  3. 行高足夠小-基線位置上移.box{line-height:0;} ###小圖片和大文字：基本上高度受行高控制(不要故意鬧事兒，例如vertical:-100,不是IE6瀏覽器，跟着圖片走)

line-height的實際應用

  1. 實現大小不固定的圖pain、多行文字垂直居中

  • 圖片水平垂直居中 IE8+

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}

  • 多行文本水平垂直居中IE8+

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;
text-align:left;vertical-align:middle;max-width:100%}

  • 代替height，避免IE6/IE7下的haslayout
      IE6/7元素設置height會讓元素由haslayout，設置行高就沒有haslayout，元素一旦有了haslayout會衝破父容器，好比說inline-block/float：left的寬度限制,包裹性受到了破壞。

{height:30px;line-height:30px;}

高度是多餘的

vertical-align

vertical-align家族基本認識

  • 支持的屬性值

  1. 線類 baseline，top，middle，bottom

  2. 文本類 text-top，text-bottom

  3. 上標下標類 sub，super

  4. 數值百分比類 20px ，2em，20%,...

  • 共性都帶數字，都支持負值（margin,letter-spacing,word-spacing,vertical-align支持) 行爲表現一致,

  • 在baseline基礎上便宜對應數值的大小,vertical-align的百分比值是相對於行高計算的

  • IE6/7下vertical-align百分比不支持小數

vertical-align起做用前提

  • vertical-align只能用於inline水平以及table-cell元素

    • inline水平：

    1. inline：<img>,<span>,<strong>,<em>,自定義標籤（文字是匿名inline元素)

    2. inline-block:<input>(IE8+),<button>(IE8+)

    • table-cell元素：

      • table-cell：<td>

  • 默認狀態下支持的，圖片，按鈕，文字和單元格

  • display：更改元素的顯示水平

    1. 直接display設置

  • css聲明更改元素的顯示水平

    1. 添加浮動變爲block

    2. 絕對定位變爲block，主要由於脫離文檔流

  • 圖片明明vertical-align：middle,仍是不垂直居中，行高設爲容器高度值，達到近似居中，不是沒有起做用，而是過短不夠居中。

  • table-cell起做用的是其自身，vertical-align：middle設置在父標籤

    個數不定文字內容和圖片垂直居中對其

.test-list>span{display:inline-block;width:210px;vertical-align:middle}
.test-list>img{vertical-align:middle}

vertical-align與line-height的關係

  • 對於內聯元素，vertical-align與line-height雖然看不見,單實際上處處都是

  • 圖片放在<p>內沒法居中

    • 消滅vertical-align->display:block margin:auto

    • 改變對其方式->vertical-align:bottom/middle/top

    • 改變line-height->line-height:0/font-size:0

  • 基本衍生現象:近似垂直居中(IE7+,IE7圖片結尾要折行或空格)vertical-align:middle;line-height:36px

  • inline-block的基線是正常流中最後一個line box的基線,除非這個line box裏面沒有line-boxes或者自己'overflow屬性的計算值而不是visible',這種狀況下基線是margin底邊緣(就是空的或者是有overflow屬性,基線是底邊緣)

vertical-align線性類屬性值深刻理解

  • vertical-align:bottom

    • inline/inline-block元素:元素底部和整行的底部對齊.

    • table-cell元素:單元格底padding邊緣和表格行的底部對其.

    • 總的來講就是子元素和父級下邊緣對其

  • vertical-align:top

  • vertical-align:middle

    • inline/inline-block元素:元素的垂直中心點和父元素基線上1/2x-height處對其

    • table-cell元素:單元個填充盒子相對於外面的表格行居中對齊

vertical-align文本類屬性值深刻理解

  • vertical-align:text-top:盒子的頂部和父級的content area頂部對齊

  • vertical-align:text-bottom:盒子的底部和父級的content area的底部對齊.

  • 兼容性好,表情圖片(或原始尺寸背景圖標)與文字的對齊效果.

vertical-align上標下標類深刻理解(不經常使用)

  • sub和sup,是文字的75%大小

  • 之因此上下標緣由是<sup>->vertical-align:super,<sub>->vertical-align:sub

  • vertical-align:super:提升盒子的基線到父級合適的上標基線位置.

  • vertical-align:sub:下降盒子的基線到父級合適的下基線位置

vertical-align先後不一的行爲表現

  • 都是相對於父級,因此彼此之間沒有影響

  • 混雜屬性:近似垂直居中

<p><img src=""></p>
p{line:height:250px;}
img{vertical-align:middle}
img+span{vertical-align:middle;}

  • vertical-align全部的表現都是與父級相關,和先後沒有關係,只關注當前元素和父級,先後並無直接影響

vertical-align糟糕的兼容性

  • IE6/7

  • IE8+/Chrome/Firefox

vertical-align的實際應用

  1. 小圖標和文字的對齊:vertical-align垂直負值

  2. 不定尺寸圖片或多行文字的垂直居中

    • 主體元素inline-block化;

    • 0寬度100%高度輔助元素;

    • vertical-align:middle;

Realtive

relative和absolute關係

  1. 同源性

  2. 限制做用:限制left/top/right/bottom定位;限制z-index層級;限制在overflow下的囂張氣焰;

  • overflow:hidden可讓超出容器的部分隱藏,當時absolute元素除外,在父級容器加relative可解決,auto或scroll,relative可使其滾動

  • fixed(老三)與relative(老大)同源,relative對於fixed只能限制其層級

  • relative自身也具備定位特性

relative和定位

  1. 相對自身

  2. 無侵入:不會影響其餘元素佈局

    無侵入定位的應用:自定義推拽效果

 瀏覽器本身的推拽API不能定義手型和UI表現,relative能夠實現簡單的拖拽效果;

  • relative定位實用性很是好,能夠用來簡單的調整,用的多會出現問題,不推薦

  • 設置相對立屬性是鬥爭:top>bottom;left>right

relative和層級

  1. 提升層疊上下文

  2. 新建層疊上下文與層級控制:z-index爲具體數值時新建層疊上下文,爲auto時,不會產生層疊上下文,無各類限制,z-index:auto約等於z-index:0 (不包括IE6/7)

relative的最小化影響原則

  • 指的是儘可能下降relative屬性對其餘元素或佈局的潛在影響

  1. 儘可能避免使用relative:absolute定位不依賴於relative;使用margin調節

  2. relative最小化;獨立粗一個div包含子元素

z-index

z-index基礎

  1. z-index屬性指定了元素及其子元素的z順序,z順序能夠決定發生覆蓋的時候,哪一個元素在上面.一般較大z-index值的元素會覆蓋較低的那一個

  2. 屬性值auto(默認值),integer(整數值),inherit

  3. 基本特性:支持負值;支持css3 animation動畫;若是不考慮css3,只有定位元素(relative/absolute/fixed/sticky)的z-index纔有做用,css3中有例外;

z-index與定位元素

  1. z-index只對定位元素有做用position:static(默認)，無z-index效果

  2. 若是定位元素z-index沒有發生嵌套（子元素都是static)：

    • 後來居上的準則；

    • z-index值哪一個大，哪一個上

  3. 若是定位元素z-index發生嵌套（裏面有定位元素，外面也有定位元素)：

    • 祖先優先原則(前提z-index不是auto)

    • z-index：auto當前層疊上下文的生成盒子層疊水平時0.盒子（除非是根元素)不會建立一個新的層疊上下文

CSS中層疊上下文和層疊水平

  1. 層疊上下文（stacking context)是html中的一個三維概念，表示z週上有了能夠高人一等。

    • 頁面元素天生具備層疊上下文，稱之爲"根層疊上下文"

    • z-index值爲數值的定位元素也具備層疊上下文

    • 其餘屬性 2.層疊水平（stacking level):層疊上下文的每一個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序。遵循"後來居上"和"誰大誰上"的層疊準則.

    • 層疊水平和z-index不是一個東西.普通元素也有層疊水平。

  2. 層疊上下文的幾個特性:

    • 層疊上下文能夠嵌套,組成一個分層次的層疊上下文.

    • 每一個層疊上下文和兄弟元素獨立:當進行層疊變換或渲染的時候,只須要考慮後代元素.

    • 每一個層疊上下文是自稱體系的:當父元素內容被層疊後,整個元素被認爲是在父層的層疊順序中.

層疊順序

  • 層疊順序(static order):元素髮生層疊時候有着特定的垂直顯示順序

  • 七階層疊水平

    • 層疊上下文background/border -> 負z-index ->block塊兒狀水平盒子 ->float浮動盒子 ->inline/inline-block水平盒子 -> z-index:auto或當作z-index:0 不依賴z-index的層疊上下文 -> 正z-index

    1. 意義是規範元素層疊時候的呈現規則

    2. 爲何是這個層疊順序:更符合頁面加載的功能和視覺呈現

      • 通常background/border用於裝飾,block,float,用於佈局,inline/inline-block絕大部分是能容,是頁面最重要的實體,所以層疊水平要高.

z-index與層疊上下文

  1. 定位元素默認的z-index:auto能夠當作是z-index:0;

    • 爲什麼定位元素會覆蓋普通元素,定位的元素z-index默認值爲auto能夠看爲z-index爲0;由層疊順序能夠發現,z-index:0層級大於inline/inline-block,圖片是inline元素.

  2. z-index不爲auto的定位元素會建立層疊上下文;(不包括IE7)

    • z-index負值的層疊順序在層疊上下文元素背景之上

    • 一旦容器z-index值爲數值,圖片的層疊上下文元素就變成了容器!

  3. z-index層疊順序的比較止步於父級層疊上下文

其餘CSS屬性與層疊上下文

  1. z-index值部位auto的flex項(父元素display:flex|inline-flex).

  2. 元素的opacity值不是1;

  3. 元素的transform值不是none;

  4. 元素mix-blend-mode值不是normal.

  5. 元素的filter值不是none.

  6. 元素的isolation值是isolate(元素是孤立的不被混合模式混合).

  7. position:fixed聲明(僅用於Chrome等blink/webkit內核瀏覽器)

  8. will-change指定的屬性值爲上面的任意一個(指定瀏覽器與準備GPU渲染)

  9. 元素的-webkit-overflow-scrolling設爲touch.

z-index與其餘CSS屬性層疊上下文

  1. 不支持z-index的層疊上下文元素的層疊順序軍是z-index:auto級別

  2. 依賴z-index的層疊上下文元素的層疊順序取決於z-index值

    • position值爲relative/absolute或fixed

    • display:flex|inline-flex

  3. 層疊上下文致使的有趣現象,圖片上覆蓋文字

z-index相關實踐分享

  1. 最小影響化原則

    • 目的:避免z-index嵌套層疊關係混亂:

    • 緣由:

      1. 元素怒的層疊水平主要由所在的層疊上下文決定;

      2. IE7 z-index:auto也會建立層疊上下文.

    • 作法:

      1. 避免使用定位屬性

      2. 定位屬性從大容器平級分離爲私有小容器

  2. 不犯二準則

    • 目的:避免z-index混亂,一山比一山高樣式的問題:

    • 緣由: 多人協做以及後期維護

    • 作法: 對於非浮層元素,避免設置z-index值,z-index值沒有任何道理須要超過2;

  3. 組件層級計數器

    • 目的:避免浮層組件因z-index被覆蓋的問題:

    • 緣由:

      1. 總會遇到意想不到的高層級元素;

      2. 組件的覆蓋規則具備動態性;

    • 作法: 組件層級計數器方法:經過js獲取body下子元素的最大z-index值,最大值加一,確保;

  4. 可訪問性隱藏

    • 可訪問性隱藏:人看不見,可是輔助設備能夠識別

    • z-index負值元素在層疊上下文的背景之上,其餘元素之下.

    • 應用:label按鈕,z-index:-1,高版本瀏覽器直接display:none;

margin

CSS margin與容器尺寸

  1. css margin能夠改變容器的尺寸

    • margin與可視尺寸

      1. 適用於沒有設定width/height的普通block水平元素(float元素 absolute/fixed元素 inline水平,table-cell元素,均不能夠)

      2. 只適用於水平方向尺寸

      • 應用:一側定寬的自適應佈局

    • margin與佔據尺寸

      • 應用:滾動容器上下留白(padding非chrome瀏覽器下部不能夠,用margin)

CSS margin與百分比單位

  1. margin水平方向百分比/垂直方向百分比

    • 計算規則:

      • 普通元素的百分比margin都是相對於容器的寬度計算的!

      • 絕對定位的百分比margin是相對於第一個定位祖先元素(relative/absolute/fixed)的寬度計算的!

    • 應用實例

      • 寬高2:1自適應矩形

      .box{background-color:olive;overflow:hidden}
.box>div{margin:50;}

  2. 普通元素百分比/絕對定位元素百分比

正確看待CSS的margin重疊

  1. margin重疊的一般特性

    • block水平元素(不包括float和absolute)

    • 不考慮writing-mode,只發生在垂直方向(margin-top/margin-bottom)

  2. margin重疊的3種狀況

    • 相鄰兄弟元素

    • 父級和第一個/最後一個子元素:son設置margin-top:80等同於father設置等贊成father和son同時設置

      • 重疊其餘條件

        1. 父元素非塊兒狀格式化上下文元素

        2. 父元素沒有border-top/bottom設置

        3. 父元素沒有padding-top/bottom值

        4. 父元素和第一個子元素之間沒有inline元素分割 5.對於margin-bottom重疊,額外條件:復原怒視沒有height,min-height,max-height限制.

      • 解決方法

        1. father添加overflow:hidden.

        2. 設置border

        3. 設置padding-top:1px;

        4. son前面/後面加入&nbsp;

        5. 對於margin-bottom,父元素設置高度值

    • 空的block元素

      • 重疊其餘條件

        1. 元素沒有border設置

        2. 元素沒有padding值

        3. 裏面沒有inline元素 4.沒有height,或者min-height

  3. 計算規則

    • 正正取大值

    • 正負值相加

    • 負負最負值

  4. margin重疊的意義

    • 爲了讓傳統的網頁閱讀更舒服 5.善用margin重疊

    .list{margin-top:15px;margin-bottom:15px;}

理解CSS中的margin auto

  1. 做用機制

    • 是爲如何分配剩餘空間設計的

    • 一側是定製,另外一側爲auto,auto爲剩餘大小.

    • 兩側都是auto,是平分剩餘空間

      • 圖片居中要display:block

  2. 沒有設置margin要會自動填充,才能夠居中,例如垂直不設置高度不會自動填充,因此不會自動居中

  3. 垂直居中的實現

    1. 設置writing-mode:vertical-lr,更改流爲垂直方向

    2. 絕對行爲元素的margin:auto居中,IE8+支持,很是實用

CSS margin負值定位

  1. margin負值下的兩段對齊

  2. margin負值下的等高佈局,缺點:要經過父元素overflow:hidden來限制,因爲重定位focus會出問題.

  3. margin負值下的兩欄自適應佈局:DOM順序相符

CSS margin失效情形解析

  1. inline水平元素的垂直margin無效,2個前提:非替換元素(例如不是<img>),正常的書寫模式;

  2. margin重疊

  3. display:table-cell與margin

    • margin能夠用於除了display爲table相關類型(不包括table-caption,table以及inline-table)的全部.甚至也能夠應用於::first-letter display:table-cell/display:table-row等聲明的margin無效!

    • 例外的替換元素們:img,button(chrome下永遠是inline-block)

    • FireFox:table-cell類型inline-block的渲染行爲;

    • IE:table-cell類型也是table-cell的渲染行爲

  4. position:absolute與margin

    • 絕對定位元素非定位方向的margin值"無效",看似無效,實則微妙,容器相對定位,不影響定位,可是影響佔據的空間

    • 絕對定位的margin值一直有效,只是不像普通元素那樣,能夠和兄弟元素插科打諢!

  5. 鞭長莫及致使的margin無效

    • margin是相對於整個容器的,不是浮動的圖片

  6. 內聯特性致使的margin無效

    • margin小到必定值無效,由於圖片是內斂的,受制於默認的vertical-align的限制

瞭解CSS margin-start and margin-end

  • 正常的流向,margin-start等同於margin-left,二者重疊不累加;

  • 若是水平流是從右向左,margin-start等同於margin-right;

  • 在垂直流下(writing-model:vertical-*;),margin-start等同於margin-top;

  • margin-before等同於margin-start

  • margin-after等同於margin-end

  • margin-collapse:決定發生margin重疊時的表現collapse(默認-重疊)discard(取消) separate(分隔)

CSS深刻理解之padding

CSS padding與元素的尺寸

  • padding中規中矩,性格溫婉平和!

  1. 對於block水平元素

    1. padding值暴走,必定會影響尺寸

    2. width非auto,padding影響尺寸; 3.width爲auto或box-sizing爲border-box,同時padding值沒有暴走,不影響尺寸.

  2. 對於inline水平元素

    • 水平padding影響尺寸,垂直padding不影響尺寸,可是會影響背景色(佔據空間)

    • 特性的利用,高度可控的分割線

      • 直接使用字符

      • inline-block控制

      • 使用inline padding

CSS padding負值和百分比值

  1. padding不支持負值

  2. padding百分比均是先對於寬度計算的

    • 輕鬆實現一個正方形 div{padding:50%}

  3. inline元素的百分比值

    • 一樣相對於寬度計算

    • 默認的高度寬度細節有差別

    • padding會斷行

    • inline元素的垂直padding會讓"strut"出現,本質是inline文本的content area區域

CSS 標籤元素的內置padding

  1. ol/ul列表內置padding-left,單位是px,例如chrome瀏覽器是40px,字號若是很小,間距就會很開,字號大,序號會爬到容器外面.通常22-25就能夠

  2. 全部input/textarea輸入框內置padding

  3. 全部button按鈕內置padding

  4. 部分select下拉內置padding,如FireFox IE8+能夠設置padding

  5. 全部瀏覽器radio/checkbox單複選框無內置padding

  6. button按鈕元素的padding最難控制!

    • FireFox -moz-focus-inner{padding:0}使padding消失

    • IE7,文字越多padding越大,overflow:visible

    • padding與高度計算不兼容IE7, FireFox不兼容

    • button按鈕label模擬,button可訪問性隱藏,不是display:none,visible:hidden;好比絕對定位到屏幕外,z-index:-1;

CSS padding與圖形繪製

CSS padding與佈局

  1. 使用百分比單位構建固定比例佈局結構

  2. 配合margin登高佈局

  3. 兩欄自適應佈局

CSS深刻理解之border

border-width不支持百分比

  • border-width不支持百分比

  • 語義和使用場景決定不支持百分比(相似的還有outline,box-shadow,text-shadow)

  • border-width支持關鍵字:thin,medium(默認值),thick(IE7除外,1px 3px 5px)

  • 由於border-style:double至少要3px纔有效果

深刻了解各類border-style類型

  • solid:實線

  • dashed:虛線 Chrome/FireFox 實色寬高3:1,透明1:1,IE都是2:1

  • dotted:點線,

border與color

border與background定位

border與三角等圖形構建

border與透明邊框

border在佈局中的應用

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程