HTML 盒子模型

2022-04-12 18:06:21 字數 2194 閱讀 7805

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...