06 元素型別與盒子模型

2021-10-08 10:08:54 字數 1142 閱讀 4435

塊級元素(block-level elements)

行內級元素(inline-level elements)替換元素(replaced elements)

非替換元素(non-replaced elements)

行內級元素中的替換元素可以隨意設定寬高

行內級元素中的非替換元素不能隨意設定寬高,寬高由內容決定

display的以下取值,等同於某些html元素
/*隱藏元素一

元素框會被移除,不會佔位置*/

display

: none;

/*隱藏元素二

元素雖然看不見了,但元素的框依舊還留著,還會佔著原來的位置*/

visibility

: hidden;

>

>

div>

p>

flatuicolors

mnd

html中的每乙個元素都可以看作是乙個盒子,具備以下屬性

如何防止出現傳遞問題

給父元素設定padding-top\padding-bottom(父元素和子元素頂部\底部就不會重疊了)

給父元素設定border

出發bfc:設定overflow為auto/hidden

建議

margin一般是用來設定兄弟元素之間的間距

padding一般是用來設定父子元素之間的間距的

如何防止margin collapse?

只設定其中乙個的margin

行內非替換元素的注意點

表示元素的外輪廓

不占用空間

預設顯示在border的外面

去除a元素、input元素的focus輪廓效果

box-shadow屬性可以設定乙個或者多個陰影

每個陰影用表示

多個陰影之間用逗號,隔開從前到往後疊加

盒子模型與怪異盒子模型

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...

06 作業練習盒子模型

的練習!有關padding與border很重要編寫 的時候先把結構劃分好!第乙個金牌練習 金牌top5title table table caption thead thtbody tdtd a style head 金牌top5caption 排名th 國家th 金th 銀th 銅th 總計th ...

盒子模型(元素居中)

一 盒子垂直水平居中 1 定位 盒子寬高已知,position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middl...