亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【芝士整理】CSS基礎(chǔ)圖譜

iOS122 / 1273人閱讀

摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。

選擇器注意點 屬性選擇器

[attr^=value] - 開頭或全等

[attr$=value] - 結(jié)尾或全等

[attr*=value] - 包含值

[attr~=value] - 字符串包含

選擇器組

A > B - 直接子節(jié)點

A + B - 下一個兄弟節(jié)點

A ~ B - 兄弟節(jié)點

優(yōu)先級

!important > 內(nèi)聯(lián)樣式 > ID選擇器 > 屬性選擇器（類選擇器，屬性選擇器，偽類）> 元素選擇器 （類型選擇器，偽元素）> 繼承 > 用戶代理樣式

通配選擇符(*), 關(guān)系選擇符(+, >, ~, " ") 和 否定偽類(:not()) 對優(yōu)先級沒有影響。（但是，在 :not() 內(nèi)部聲明的選擇器是會影響優(yōu)先級）。

塊元素/行內(nèi)元素/行內(nèi)塊元素

block box - 整塊，獨占一行，可指定寬高

inline box - 包裹內(nèi)容，行內(nèi)流動，文本太長會段落行中斷開（設(shè)置border分行后的顯示效果）；無法指定寬高

inline-block box - 行內(nèi)流動，段落行中不會斷開，成塊顯示，可指定寬高

盒模型

當對一個文檔進行布局的時候，瀏覽器渲染引擎會根據(jù)CSS-Box模型將所有元素表示為一個矩形盒子

盒模型由由外邊距、邊界、內(nèi)邊距、內(nèi)容塊組成

外邊距

盒模型的最外層，常用于元素外布局，垂直方向上易出現(xiàn)元素外邊距重疊的效果，詳細介紹可見CSS深入理解之margin

邊界

背景層延伸到邊界，默認顏色為字體顏色，可用邊界實現(xiàn)一些常用圖形效果，詳細介紹可見CSS深入理解之border

內(nèi)邊距

內(nèi)容區(qū)和邊界之間的距離，背景層滲透，不支持負值，詳細可見CSS深入理解之padding

CSS-Box模型

可通過box-sizing屬性設(shè)置

content-box ，標準盒子模型，width = 內(nèi)容區(qū)寬度

border-box，IE盒子模型，width = 內(nèi)容區(qū)寬度 + 內(nèi)邊框 + 邊框

行內(nèi)框盒模型

行內(nèi)框盒模型描述內(nèi)容在元素中的布局結(jié)構(gòu)

行內(nèi)元素都具有l(wèi)ine-height和vertical-align屬性，這兩個屬性影響內(nèi)容在垂直方向上的分布，詳細介紹可見CSS深入理解之line-height以及CSS深入理解之vertical-align

流布局 
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內(nèi)元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。
浮動

浮動起源于實現(xiàn)文字環(huán)繞效果。

為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生BFC，元素周圍的內(nèi)容轉(zhuǎn)換為inline boxes圍繞元素排列。

從浮動的起因和浮動的副作用來看，浮動不適合用于大范圍的布局，更適合利用其特性實現(xiàn)一些小范圍的流體布局效果。

關(guān)于浮動的具體介紹，可見CSS深入理解之float

定位

相對定位

未脫離文檔流，相對于元素在文檔流中的位置偏移，不會對其他元素的布局產(chǎn)生影響

絕對定位

脫離文檔流，相對于包含塊定位

絕對定位元素具有跟隨性，在未手動定位時，元素根據(jù)原有位置脫離文檔流放置

無固定寬/高，設(shè)定對立定位方向，產(chǎn)生拉伸效果

關(guān)于絕對定位的具體介紹，可以CSS深入理解之a(chǎn)bsolute

固定定位

脫離文檔流，相對于視口

BFC

什么是BFC?

CSS規(guī)范的一個特性，產(chǎn)生BFC特性的元素可以理解為一個封閉獨立的容器，能夠排除一些外界因素的影響

如何產(chǎn)生BFC?

根元素

浮動

絕對定位

display: inline-block/table-cell/table-caption/flex/inline-flex

overflow非visible

BFC的日常應(yīng)用

解決外邊距重疊問題

清除浮動

排除兄弟元素的浮動影響

詳細例子可見10 分鐘理解 BFC 原理

層疊

詳細介紹可見CSS深入理解z-index

度量單位

絕對單位

px

相對單位

em - 相對父元素的字體大?。╢ont-size而不是計算出的字體高度）

rem - 相對于基礎(chǔ)字體大小，支持IE9及以上

vw, vh- 分別是視口寬度的1/100和視口高度的1/100

rem布局使用解說
大體簡述

px太過死板，無法實現(xiàn)等比縮放。

使用em需要嚴格控制各級元素關(guān)系，容易出錯，不易維護

使用rem的好處在于可通過修改根元素字體大小實現(xiàn)等比縮放，根元素字體大小需要用js計算。如果將屏幕寬度分為一百等分，一單位寬度即clientWidth/100，根元素字體大小設(shè)置為該值，50rem即代表50%的寬度。若要方便還原設(shè)計圖尺寸，使用元素的rem值計算公式：元素寬度 / UE圖寬度 * 100

文本 文本溢出處理 介紹幾個屬性

word-break

normal：默認斷行規(guī)則，CJK文本自動換行，非CJK不會自動換行（邊界遇空白符會換行）

break-all：非CJK文本可在任意字符間斷行

