深入解析CSS筆記

可以被繼承的屬性：

與文字相關的屬性

color、font、font分解屬性、line-height、letter-spacing、text-aligh、text-indent、text-transform、white-space、word-spacing

列表屬性

list-style、list-style-type、list-style-position、list-style-image

**邊框屬性

border-collapse、border-spacing

:root
@media only screen and (
min-width
: 800px) }
@media only screen and (
min-width
: 1200px)
}

螢幕越大，字型越大，在開發的時候盡量使用如下規則：

font-size使用rem，border使用絕對值px，其他屬性使用em單位

vw：視口寬度的1/100

vh：視口高度的1/100

vmin：視口寬度和高度較小的一方1/100

vmax：視口寬度和高度較大的一方1/100

使用vw和calc也可以實現達到定義字型大小的目的，並且平滑過渡

:root

css原生已經支援了變數，使用方法

:root

h1

變數也可以被繼承，也可以重寫，在父元素上重寫

目前普遍做法是在專案開始將所有容器盒模型設定為border-box

*,::before,::after :root

之所以沒有直接將所有模型的box-sizing直接設定為border-box是因為可能有一些第三方css庫最開始並沒有注意這個問題，可能會使用預設的content-box進行編寫，使用繼承的形式，可以在遇見這種情況的時候在父容器中設定border-box:content-box即可

頁面外容器居中布局

"container">

使用max-width保證在小容器上佔滿，比如小螢幕上沾滿這個螢幕

:root *,::before,::after .row::after [class*='column-'] .column-1 .column-2 .column-3 .column-4 .column-5 .column-6 .column-7 .column-8 .column-9 .column-10 .column-11 .column-12

flex元素向有餘下空間的一方的反方向設定margin-left(right):auto元素會向該方向移動佔據空間

table
@media screen and (
max-width
: 50em)
/* 將表頭移除 */
thead tr
/* 每個行之間新增間隔 */
="小貓"
>

深入解析CSS筆記

Activity Intent深入解析

深入解析IOCP

HTTP 深入解析

深入解析CSS筆記

Activity Intent深入解析

深入解析IOCP

HTTP 深入解析

相關推薦