腳斷整理 CSS篇之盒子模型

2021-09-19 09:37:10 字數 1407 閱讀 4251

盒子模型應該屬於模組內容,不過內容較多,單獨開篇

盒子模型 = 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...