国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

iOS122 / 1214人閱讀

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

選擇器注意點(diǎn) 屬性選擇器

[attr^=value] - 開(kāi)頭或全等

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

[attr*=value] - 包含值

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

選擇器組

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

A + B - 下一個(gè)兄弟節(jié)點(diǎn)

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

優(yōu)先級(jí)

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

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

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

block box - 整塊，獨(dú)占一行，可指定寬高

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

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

盒模型

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

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

外邊距

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

邊界

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

內(nèi)邊距

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

CSS-Box模型

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

content-box ，標(biāo)準(zhǔn)盒子模型，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屬性，這兩個(gè)屬性影響內(nèi)容在垂直方向上的分布，詳細(xì)介紹可見(jiàn)CSS深入理解之line-height以及CSS深入理解之vertical-align

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

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

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

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

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

定位

相對(duì)定位

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

絕對(duì)定位

脫離文檔流，相對(duì)于包含塊定位

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

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

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

固定定位

脫離文檔流，相對(duì)于視口

BFC

什么是BFC?

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

如何產(chǎn)生BFC?

根元素

浮動(dòng)

絕對(duì)定位

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

overflow非visible

BFC的日常應(yīng)用

解決外邊距重疊問(wèn)題

清除浮動(dòng)

排除兄弟元素的浮動(dòng)影響

詳細(xì)例子可見(jiàn)10 分鐘理解 BFC 原理

層疊

詳細(xì)介紹可見(jiàn)CSS深入理解z-index

度量單位

絕對(duì)單位

px

相對(duì)單位

em - 相對(duì)父元素的字體大小（font-size而不是計(jì)算出的字體高度）

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

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

rem布局使用解說(shuō)
大體簡(jiǎn)述

px太過(guò)死板，無(wú)法實(shí)現(xiàn)等比縮放。

使用em需要嚴(yán)格控制各級(jí)元素關(guān)系，容易出錯(cuò)，不易維護(hù)

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

文本 文本溢出處理 介紹幾個(gè)屬性

word-break

normal：默認(rèn)斷行規(guī)則，CJK文本自動(dòng)換行，非CJK不會(huì)自動(dòng)換行（邊界遇空白符會(huì)換行）

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

keep-all：CJK文本不斷行，非CJK保持默認(rèn)斷行

word-wrap

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

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

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可控制是否換行。如果無(wú)換行前提，word-space與word-wrap將失去意義。

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

常見(jiàn)處理

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

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

對(duì)溢出文本做省略字符處理

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

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

解決方式一：避免摻入，舊式開(kāi)發(fā)中注意寫(xiě)法，現(xiàn)代框架和打包可以避免該問(wè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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117035.html

相關(guān)文章

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

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

    netScorpion 評(píng)論0 收藏0

  • 【芝士整理】HTML的標(biāo)簽們

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

    stonezhu 評(píng)論0 收藏0

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

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

    chavesgu 評(píng)論0 收藏0

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

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

    MoAir 評(píng)論0 收藏0

  • 【芝士整理】瀏覽器存儲(chǔ)

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

    whlong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<