【css世界】學習筆記

大綱

• 【css世界】的一些筆記（2020-05-10）
• css世界的全部demo
• 大佬寫的這本書，我的而言，對我受益不淺
• 歡迎灌水吐槽o(∩_∩)o 哈哈

流、元素與基本尺寸

標籤分類

內聯元素： display:inline;

內聯塊元素： display:inline-block;

塊元素： display:block;

一個水平流上只能單獨顯示一個元素，多個塊元素則換行展現

width :auto 特性，

1. 充分利用可用空間，寬度默認100%

2. 收縮與包裹

3. 收縮到最小

4. 超出容器限制

height的計算方式

絕對定位元素到百分比計算和非絕對定位元素是有區別的：區別在於絕對定位到寬高百分比是相對於paddingbox的，也就是說會把padding大小計算在內，可是，非絕對定位元素則是相對於conten box計算的

https://demo.cssworld.cn/3/2-11.php

max-width 和 width: 200px !important 那個大？

答案是 max-width 最大， 不論是你寫在行間仍是 使用！important語法

實例：

max-height與任意高度元素滑動展開收起效果實例頁面

https://demo.cssworld.cn/3/3-2.php

沒有使用任何js，徹底使用css ，大佬就是叼哈

流動性

所謂流動性，並非寬度100%顯示，而是一種margin/border/padding 和conten內容區域自動分配空間到機制，若是設置width爲定值，流動性丟失

例子：

內部尺寸與流動特性

包裹性

表現：按鈕 文字 越多 寬度 越 寬（ 內部 尺寸 特性），但如 果 文字 足夠 多， 則 會在 容器 的 寬度 處 自動 換行（ 自 適應 特性）。

具備包裹性的css:

display:inline-block;

float：left | right;

position: absolute;

例1:

< button> 標籤 按鈕 纔會 自動 換行，< input> 標籤 按鈕， 默認 white- space: pre， 是 不會 換行 的， 須要 將 pre 值 重置 爲 默認 的 normal。

線上地址: http:// demo. cssworld. cn/ 3/ 2- 4. php

實際示例 ：

請看 這個 需求： 頁面 某個 模塊 的 文字 內容 是 動態 的， 可能 是 幾個 字， 也可能 是一 句話。 而後， 但願 文字 少的 時候 居中 顯示， 文字 超過 一行 的 時候 居 左 顯示。 該 如何 實現？

核心代碼：

.box {text- align: center; } .content { 　 display: inline- block; 　 text- align: left; }

預覽地址： http://demo.cssworld.cn/3/2-5.php

默認文字文字不滿一行的時候居中

文字超過一行的時候，靠左或者靠右看你怎麼設置了

首選最小寬度

https://demo.cssworld.cn/3/2-6.php

最大寬度

https://demo.cssworld.cn/3/2-7.php 我的仍是喜歡用flex，flex大法好哈

內聯盒模型

幽靈空白節點

是內聯元素（display:inline) ，至關於他前面就有一個幽靈空白節點

在html5文檔聲明中，每個內聯元素到前面都有一個空白節點，不佔據任何寬度，永遠透明。

例子：

高度不爲0，證實幽靈空白節點存在

盒尺寸四你們族

可替換元素

定義： 經過修改某個屬性值呈現得內容就能夠被替換得元素就稱爲 【替換元素】

特性：

1. 內容的外觀不受頁面上的css影響。用專業的話講就是在樣式改變在css做用域以外。

如何更改替換元素自己的外觀？

須要相似appearance屬性，或者瀏覽器自身暴露的一些樣式接口

例如： ：：-ms-check{} 能夠更換高版本IE瀏覽器下單複選框得內間距、背景色等楊思，可是直接input[type='checkbox']{} 卻沒法更改內間距、背景色等樣式。

2. 有本身的尺寸。

在web中，不少替換元素在沒有明確尺寸的前提下，其默認的尺寸（不包括邊框），是300像素 x 150像素，如video iframe 或者canvas等，也有少部分替換元素爲0像素，如img標籤，而表單元素得替換元素的尺寸則和瀏覽器有關，沒有明顯得規律

3. 在不少css屬性上游本身的一套表現規則。

好比具備表明性的就是vertical-align屬性，對於替換元素和非替換元素，vertical-align屬性值得表現是不同。好比說vertical-align的默認值是baseline，在替換元素身上表現全無！！

4. 可替換元素不能使用僞類，有兼容性問題

https://demo.cssworld.cn/4/1-4.php

例以下面的這些標籤：

img

input

textarea

object

video

iframe

select

深刻理解 content

1. 生成圖片

https://demo.cssworld.cn/4/1-5.php

content 生成到圖片，不能被選中哦，content技術生成到元素就是可替換元素

