CSS（三）

標籤：數值   src   index   splay   isp   垂直   osi   images   inline   

DIV+CSS

一、盒子模型css

• height
• width
• padding 內邊距
• margin  外邊距
• border

1.margin 外邊距

　　margin-top:15px;

       margin-right:50px;

       margin-bottom:100px;

       margin-left:150px;

　　或者：margin:10px 50px 100px 200px;

　　一個值代表四個邊

　　二個值代表 上下  左右

　　三個值代表 上 左右  下

　　四個值代表 上 右  下  左  （每個數值之間需要使用空格隔開）

2. padding 內邊距

　　padding-top:10px;

　　padding-right:50px;

　　padding-bottom:100px;

　　padding-left:200px;

或者：padding：10px 50px  100px  200px;

　　一個值代表四個邊

　　二個值代表 上下  左右

　　三個值代表 上 左右 下

　　四個值代表 上 右 下 左  （每個值之間都需要使用空格隔開）

3.通用選取器

　　* 選擇的是所有元素

　　*{margin:0px;padding:0px}

最常用的屬性作用：是去除div和瀏覽器之間的小縫隙。

4.div或者table置中顯示

　　margin:0px auto;

5.字型置中

　　需要使用text-align 和line-height 配合將文本垂直置中顯示

                text-align:center; （水平）

                line-height:50px; （垂直）    註：height=設定的高度  兩行：設定一半

二、參與布局的常用屬性

1.position 定位

       a）absolute  絕對位置

　　absolute 絕對位置 如果只使用position:absolute沒有任何意義的 只是脫離文檔流 絕對位置是相對於瀏覽器的0,0點進行定位 需要使用 left top right bottom這幾個方向屬性來配置

　　如果你有父級元素 會根據父級元素的左上方定位

　　b)  relative   相對定位

 　　是相對於當前位置進行定位   

　　c)       fixed       固定定位 需要使用top left 配合

　　d)      static       預設值

2. z-index  設定顯示層級

　　auto 自動

　　number 數字

　　數字越大就會在最上面顯示

3. display 顯示內容 還有塊級和行內級元素互換功能

　　none 隱藏 ，文檔不保留位置 不佔位隱藏

　　block 轉換為塊級

　　inline  轉換為行內級

　　inline-block 轉換為行塊級

4. visibility  是否可見

　　visible 可見

　　hidden 隱藏 佔位隱藏

5. overflow 超出部分處理

　　visible 總是可見(預設值)

　　hidden  超出部分隱藏處理

　　scroll   捲軸 聲明時候都有捲軸

　　auto    自動 如果超出出現捲軸 否則沒有

　　

　　　　

 

 參考資料：https://www.w3cschool.cn/css/

CSS（三）