目錄

一.CSS3概述

二.CSS的語(yǔ)法規(guī)范

三.基礎(chǔ)選擇器

四.尺寸和邊框

五.盒子模型?

4.內(nèi)邊距padding

5.margin和padding的使用場(chǎng)合

六.背景

1.背景顏色

2.背景圖片

3.背景圖片的平鋪

4.背景圖片的定位

5.背景圖片的尺寸

---

🆙【前文回顧】👉??尺寸和邊框、盒子模型、外邊距_02

---

一.CSS3概述

二.CSS的語(yǔ)法規(guī)范

三.基礎(chǔ)選擇器

四.尺寸和邊框

五.盒子模型?

4.內(nèi)邊距padding

內(nèi)邊距是邊框到內(nèi)容區(qū)域之間的距離

內(nèi)邊距有顏色，就是當(dāng)前元素的背景顏色

改變內(nèi)邊距，感覺(jué)上是元素變大了，但其實(shí)是元素占地空間變大，內(nèi)容區(qū)域并沒(méi)有改變

padding:v1; 設(shè)置4個(gè)方向的內(nèi)邊距

padding-top

padding-right

padding-bottom

padding-left

取值 ?px

????? ???%? 父元素寬度的百分比

????? ???沒(méi)有auto值

padding:v1;

padding:v1 v2;? 上下 ??左右

padding:v1 v2 v3;? 上 ??左右 ??下

padding:v1 v2 v3 v4; 上右下左

5.margin和padding的使用場(chǎng)合

margin ?一般用于元素位置的微調(diào)

??????? ??????設(shè)置元素與元素之間的距離

padding 用于把元素?fù)伍_(kāi)

??????? ??????有些需求下，內(nèi)邊距可以做元素位移效果（不是讓元素移動(dòng)，是讓內(nèi)容區(qū)域移動(dòng)）

???????? ?????有些需求下，內(nèi)邊距用來(lái)設(shè)置元素之間的距離

margin與padding都用于設(shè)置元素與元素之間的距離時(shí)，唯一的區(qū)別就是padding不用考慮外邊距溢出的問(wèn)題，而margin需要考慮，需要給其父元素添加空table標(biāo)簽

💦?margin和padding分別適合什么場(chǎng)景使用？
?

個(gè)人認(rèn)為：margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

?? margin使用時(shí)應(yīng)該注意的地方——外邊距合并問(wèn)題
?

margin在垂直方向上相鄰的值相同時(shí)會(huì)發(fā)生疊加，水平方向上相鄰的值會(huì)相加(左右外邊距不合并)。margin取負(fù)值時(shí)，在垂直方向上，兩個(gè)元素的邊界仍然會(huì)重疊。但是，此時(shí)一個(gè)為正值，一個(gè)為負(fù)值，并不是取其中較大的值，而是用正邊界減去負(fù)邊界的絕對(duì)值，也就是說(shuō)，把正的邊界值和負(fù)的邊界值相加。

總結(jié)：垂直方向上，同為正，取較大值；同為負(fù)，取絕對(duì)值較大值；一正一負(fù)，絕對(duì)值較大值與絕對(duì)值較小值的差，即正的邊界值和負(fù)的邊界值相加。

6.改變盒子模型計(jì)算方式

添加樣式box-sizing:? content-box?? ?默認(rèn)值，content--->內(nèi)容區(qū)域?
Standards 模式????????????????? ??????????????我們?cè)O(shè)置的width是內(nèi)容區(qū)域的寬度

標(biāo)準(zhǔn)模式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?height是內(nèi)容區(qū)域的高度

????????????????????????? ????????????????????????????????盒子模型計(jì)算這個(gè)元素實(shí)際占地寬度的公式

?????????????????????????? ???????????????????????????????左右外邊距+左右邊框+左右內(nèi)邊距+width

添加樣式box-sizing:? border-box? ? ? ?我們?cè)O(shè)置width是border以?xún)?nèi)的部分

Quirks模式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（border+padding+內(nèi)容區(qū)域?qū)挾?#xff09;

怪異模式 ???????????????????????????????????????????盒子模型計(jì)算這個(gè)元素實(shí)際占地寬度的公式

