學習隨筆——CSS盒模型屬性——2020.11.9
- border屬性：
- border四要素：邊框方位，邊框樣式，邊框寬度，邊框顏色
- 邊框方位：
- 上邊框：border-top
- 下邊框：border-bottom
- 左邊框：border-left
- 右邊框：border-right
- 四邊框：border
- 邊框樣式border-style
- 如果沒有設定這個屬性，所有的邊框效果不顯示
- dotted 點狀線
- dashed 虛線
- solid 實線
- 邊框寬度border-width
- border-wodth 像素值
- border-位置-width 上右下左
- 邊框顏色border-color
- border-color 顏色常量/十六進制代碼
- border樣式的復合簡寫
- border-width 單獨設定邊框的寬度
- border-style 單獨設定邊框的樣式
- border-color 單獨設定邊框的顏色
- border 樣式 寬度 顏色
- border-方位 樣式 寬度 顏色
- margin屬性：
- 外邊距屬性——外邊距margin
- 在邊框以外的空白區域，被稱為邊距，用來調整并列元素間的位置關系
- margin 像素值（四個邊距）
- margin 像素值（上下） 像素值（左右）
- margin 像素值（上） 像素值（左右） 像素值（下）
- margin 像素值（上） 像素值（右） 像素值（下） 像素值（左）
- 上邊距：margin-top 當前元素往下移
- 右邊距：margin-right 下一個元素向右移動
- 下邊距：margin-bottom 下一個元素向下移
- 左邊距：margin-left 當前元素向右移
- 可以為負值，可以設定為auto
- 說明：margin：0 auto;表示該元素在瀏覽器水平位置居中
- margin合并（外邊距合并）
- 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距
- 合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者
- 只有普通檔案流中塊框的垂直外邊距才會發生外邊距合并
- 行內框，浮動框或絕對定位之間的外邊距不會合并
- padding屬性
- 在元素內容與邊框之間的空白區域，也叫補白
- 用來調整內容物在容器中的位置關系
- 用來調整子元素在父元素中的位置關系
- padding屬性需要添加在父元素上
- ————————————————————————————————
- padding 像素值（四個填充）
- padding 像素值（上下） 像素值（左右）
- padding 像素值（上） 像素值（左右） 像素值（下）
- padding 像素值（上） 像素值（右） 像素值（下） 像素值（左）
- ————————————————————————————————
- 內容與邊框之間的距離————
- 上填充：padding-top
- 下填充：padding-bottom
- 左填充：padding-left
- 右填充：padding-right
- 不允許負值，不可以設定auto
- 備注：邊框屬性————
- Div實際寬度=左外邊距+左邊框粗度+左填充距離+內容物寬度+右填充距離+右邊框粗度+右外邊距
- Div實際高度=上外邊距+上外邊框粗度+上內填充距離+內容物高度+下內填充距離+下邊框粗度+下外邊距
- width,height屬性
- 寬度width:像素值/百分比
- 高度height:像素值/百分比
- 用來設定塊元素，直接對行內元素設定高度沒有作用
- 盒模型的display屬性（盒模型型別）
- 盒模型的型別————
- 塊狀盒模型（block）,行內盒模型（行內盒模型inline）,行內塊狀盒模型（inline-block）
- block塊狀元素：塊狀元素的寬度為100%，而且后面隱藏附帶有換行符，使塊狀元素始終占據一行
- 常用塊級元素————
- div
- p,hr,h1-h6
- ul,ol,dl
- li,dt,dd
- form
- table
- inline行內元素（行內元素）：行內元素也呈矩形形狀，它的高和寬由它的內容所確定，定義它的width和height屬性無效
- 多個行內元素可以同一行顯示
- 常用行內元素————
- span，label
- img,a,br
- input,button,select,textarea
- em,b,strong,i,sup,sub
- 盒模型的型別轉換————
- 盒子模型可通過display屬性來改變默認的顯示型別
- display屬性w3c制定了共有18個屬性值，但是大多瀏覽器無法識別
- 需要掌握————
- block塊狀顯示方式：在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示
- inline行內顯示方式：在元素后面洗掉換行符，多個元素可以在一行內并列顯示
- inline-block行內塊狀顯示方式：元素具有塊狀元素的特征，但是不獨占一行，又具有行內元素的特征
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/211667.html
標籤：python