2. 生成loading 動態點點點

https://demo.cssworld.cn/4/1-9.php

3. content attr的使用

content attr屬性值內容生成，意思就是能夠經過 css僞類的conten 的attr特性 使用自定義屬性的值

css: div:after{ content:attr(alt) } html: <div alt="二狗子"></div>

div:after{ content:attr(data-src) } html: <div data-src="一張圖片的地址"></div>

4. conten 計數器

https://demo.cssworld.cn/4/1-11.php

5. CSS計數器counters的string參數與嵌套實例頁面

https://demo.cssworld.cn/4/1-18.php

input 和button按鈕的區別

input的white-space值上pre，文字足夠多的的時候，不會自動換行，

button的white-space的值上normal，文字足夠多的時候，自動換行

padding

box-sizing 失效

設置了box-sizing:border-box,通常狀況下，尺寸沒有變化，若是padding的值足夠大，那麼width也無能爲力了。

例如： .box｛ width:80px; padding:20px 60px; box-sizing:border-box;｝，此時width無效，最終寬度爲120px，而裏面的內容表現爲 首選最小寬度

屬性值

不支持負數，

支持百分比，

內聯元素的文字會斷行

百分比計算規則：padding的百分比值不管是水平的仍是垂直的方向，都是相對於寬度設計來計算的。

運用實例：https://demo.cssworld.cn/4/2-3.php

padding與圖形生成實例頁面 https://demo.cssworld.cn/4/2-4.php

margin

屬性值

支持負值

支持百分比

inline 元素 margin 的垂直方向不生效

實例：

元素默認值

當前元素添加margin負值，寬高不受影響

給子元素賦值

給兒子元素添加負值，父元素寬度不變，子元素寬度有變化

利用上面的特性能夠作：

自適應佈局：https://demo.cssworld.cn/4/3-1.php

兩端對齊佈局

margin合併

通常發生在垂直方向

場景

1. 相鄰兄弟元素margin合併

p{margin:1em 0;}

2. 父級和第一個/最後一個子元素 margin合併

https://demo.cssworld.cn/4/3-3.php

計算規則

正正取大值

負負取最負值

如何阻止margin合併

阻止margin-top合併

1. 父元素設置爲塊狀格式化上下文(BFC)元素(好比說：overflow:hidden)

2. 父元素設置border-top值

3. 父元素設置padding-top

4. 父元素和第一個子元素之間添加內聯元素進行分隔

阻止margin-bottom合併

1. 父元素設置爲塊狀格式化上下文元素(好比說：overflow:hidden)

2. 父元素設置border-bottom值

3. 父元素設置padding-bottom

4. 父元素和第一個子元素之間添加內聯元素進行分隔

5. 父元素設置height 、 min-height或max-height

margin auto

填充規則

1. 若是一側定值，一側auto，則auto爲剩餘空間大小

例1

https://demo.cssworld.cn/4/3-4.php

例2

html代碼

展現效果

2. 若是兩側均是auto，則平分剩餘空間

3. margin auto 實現垂直水平居中

html代碼

展現效果，margin auto 居中

border

屬性值

不支持百分比

支持固定數值；好比說1px

border-width 關鍵詞

thin：薄薄的，至關於1px