?????????????????????????? ??????????????? ? ? ? ? ? ? ? ?左右外邊距+width

當(dāng)元素的width設(shè)置為百分比的時(shí)候，一般都會(huì)使用border-box

這樣的話，就能夠通過(guò)隨著邊框和內(nèi)邊距來(lái)控制元素之間的距離，并且在不用計(jì)算的情況下，保證元素不會(huì)被擠下來(lái)

💦 關(guān)于border-box和content-box的區(qū)別

chrome瀏覽器box-sizing默認(rèn)是content-box，content-box就是元素的width和height決定了元素的寬高，這意味著元素的border和padding等不能算在元素的width和height中 ，padding和border的改變不能改變width和height的值。

border-box就是用元素內(nèi)容和padding和border一起決定width和height，啥意思，就是width和元素的內(nèi)容以及padding和border相互制約。下面用幾句話簡(jiǎn)潔解釋一下。
?

? width和height改變，padding和border不改變時(shí)，元素內(nèi)容的寬高會(huì)發(fā)生相應(yīng)的改變，改變的值就是width和height改變的值。
?

? padding和border改變，width和height不改變時(shí)，元素內(nèi)容的寬高會(huì)發(fā)生相應(yīng)的改變，改變的值就是padding和border改變的值。

? 元素內(nèi)容的寬高等于：元素的寬高 - (?border + padding )? ? ? ? ? ? ? ???

六.背景

1.背景顏色

background-color: 合法的顏色值???? transparent（默認(rèn)值）

background-color:指定背景顏色。

background-color:transparent? 指定背景顏色應(yīng)該是透明的。這是默認(rèn)

💦?background和background-color的區(qū)別

相同點(diǎn)：二者都可以設(shè)置背景顏色
?

不同點(diǎn)：

1、background可以設(shè)置背景顏色，背景圖片等，即可以定義背景的一切內(nèi)容，如背景顏色，背景圖像，背景圖像的位置，背景圖片的尺寸等東西；background-color只能定義背景顏色，不可以定義其他的內(nèi)容

2、background設(shè)置背景顏色會(huì)默認(rèn)有{background:no-repeat}，即background: #aaa;后，相當(dāng)于同時(shí)設(shè)置了background:no-repeat; 即{background-color: #aaa;background:no-repeat;}=={background: #aaa;}而background-color的默認(rèn)屬性會(huì)有{background:repeat}，即background-color: #aaa;后，相當(dāng)于同時(shí)設(shè)置了background:repeat;即{background-color:#aaa;background:repeat} = {background:#ccc};

2.背景圖片

background-image: url(09.png);

元素內(nèi)部的其它元素或者文本，都會(huì)壓在背景圖片的上面顯示

注意：url()，括號(hào)里圖片可以加單引號(hào)、雙引號(hào)，也可以不加
?

多個(gè)背景圖片實(shí)例：background-image: url('URL1'), url('URL2');

3.背景圖片的平鋪

當(dāng)背景圖比較小，元素本身比較大，背景圖會(huì)在元素內(nèi)部顯示多個(gè)

background-repeat: repeat;? 默認(rèn)值? 同時(shí)在x,y軸平鋪
????????????????????????????????no-repeat 不平鋪
????????????????????????????????repeat-x單獨(dú)在x軸平鋪
? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? repeat-y單獨(dú)在y軸平鋪

4.背景圖片的定位

background-position: x? y; （默認(rèn)值為0% 0%）

? ? ?取值 ?① 以px為單位的數(shù)字

第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。您可以混合使用 % 和position 值。

? ? ? ? ? ? ? ② %?

第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。

? ? ? ? ? ? ??③?關(guān)鍵字? x(left/center/right)?? y(top/center/bottom)

如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。默認(rèn)值：0% 0%。

可以只取一個(gè)值
?????????????? background-position:x;???——y默認(rèn)為center

