html5 權威指南 知識小結 II

css3盒模型

ch20 使用盒模型

1 內邊距 padding

內邊距屬性padding-top

padding-right

padding-bottom

padding-left

padding

外邊距屬性margin-top

margin-right

margin-bottom

margin-left

margin

尺寸屬性width

height

min-width

min-height

max-width

max-height

box-sizing：設定尺寸調整應用到盒子的哪一部分。值：content-box padding-box border-box margin-box

overflow屬性overflow-x

overflow-y

overflow

值：auto scroll(新增滾動條，不溢位也有) hidden visible(預設值)

visibility屬性值：colapse(不佔空間) hidden(佔空間) visible

display屬性值：inline 字，自動忽略width,height和margin

block 段落)

inline-block 文字行，有寬度等屬性

list-item 列表項

run-in 插入元素，取決於周圍元素的型別

compact

flexbox

table

inline-table

table-row-group

table-footer-group

table-row

table-column

table-cell

table-caption

ruby

ruby-case

ruby-text

ruby-base-group

ruby-text-group

none 不可見且不佔空間

float屬性值：left right none(固定)

clear屬性用於阻止浮動元素堆疊

值：left(左邊界不能挨著另乙個元素) right both none

1 定位內容

position屬性值：static(預設值) relative(相對於普通定位的位置) absolute(相對於父級非static元素進行定位) fixed(固定在瀏覽器視窗的某個位置)

left right top bottom屬性

z-index屬性元素的層疊順序，值越小，順序越靠後。

column-count屬性列數column-fill屬性列長度差異。值：auto(不管長度差異) balance(預設值，使各列盡量平衡)

column-gap屬性

列之間的距離

column-rule屬性

與border設定相似

column-rule-color屬性

column-rule-style屬性

column-rule-width屬性

columns屬性

column-width 列寬

column-span 佔據幾列

display屬性值：flex(block) inline-flex(inline-block)

flex-direction屬性設定主軸的方向。

值：row(預設值，水平向右) row-reverse column column-reverse

flex-wrap屬性設定子元素溢位，是否換行。

值：nowrap(預設值) wrap wrap-reverse

justify-content屬性設定主軸對齊方式。

值：flex-start(預設值) flex-end center space-between space-around

align-items屬性單**況下，沿交叉軸的對齊方式。

值：flex-sttart flex-end center baseline(基線對齊) stretch(若沒有設定對應方向上的長度，將被拉伸)

align-content屬性設定多行的對齊方式，多了space-between和space-around。

在子元素上設定的屬性align-self屬性交叉軸對齊房四海

order屬性

數值越小，越靠前。預設值為0。

flex-grow屬性

定義拓展的比例，即當主軸方向上有剩餘空間時，自動拉伸佔據多少比例的空間。預設值:0。

flex-shrink屬性

定義壓縮的比例，空間不足時壓縮的空間。只算content。

flex-basis屬性

flex-basis 是決定了 元素寬度的 最小值， width，是決定了元素寬度可撐開的 最大值。

flex屬性

是 flex-grow flex-shrink flex-basis 的縮寫形式

跟**布局相關的display屬性的值table

inline-table

table-caption

table-column

table-column-group

table-header-group

table-row-group

table-footer-group

table-row

table-cell

HTML5權威指南 建立布局

值 說明static 預設值，普通布局 relative 元素位置相對於static定位 absolute 元素相對於position值不為static的第一位祖先元素定位 fixed 元素相對於瀏覽器視窗定位 跟報紙的排版一樣 果然如同報紙一樣！書中寫的已經有些過時了。我就找一些資料按照書上的思路...

html5權威指南 標記文字

html5權威指南 第八章 用基本的文字元素標記內容 html5權威指南 第八章 標記文字 通用容器 p some span text span p 強調重要 i am very worried warning 表示不同情緒或聲音的文字，如內心對白 表示外來語 分類學名和技術術語等 fr oh la...

HTML5權威指南 使用window物件

下面是window.history的物件和方法 1.在瀏覽歷史中導航 window.history.back 後退 window.history.forward 前進 window.history.go 以當前頁為基準想到哪就到哪 2.在瀏覽歷史中插入條目 3.為不同的文件新增條目 window.h...