盒子模型應該屬於模組內容,不過內容較多,單獨開篇
盒子模型 = content + padding + border + margin
div
這是乙個盒子<
/div>
border 簡寫
border: border-width border-style border-color
單獨控制單邊邊框:
border-style:dotted solid double dashed;
border-style:dotted double dashed;
border-style:dotted double;
border-style:dotted;
border-radius 圓角
border-radius: 上左 上右 下右 下左;
outline是位於邊框邊緣的一條線。
outline輪廓屬性
小貼士:outline是不佔空間的,既不會增加空間,也不會增加額外的width或height
padding定義元素邊框與元素內容之間的空間。
padding: px、百分比等
指定不同側面的padding:
padding-top: 25px;
padding-bottom: 20px;
padding-right: 50px;
padding-top: 12px;
填充簡寫:
padding: 25px 50px 30px 70px;
上、右、下、左
padding: 20px 50px 30px;
上、左右、下
padding: 30px 20px;
上下、左右
padding: 30px;
上下左右
注意事項:
行內元素上下margin無效
margin定義元素周邊的空間。
margin沒有背景顏色,是完全透明的。
屬性同padding
注意事項:
.father
.son
<
/style>
="father"
>
="son"
>
<
/div>
<
/div>
*
腳斷整理 CSS篇之對齊方式
控制行內元素和行內塊水平居中 控制的是單行文字的垂直居中 控制的是乙個具體的寬度的塊級元素水平居中 position absolute left 50 top 50 margin left 自身寬度的一半 margin top 自身高度的一半 控制的乙個絕對定位的元素水平垂直居中 控制背景水平垂直居...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型,英文即box model。無論是div span 還是a都是盒子。但是,表單元素一律看作是文字,它們並不是盒子。這個很好理解,比如說,一張裡並不能放東西,它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...