《CSS權威指南》學習筆記之框與邊框

2021-06-27 03:31:40 字數 1962 閱讀 9204

css框模型:

立體圖:

width

允許值《長度》|《百分比》|auto

初始值auto

可否繼承否

適用於塊級元素和替換元素

注意:百分比是相對于父元素。

height

允許值《長度》|auto

初始值auto

可否繼承否

適用於:塊級元素和替換元素。

margin

允許值[《長度》|《百分比》|auto]  //指可以有1~4個值

初始值未定義

可否繼承否

適用於所有元素

注意:百分比是指相對于父元素的寬度。

margin:top right bottom left 順時針方向

可混合使用長度型別 h2

margin的複製值:

單側邊界屬性

margin-top, margin-right, margin-bottom, margin-left

允許值 

《長度》|《百分比》|auto

初始值 0

可否繼承

否適用於

所有元素

注意:百分比是指相對于父元素的高度。

壓縮(重疊)邊界

沿縱軸方向,相鄰邊界會被壓縮,即兩個邊界中較小的那個被淘汰。且壓縮只應用於邊界,補白及邊框不會被壓縮。

border-style

允許值none|dutted|dashed|solid|double|groove|ridge|inset|outset

初始值 none

可否繼承

否適用於

所有元素

注意:對css1來說,只有支援solid是必需的。

border-width

允許值[thin|medium|thick|《長度》]

初始值 未定義縮略屬性

可否繼承

否適用於

所有元素

border-top-width,border-right-width,border-bottom-width,border-left-width

允許值[thin|medium|thick|《長度》]

初始值medium

可否繼承

否 適用於 所有元素

注:p 由於border-style的預設值是none,宣告邊框失敗等同於宣告border-style為none。因此,若想乙個邊框出現,必須挑選乙個樣式並宣告它。

border-color

允許值《顏色》

初始值元素的顏色

可否繼承

否 適用於 所有元素

border-top,border-right,border-bottom,border-left

允許值《邊框寬度》||《邊框樣式》||《顏色》 (值的排列順序並不重要,也可以空缺一些值且使用其預設值,但是如果空缺了邊框樣式,那麼其預設值none將會使邊框無法顯示)

初始值參考各個屬性

可否繼承

否適用於

所有元素

border

允許值《邊框寬度》||《邊框樣式》||《顏色》

初始值參考各個屬性

可否繼承

否 適用於 所有元素

注意:使用border的缺點是賦給border的值會應用於所有四條邊上。但 h1 20px會代替thick。

css權威指南學習筆記

替換元素 用來替換元素內容的部分並非有文件內容直接表示。元素也是替換元素,單選鈕,核取方塊,文字輸入框。非替換元素 段落,標題,表單元格,列表。除了替換和非替換元素,css2.1還使用另外兩種基本元素型別 塊級元素和行內元素。塊級元素生成乙個元素框,會填充其父元素的內容區,旁邊不能有其他元素。例 行...

css權威指南學習筆記

2016 08 03 1,繼承 一般大多數框模型屬性都是不能繼承的。如 padding margin border background 都不能繼承。繼承值,完全沒有特殊性。就是優先順序最低 2,縮排 text indent 屬性 段落前空格。應用於塊級元素 3,水平對齊 text align te...

《CSS權威指南》筆記

h1 0,0,0,1 p em 0,0,2 grape 0,0,1,0 p.bright em.dark 0,0,2,2 id123 0,1,0,0 其中 id123 0,1,0,0優先順序最高.複製 定位可以準確的定義元素框相對於其正常位置應該出現在 或者相對于父元素,另乙個元素甚至瀏覽器位置。定...