keep-all：CJK文本不斷行，非CJK保持默認斷行

word-wrap

overflow-wrap的別名，當行內(nèi)沒有多余的空間容納一個單詞到結(jié)尾，是否允許這個單詞中斷換行

注：word-wrap 屬性原本屬于微軟的一個私有屬性，在 CSS3 現(xiàn)在的文本規(guī)范草案中已經(jīng)被重名為 overflow-wrap 。 word-wrap 現(xiàn)在被當作 overflow-wrap 的 “別名”。 穩(wěn)定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。

normal

break-word

white-space

如何處理空白

| | 換行符 | 空格和制表符 | 文字轉(zhuǎn)行 |
| ---------- | ------ | ------------ | -------- |
| normal | 合并 | 合并 | 轉(zhuǎn)行 |
| nowrap | 合并 | 合并 | 不轉(zhuǎn)行 |
| pre | 保留 | 保留 | 不轉(zhuǎn)行 |
| pre-wrap | 保留 | 保留 | 轉(zhuǎn)行 |
| pre-line | 保留 | 合并 | 轉(zhuǎn)行 |

word-break控制任意字符是否換行，word-wrap控制單詞是否中斷換行，white-space可控制是否換行。如果無換行前提，word-space與word-wrap將失去意義。

https://codepen.io/curlywater...

常見處理

不做轉(zhuǎn)換的情況下，顯示多行文本，并且控制換行

.content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

對溢出文本做省略字符處理

.line-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
行內(nèi)元素水平間隔

行內(nèi)元素之間若有空白符/換行符/制表符摻入，將會產(chǎn)生元素間隔的渲染效果

解決方式一：避免摻入，舊式開發(fā)中注意寫法，現(xiàn)代框架和打包可以避免該問題

解決方式二：容器字體大小設(shè)置為0

html{
    // 字體大小不受設(shè)備終端調(diào)整
　　-webkit-text-size-adjust:none;
}
.container {
    font-size: 0;
}
.container span {
    font-size: 16px;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117035.html

相關(guān)文章

  • 【芝士整理】JS基礎(chǔ)圖譜

    摘要：沒有找到的話，看上級函數(shù)作用域，向上查找到，找到為止。將會在執(zhí)行上下文棧中保留上級作用域的執(zhí)行上下文。若在閉包使用完畢之后不手動解除引用，相關(guān)執(zhí)行上下文將會一直保留于執(zhí)行上下文棧中，占據(jù)內(nèi)存空間，若持續(xù)積累，容易造成內(nèi)存泄漏。 JS有哪些基本數(shù)據(jù)類型呢？ 值類型：undefined, Number, Boolean, String，null 引用類型：Object 值類型存放在棧中 引...

    netScorpion 評論0 收藏0

  • 【芝士整理】HTML的標簽們

    摘要：讀一遍文檔后的個人總結(jié)，重點在于整理語義化標簽的定義規(guī)范，記錄各種部件容易被忽略的特性。結(jié)構(gòu)化，通過標簽先后順序和嵌套語法給樹提供基礎(chǔ)。標簽列表基于個人理解即非官方描述，給標簽劃分為結(jié)構(gòu)化標簽語義化標簽功能化標簽，文檔標簽。 讀一遍MDN文檔后的個人總結(jié)，重點在于整理語義化標簽的定義規(guī)范，記錄各種部件容易被忽略的特性。 關(guān)于HTML HTML的作用可以簡單總結(jié)為結(jié)構(gòu)化、語義化和提供基礎(chǔ)...

    stonezhu 評論0 收藏0

  • 【芝士整理】CSS經(jīng)典布局

    摘要：水平居中行內(nèi)元素定寬塊元素常規(guī)流中浮動塊元素負邊距絕對定位元素負邊距居中絕對居中不定寬塊元素完整垂直居中單行和一致定高塊元素負邊距居中絕對居中不定高塊元素完整水平垂直居中行內(nèi)元素 水平居中 行內(nèi)元素 text-align .parent { text-align: center; } 定寬塊元素 常規(guī)流中 margin: 0 auto; .child { width: ...

    chavesgu 評論0 收藏0

  • 【前端芝士樹】Array的屬性及方法整理（參照MDN）

    摘要：本文主要是我自己對的一些整理，參考自，其中的分類有些不準確之處，還望見諒的基本屬性屬性的一些方法增刪改查基礎(chǔ)功能增刪改查基礎(chǔ)功能增刪改刪除數(shù)組的第一個元素刪除數(shù)組的最后一個元素在數(shù)組的開頭一個或多個元素，在數(shù)組的末尾增加一個或者多個元素數(shù)組 本文主要是我自己對Array的一些整理，參考自MDN，其中的分類有些不準確之處，還望見諒 Array const arr = [1, 2, 3, ...

    MoAir 評論0 收藏0

  • 【芝士整理】瀏覽器存儲

    摘要：維護瀏覽器和服務(wù)器端會話狀態(tài)的一種方式，一般用于保存用戶身份信息。服務(wù)器端生成推送到瀏覽器端，瀏覽器負責保存和維護數(shù)據(jù)。 Cookie 維護瀏覽器和服務(wù)器端會話狀態(tài)的一種方式，一般用于保存用戶身份信息。 服務(wù)器端生成Cookie推送到瀏覽器端，瀏覽器負責保存和維護數(shù)據(jù)。 特點 域名下的所用請求都會帶上Cookie 每條Cookie限制在4KB左右 Cookie在過期時間之前一直有效，若...

    whlong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<