medium(默認值）：薄厚均勻，等同於3px

thick: 厚厚到，等同於4px

爲啥medium 是默認值，由於border-style:double 至少3px纔有效果

border-style 關鍵詞

dashed: 虛線

dotted : 小圓點虛線

solid: 實線

double: 雙線邊框

border-color

border-color

默認顏色就是 color 的值，相似特性到css屬性還有outline box-shadow text-shadow等

實際運用

https://demo.cssworld.cn/4/4-1.php

只需該一個地方，就能夠實現相似的效果，

實際運用

三條扛

增長點擊區域

三角形圖形繪製

多邊形

border等高佈局

https://demo.cssworld.cn/4/4-4.php

內聯元素與流

字母x就是基線vertical-align: baseline;到位置

ex, 不受字體和字號影響到單位

https://demo.cssworld.cn/5/1-1.php

line-height

屬性值

不支持負數

支持百分比

支持固定數：line-height:1.2

支持px： line-height:10px

不能影響替換元素

line-height:normal 和設置到字體有關係，不一樣字體可能不同哦

不管內聯元素如何設置line-height,最終都是誰最大，誰生效

line-height 決定內聯元素的大小

https://demo.cssworld.cn/5/2-1.php

行距等於 line-height - font-size

https://demo.cssworld.cn/5/2-2.php

line-height 讓單行文字近似到垂直居中實現：

很明顯，只是近似到垂直居中

line-height 讓多行文字近似到垂直居中實現：

https://demo.cssworld.cn/5/2-4.php

沒有vertical-align：middle 的效果

line-height 的繼承性

https://demo.cssworld.cn/5/2-5.php

vertical-align

生效的條件

css屬性是以下的都支持

display：inline

display:inline-block

display:inline-table

display:table-cell

以下標籤也支持

img

button

input等替換元素

td

其餘塊元素(display:block)不支持！！！

屬性值

線類

baseline(默認值）

top

middle

bottom

文本類

text-top

text-bottom

上標下標類

sub

super

數值百分比類

-20px

20px

2em

20%

實例

使用vertical-align數值實現文字和小圖標對齊實例頁面

https://demo.cssworld.cn/5/3-2.php

使用vertical-align數值實現文字和小圖標對齊實例頁面

https://demo.cssworld.cn/5/3-3.php

table-cell與vertical-align屬性關係示意實例頁面

https://demo.cssworld.cn/5/3-4.php

圖片底部留有間隙的問題實例頁面

https://demo.cssworld.cn/5/3-5.php

計算規則

vertical-align 百分比值是相對於line-height來計算的

margin 和padding到百分比值是相對於寬度計算的

line-height的百分比值是相對於font-size計算的

兩端對齊列表的間隙問題實例頁面

https://demo.cssworld.cn/5/3-6.php

數學公式

實現水平垂直居中 這種佈局仍是很不錯的

https://demo.cssworld.cn/5/3-10.php

css

html

效果

流的破壞與保護

float

特性

包裹性

自適應

塊狀化並格式化上下文

塊狀化就是元素一旦float的屬性不爲none，則display的值就是block 或者table

破壞文檔流

沒有任何margin合併

屬性值

文字環繞

https://demo.cssworld.cn/6/1-1.php

利用float破壞流特性的兩欄自適應佈局實例頁面

https://demo.cssworld.cn/6/1-2.php

clear

屬性值

none 默認值

left 左側扛浮動

right 右側扛浮動

both 兩側扛浮動

生效條件

只有塊元素才生效，這個就是爲啥：：after等僞類元素要清除浮動到時候都要加上display:block 的緣由，由於僞類默認是內聯元素

clear：both 並非清除浮動，而是讓本身不和浮動元素在一行顯示。不是完全的清除浮動，因此他後面到元素到浮動特性還保留

1. 若是clear:both 元素是float元素，則margin-top負值即便設成-9999px，也不見任何效果

2. clear:both 後面到元素依舊可能會發生文字環繞到的現象。

https://demo.cssworld.cn/6/2-1.php

塊格式化上下文（Block Formatting Context，BFC）

如何觸發BFC

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

做用

1. 治療 margin 合併

2. 清除浮動

3. 流體佈局

overflow

屬性值

visible 默認值

hidden 內容會被修剪，而且其他內容是不可見的

scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容

auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容

inherit 規定應該從父元素繼承 overflow 屬性的值

永遠不可能實現一個方向溢出剪切或滾動，領一個方向內容溢出顯示的效果

可是scroll auto hidden 三個屬性值能夠共存

滾動條不晃動的方法

URL錨鏈錨點定位和overflow的選項卡切換效果實例頁面 學習使用就行，體驗不是很好

https://demo.cssworld.cn/6/4-2.php

focus錨點定位和overflow的選項卡切換效果實例頁面

https://demo.cssworld.cn/6/4-3.php

absolute

屬性

不能和float共存 float失效

能夠不適用display：inline-block,屢次一舉，都是bfc

absolute計算規則

1. 根元素，即html

2. 對於其餘元素，若是該元素到position是relative或者static，則包含塊由其最近的塊容器祖先盒到contentx box邊界造成

3. 若是元素position：fixed,則包含塊是初始包含塊，即html

4. 若是元素position：absolute，則包含塊由最近到position不爲static的祖先元素創建

無依賴定位實例，須要熟練記住的

實例1

html代碼

效果，若是文檔流不少，自動出現滾動條，定位不受影響，好比demo元素出現滾動條就不行了， 具體看實例2：

實例2

html

效果

解決方法：

搞定

無依賴絕對定位」與導航圖標定位實例頁面

https://demo.cssworld.cn/6/5-5.php

無依賴絕對定位」與超越常規佈局的佈局實例頁面

https://demo.cssworld.cn/6/5-6.php

「無依賴絕對定位」與下拉列表定位實例頁面

https://demo.cssworld.cn/6/5-7.php

text-align實現的右外側定位效果實例頁面

https://demo.cssworld.cn/6/5-10.php

absolute 與 overflow

定義:

overflow 對 absolute 元素 的 剪裁 規則 用 一句話 表述 就是： 絕對 定位 元素 不 老是 被 父 級 overflow 屬性 剪裁， 尤爲 當 overflow 在 絕對 定位 元素 及其 包含 塊 之間 的 時候。

上面 這句 話是 官方 文檔 的 直譯， 彷佛 仍是 有些 拗口， 咱們 再 換 一種 方法 表述 就是： 若是 overflow 不是 定位 元素， 同時 絕對 定位 元素 和 overflow 容器 之間 也沒 有 定位 元素，

不會被裁剪的狀況： overflow：hidden

< div > 　 < img src=" 1. jpg" > </ div>

< div > 　< div > 　 　 < img src=" 1. jpg" > 　</ div>

不會被裁剪的狀況 overflow：hidden

< div > 　 < img src=" 1. jpg" > 　 <!-- 剪裁 --> </ div>

< div > 　 < div > < img src=" 1. jpg" > 　 <!-- 剪裁 --> 　 </ div> </ div>

若是 overflow 的 屬性 值 不是 hidden 而是 auto 或者 scroll， 即便 絕對 定位 元素 高 寬 比 overflow 元素 高 寬 還要 大， 也都 不會 出現 滾動 條。

< div > 　 < div > 　 　 < img src=" 1. jpg" > 　 <!-- 剪裁 --> 　 </ div> </ div>

< div class=" box"> 　 < img src=" 1. jpg"> </ div>

.box { 　 width: 300px; height: 100px; 　 background- color: #f0f3f9; 　 overflow: auto; } .box > img { 　 width: 256px; height: 192px; 　 position: absolute; }

實例：

https://demo.cssworld.cn/6/5-11.php

absolute 與垂直水平居中

不固定寬高 使用transform：translate

html代碼

效果

固定寬高 使用margin:auto

html代碼

效果

模擬fixed定位

relative

計算規則

相對定位元素到left/top/right/bottom 的百分比值是相對於包含塊計算到，而不是自身。注意：雖然定位位移是相對於自身，可是百分比的計算值不是哦。

relative的top/bottom和left/right 同時使用的時候，其表現和absolute不一樣，他們只有一個方向上的屬性生效，計算規則以下

默認的文檔流是從上而下、從左往右，所以，top/bottom 同時使用到時候，bottom被幹掉，left/right同時存在的時候，rigt被幹掉

relative定位和margin定位對比實例的區別

實現的效果都同樣

區別以下

fixed 與背景鎖定

1. 頁面滾動條不是從根元素產生，而是普通元素

2.若是是桌面端，讓根元素加上overflow:hidden

3.若是是移動端，阻止touchmove事件的默認行爲便可阻止滾動

clip能夠裁剪 absolute 和fixed

transform 對屬性的影響

overflow

1. transform對overflow 元素自身裁剪（IE9以上裁剪 chrome和opera不裁剪）

2. transform對overflow 子元素裁剪（IE9以上裁剪 chrome和opera也裁剪）

fixed

會致使fixed固定失效

css世界到層疊規則

z-index

定義：只有和定位元素（position不爲static的元素）在一塊兒到時候，才 有做用，理論上數值越大，層級越高

z-index 能夠爲負值

層疊上下文

英文：stacking content, 是一個三維的概念，若是一個元素有層疊上下文，那麼這個元素在z軸上就"高人一等"

層疊水平

英文：stacking level,決定了同一個層疊上下文中元素在z軸上的顯示順序。

css2.1的層疊規則

css3層疊上下文

1. 元素爲flex佈局元素（父元素display:flex | inline-flex）,同時z-index值不是auto

2. 元素的opacity值不是1

3. 元素的transform值不是none

4. 元素的min-blend-mode值不是normal

5. 元素的filter值不是none

6. 元素到isolation值是isolate

7. 元素的will-change屬性值爲上面2-6的任意一個

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

強大的文本處理能力

隱藏元素的新方法

font-size:0

text-indent:-999px 有隱藏風險

word-break 和word-wrap 的區別

https://demo.cssworld.cn/8/6-5.php

text-transform

仍是頗有用的，能夠自動把輸入的值轉換成大寫 或者小寫

隱藏元素的background-image 到底加不加載

1. 若是隱藏元素同時又設置來background-image, 則圖片依然加載

2. 若是父元素設置了display:none ，那就不加載

元素的顯示與隱藏

visibility

繼承性：父元素設置來visibility：hidden, 子元素也會看不見，若是子元素設置來visibility：visible,則子元素顯示，這個和display不同

實例：

https://demo.cssworld.cn/10/2-3.php

outline

放大鏡

https://demo.cssworld.cn/11/1-1.php

自動填滿剩餘空間

https://demo.cssworld.cn/11/1-2.php

html代碼

效果