記憶：向左，上（定點(diǎn)坐標(biāo)）都為負(fù)，向右，下（定點(diǎn)坐標(biāo)）都為正值．即正值代表向右向下移動(dòng)多少，負(fù)值代表向左向上移動(dòng)多少。移動(dòng)是相對(duì)于容器的左頂點(diǎn)移動(dòng)（坐標(biāo)軸的原點(diǎn)就是對(duì)應(yīng)容器的左頂點(diǎn)）。

5.背景圖片的尺寸

background-size: width? height;

? ? ? 取值? px 為單位的數(shù)字

? ? ? ? ? ? ? ?%

可以只取一個(gè)值， px/%? 同時(shí)設(shè)置寬高

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contain圖片等比縮放，讓容器完全包含背景圖，背景圖要顯示完整

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?cover 圖片等比縮放，讓容器完全被背景圖覆蓋，不許有空白區(qū)域

注意：只設(shè)置一個(gè)值時(shí)，是同時(shí)設(shè)置寬高的，這跟background-position設(shè)置一個(gè)值只代表一個(gè)值，另一個(gè)值只是默認(rèn)

? 小結(jié)：

語(yǔ)法：👇?

background-size: length|percentage|cover|contain; 值描述

length	設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為?auto(自動(dòng))
percentage	將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度，各個(gè)值之間以空格?隔開(kāi)指定高和寬，以逗號(hào)?,?隔開(kāi)指定多重背景。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))"
cover	此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
contain	此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

實(shí)例：?👇

/* 關(guān)鍵字 */
background-size:?cover
background-size:?contain

/* 一個(gè)值：這個(gè)值指定圖片的寬度，圖片的高度隱式的為 auto */
background-size:?50%
background-size:?3em
background-size:?12px
background-size:?auto

/* 兩個(gè)值 */
/* 第一個(gè)值指定圖片的寬度，第二個(gè)值指定圖片的高度 */
background-size:?50%?auto
background-size:?3em?25%
background-size:?auto?6px
background-size:?auto?auto

/* 逗號(hào)分隔的多個(gè)值：設(shè)置多重背景 */
background-size:?auto,?auto?? ??/* 不同于 background-size: auto auto */
background-size:?50%,?25%,?25%
background-size:?6px,?auto,?contain

例如：background-size: 250px 250px , 100px 100px , 60px 60px;

/* 全局屬性 */
background-size:?inherit;
background-size:?initial;
background-size:?unset;??

擴(kuò)展：background-size 100%跟cover的區(qū)別

①?100% 使用場(chǎng)景

當(dāng)背景圖必須完整顯示全時(shí)，使用background-size:100% 100%;但是可能會(huì)導(dǎo)致圖片失真變形。

② cover 使用場(chǎng)景

當(dāng)背景圖不是很重要時(shí)，只需要把 div 區(qū)域填充滿時(shí)，使用background-size: cover;

圖片比例保持不變且不會(huì)失真，但是可能部分區(qū)域不可見(jiàn)，也就是說(shuō)某些部分被切割無(wú)法顯示完整背景圖像

總結(jié)：

background-size：100%;?總是X軸100%鋪滿整個(gè)容器，Y軸可能被裁剪會(huì)出現(xiàn)空白填不滿部分，圖片不變形。

background-size: 100% 50%; ?寬度占滿屏幕，高度占50%

background-size：100% 100%;?圖片不保持比例放大或縮小使X軸與Y軸都鋪滿整個(gè)容器，圖片可能會(huì)變形。也就是說(shuō)，寬度高度都占滿整個(gè)屏幕，除非圖片完美適配，否則圖片會(huì)變形

background-size: 100% auto; 寬度占滿屏幕，高度自動(dòng)適配，高度有所犧牲

background-size: auto 100%; 高度占滿屏幕，寬度自動(dòng)適配，寬度有所犧牲

background-size：cover;?圖片保持比例放大或縮小使X軸與Y軸都鋪滿整個(gè)容器，但圖片超出容器部分會(huì)被裁剪掉，圖片不變形。

background-size：contain;?圖片保持比例放大或縮小填充容器，若不能完整填充容器，X軸或Y軸都有可能出現(xiàn)白邊，圖片不變形。

補(bǔ)：理解CSS3中的background-size(對(duì)響應(yīng)性圖片等比例縮放)：

瀏覽器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;

