border-top-style: solid 實線
dotted 點線
dashed 虛線
border-top-color 邊框顏色
border-top-width 邊框粗細
◆邊框屬性的連寫
特點:沒有順序要求,線型為必寫項。
◆四個邊框值相同的寫法
特點:沒有順序要求,線型為必寫項。
label for id 獲取游標焦點
◆padding連寫
padding: 20px; 上右下左內邊距都是20px
padding: 20px 30px; 上下20px 左右30px
padding: 20px 30px 40px; 上內邊距為20px 左右內邊距為30px 下內邊距為40
padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆內邊距撐大盒子的問題
影響盒子寬度的因素
內邊距影響盒子的寬度
邊框影響盒子的寬度
盒子的寬度=定義的寬度+邊框寬度+左右內邊距
◆繼承的盒子一般不會被撐大
包含(巢狀)的盒子,如果子盒子沒有定義寬度,給子盒子設定左右內邊距,一般不會撐大盒子。
◆外邊距連寫
margin: 20px; 上下左右外邊距20px
margin: 20px 30px; 上下20px 左右30px
margin: 20px 30px 40px; 上20px 左右30px 下 40px
margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外邊距合併
兩個盒子垂直乙個設定上外邊距,乙個設定下外邊距,取的設定較大的值。
◆巢狀的盒子外邊距塌陷
解決方法: 1 給父盒子設定邊框
2給父盒子overflow:hidden; bfc 格式化上下文
新建檔案 ctrl+n
開啟檔案 ctrl+o
調出和隱藏標尺 ctrl+r
清除輔助線: 檢視---輔助線----清除輔助線
放大鏡 z 放大鏡狀態下alt+滑鼠左鍵 縮小
抓手 快捷鍵 空格
測量距離 ★先拉出2根輔助線
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後,感覺真的顛覆我之前對盒子模型的看法,我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件,那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...
html盒子模型
什麼是css的盒子模式呢?為什麼叫它是盒子?先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解,日常生活中所見的盒子也具有這些屬性,所以叫...
html盒子模型
在css中有乙個需要了解的東西,那就是盒子模型,這是css看待元素的一種方式。可以說頁面就是由乙個個盒模型堆砌起來的,每個html元素都可以叫做盒模型,盒模型由外而內包括 邊距 margin 邊框 border 填充 padding 內容 content 它在頁面中所佔的實際寬度是margin bo...