塊級元素(block-level elements)
行內級元素(inline-level elements)替換元素(replaced elements)
非替換元素(non-replaced elements)
行內級元素中的替換元素可以隨意設定寬高display的以下取值,等同於某些html元素行內級元素中的非替換元素不能隨意設定寬高,寬高由內容決定
/*隱藏元素一
元素框會被移除,不會佔位置*/
display
: none;
/*隱藏元素二
元素雖然看不見了,但元素的框依舊還留著,還會佔著原來的位置*/
visibility
: hidden;
>
>
div>
p>
flatuicolorshtml中的每乙個元素都可以看作是乙個盒子,具備以下屬性mnd
如何防止出現傳遞問題給父元素設定padding-top\padding-bottom(父元素和子元素頂部\底部就不會重疊了)
給父元素設定border
出發bfc:設定overflow為auto/hidden
建議margin一般是用來設定兄弟元素之間的間距
padding一般是用來設定父子元素之間的間距的
如何防止margin collapse?只設定其中乙個的margin
行內非替換元素的注意點
表示元素的外輪廓去除a元素、input元素的focus輪廓效果不占用空間
預設顯示在border的外面
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...