基本語(yǔ)法：background-size: length | percentage | cover | contain;

(1) length

??? 該屬性值是設(shè)置背景圖像的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是設(shè)置高度的。如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”;
?

(2)?percentage

???? 該屬性是以父元素的百分比來(lái)設(shè)置圖片的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是高度。如果只設(shè)置一個(gè)值，那么第二個(gè)值會(huì)被設(shè)置為 “auto”;

(3) cover

????? 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

(4) contain

??? ??把圖像擴(kuò)展至最大尺寸，以使寬度和高度 完全適應(yīng)內(nèi)容區(qū)域。

6.背景的簡(jiǎn)寫(xiě)形式

background:color? img? repeat? position

沒(méi)有size，位置可以自由更換

最簡(jiǎn)方式：background: color/img? ?——2者必選一?

💦?關(guān)于background-position和background-size

要特別注意background-position和background-size這兩個(gè)屬性，因?yàn)樗鼈兊闹刀际窍?px 0px這種格式的，所以要用這種格式：[background-position] / [background-size]，如果簡(jiǎn)寫(xiě)，沒(méi)有“/”則表示為background-position的值，而background-size采用缺省值。
?

background:url(../img/bg.jpg) no-repeat top center / cover;

以上簡(jiǎn)寫(xiě)，在 background 里面加個(gè)斜杠 “/” ，斜杠前面部分是 background-position 屬性的值，后面部分是 background-size 的值。

要注意的是，在這種格式下，background-position 屬性一定要寫(xiě)出來(lái)，不能省略。

擴(kuò)展：有關(guān)background屬性

在CSS2.1里，background屬性的簡(jiǎn)寫(xiě)方式包含五種屬性值，從CSS3開(kāi)始，又增加了3個(gè)新的屬性值，加起來(lái)一共8個(gè)。

CSS2.1
background-color?使用的背景顏色。
background-image?使用的背景圖像。
background-repeat?如何重復(fù)背景圖像。
background-attachment?背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。
background-position?背景圖像的位置。

CSS3
background-size?背景圖片的尺寸。
background-origin?背景圖片的定位區(qū)域。
background-clip?背景的繪制區(qū)域。
?

補(bǔ)：background-attachment屬性進(jìn)階
前提是定義了background-image屬性，然后用background-attachment來(lái)指明背景圖的位置是固定于視口的，還是隨著包含塊移動(dòng)的。可簡(jiǎn)單理解為定義背景圖片隨滾動(dòng)軸的移動(dòng)方式。

取值：
scroll:默認(rèn)值，背景圖相對(duì)于元素固定，背景隨頁(yè)面滾動(dòng)而移動(dòng)，即背景和內(nèi)容綁定。Fixed：背景圖相對(duì)于視口固定，所以隨頁(yè)面滾動(dòng)背景不動(dòng)，相當(dāng)于背景被設(shè)置在了body上。
local：背景圖相對(duì)于元素內(nèi)容固定，
inhert：繼承，initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。initial 關(guān)鍵字可用于任何HTML 元素上的任何 CSS 屬性。

補(bǔ)： background-origin 屬性進(jìn)階
定義和用法
background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位。
注釋：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒(méi)有效果。
語(yǔ)法：background-origin: padding-box|border-box|content-box;

取值
padding-box? ?背景圖像相對(duì)于內(nèi)邊距框來(lái)定位。
border-box? ?背景圖像相對(duì)于邊框盒來(lái)定位。
content-box? 背景圖像相對(duì)于內(nèi)容框來(lái)定位

補(bǔ)： background-clip 屬性進(jìn)階
定義和用法：background-clip 屬性規(guī)定背景的繪制區(qū)域
語(yǔ)法：background-clip: border-box|padding-box|content-box;

取值：
border-box? ? ? 背景被裁剪到邊框盒。
padding-box? ? 背景被裁剪到內(nèi)邊距框。
content-box? ? ?背景被裁剪到內(nèi)容框。

---

🆕【后文傳送門(mén)】👉?css3漸變、文本格式化_04

---

總結(jié)

以上是生活随笔為你收集整理的【CSS】盒子模型、内边距、背景设置_03的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。