html css之盒模型

四 border 邊框

五 行內非替換元素的注意點

六 css 屬性

七 水平居中-不同型別的方式

八 css sprite

九 background-image 和 img 的選擇

如果塊級元素的頂部線和父元素的頂部線重疊，那麼這個塊級元素的 margin-top 值會傳遞給父元素，這樣就造成了 margin 塌陷現象

如果塊級元素的底部線和父元素的底部線重疊，並且父元素的高度是 auto，那麼這個塊級元素的 margin-bottom 值會傳遞給父元素

給父元素設定 border

觸發 bfc：設定 overflow 為 auto/hidden

如何防止 margin 摺疊呢?

邊框顏色

簡寫 border 它有三個值

注意：border-radius中的百分比是參考當前元素的width+padding+border的寬度

以下屬性對行內非替換元素的效果比較特殊

解決方案

outline 相關屬性

outline 縮寫

應用例項

格式

= inset? && && ?

更多配置

.box 
.header 
.box:hover 
.box:hover .header 

用於設定元素的背景

會蓋在(不是覆蓋)background-color 的上面

用於設定背景的大小

auto：以背景圖本身的大小顯示

cover：縮放背景圖，以完全覆蓋鋪滿元素

contain：縮放背景圖，寬度或者高度鋪滿元素，但是保持寬高比

百分比： 第乙個值設定佔據父元素寬度的百分比，第二個值佔據父元素高度的百分比

length：具體的大小，比如 200px

用於設定背景圖在水平、垂直方向上的具體位置

水平方向可以設定：left、center、right

垂直方向可以設定：top、center、bottom

如果只設定乙個方向，另乙個方向預設為 center

是一系列屬性的縮寫

格式：image position/size repeat attchment color

background-size 可以省略，如果不省略，/background-size 必須跟在 background-position 的後面

其他屬性也都可以省略，而且順序任意

cursor 可以設定滑鼠指標(游標)在元素上面時的顯示樣式

CSS之盒模型

怎麼理解盒子模型？盒子模型是樣式表 css 控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法，才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是乙個盒子，佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子 頁面和頁面中的元素...

HTML CSS之盒子模型

一 元素分類 css中html的標籤元素大體分為三種型別 1 塊狀元素 特點 每個塊級元素都從新的一行開始，並且其後的元素也另起一行 乙個塊級元素獨佔一行 元素的高度 寬度 行高以及頂和底邊距都可設定 元素寬度在不設定的情況下，是它本身父容器的100 和父元素的寬度一致 除非設定乙個寬度。塊狀元素轉...

標準盒模型 怪異盒模型 彈性盒模型

box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...