【CSS】盒子模型、内边距、背景设置_03
目錄
一.CSS3概述
二.CSS的語法規范
三.基礎選擇器
四.尺寸和邊框
五.盒子模型?
4.內邊距padding
5.margin和padding的使用場合
六.背景
1.背景顏色
2.背景圖片
3.背景圖片的平鋪
4.背景圖片的定位
5.背景圖片的尺寸
🆙【前文回顧】👉??尺寸和邊框、盒子模型、外邊距_02
一.CSS3概述
二.CSS的語法規范
三.基礎選擇器
四.尺寸和邊框
五.盒子模型?
4.內邊距padding
內邊距是邊框到內容區域之間的距離
內邊距有顏色，就是當前元素的背景顏色
改變內邊距，感覺上是元素變大了，但其實是元素占地空間變大，內容區域并沒有改變
padding:v1; 設置4個方向的內邊距
padding-top
padding-right
padding-bottom
padding-left
取值 ?px
????? ???%? 父元素寬度的百分比
????? ???沒有auto值
padding:v1;
padding:v1 v2;? 上下 ??左右
padding:v1 v2 v3;? 上 ??左右 ??下
padding:v1 v2 v3 v4; 上右下左
5.margin和padding的使用場合
margin ?一般用于元素位置的微調
??????? ??????設置元素與元素之間的距離
padding 用于把元素撐開
??????? ??????有些需求下，內邊距可以做元素位移效果（不是讓元素移動，是讓內容區域移動）
???????? ?????有些需求下，內邊距用來設置元素之間的距離
margin與padding都用于設置元素與元素之間的距離時，唯一的區別就是padding不用考慮外邊距溢出的問題，而margin需要考慮，需要給其父元素添加空table標簽
💦?margin和padding分別適合什么場景使用？
?
個人認為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。
?? margin使用時應該注意的地方——外邊距合并問題
?
margin在垂直方向上相鄰的值相同時會發生疊加，水平方向上相鄰的值會相加(左右外邊距不合并)。margin取負值時，在垂直方向上，兩個元素的邊界仍然會重疊。但是，此時一個為正值，一個為負值，并不是取其中較大的值，而是用正邊界減去負邊界的絕對值，也就是說，把正的邊界值和負的邊界值相加。
總結：垂直方向上，同為正，取較大值；同為負，取絕對值較大值；一正一負，絕對值較大值與絕對值較小值的差，即正的邊界值和負的邊界值相加。
6.改變盒子模型計算方式
添加樣式box-sizing:? content-box?? ?默認值，content--->內容區域?
Standards 模式????????????????? ??????????????我們設置的width是內容區域的寬度
標準模式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?height是內容區域的高度
????????????????????????? ????????????????????????????????盒子模型計算這個元素實際占地寬度的公式
?????????????????????????? ???????????????????????????????左右外邊距+左右邊框+左右內邊距+width
添加樣式box-sizing:? border-box? ? ? ?我們設置width是border以內的部分
Quirks模式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（border+padding+內容區域寬度）
怪異模式 ???????????????????????????????????????????盒子模型計算這個元素實際占地寬度的公式
?????????????????????????? ??????????????? ? ? ? ? ? ? ? ?左右外邊距+width
當元素的width設置為百分比的時候，一般都會使用border-box
這樣的話，就能夠通過隨著邊框和內邊距來控制元素之間的距離，并且在不用計算的情況下，保證元素不會被擠下來
💦 關于border-box和content-box的區別
chrome瀏覽器box-sizing默認是content-box，content-box就是元素的width和height決定了元素的寬高，這意味著元素的border和padding等不能算在元素的width和height中 ，padding和border的改變不能改變width和height的值。
border-box就是用元素內容和padding和border一起決定width和height，啥意思，就是width和元素的內容以及padding和border相互制約。下面用幾句話簡潔解釋一下。
?
? width和height改變，padding和border不改變時，元素內容的寬高會發生相應的改變，改變的值就是width和height改變的值。
?
? padding和border改變，width和height不改變時，元素內容的寬高會發生相應的改變，改變的值就是padding和border改變的值。
? 元素內容的寬高等于：元素的寬高 - (?border + padding )? ? ? ? ? ? ? ???
六.背景
1.背景顏色
background-color: 合法的顏色值???? transparent（默認值）
background-color:指定背景顏色。
background-color:transparent? 指定背景顏色應該是透明的。這是默認
💦?background和background-color的區別
相同點：二者都可以設置背景顏色
?
不同點：
1、background可以設置背景顏色，背景圖片等，即可以定義背景的一切內容，如背景顏色，背景圖像，背景圖像的位置，背景圖片的尺寸等東西；background-color只能定義背景顏色，不可以定義其他的內容
2、background設置背景顏色會默認有{background:no-repeat}，即background: #aaa;后，相當于同時設置了background:no-repeat; 即{background-color: #aaa;background:no-repeat;}=={background: #aaa;}而background-color的默認屬性會有{background:repeat}，即background-color: #aaa;后，相當于同時設置了background:repeat;即{background-color:#aaa;background:repeat} = {background:#ccc};
2.背景圖片
background-image: url(09.png);
元素內部的其它元素或者文本，都會壓在背景圖片的上面顯示
注意：url()，括號里圖片可以加單引號、雙引號，也可以不加
?
多個背景圖片實例：background-image: url('URL1'), url('URL2');
3.背景圖片的平鋪
當背景圖比較小，元素本身比較大，背景圖會在元素內部顯示多個
background-repeat: repeat;? 默認值? 同時在x,y軸平鋪
????????????????????????????????no-repeat 不平鋪
????????????????????????????????repeat-x單獨在x軸平鋪
? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? repeat-y單獨在y軸平鋪
4.背景圖片的定位
background-position: x? y; （默認值為0% 0%）
? ? ?取值 ?① 以px為單位的數字
第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規定了一個值，另一個值將是50%。您可以混合使用 % 和position 值。
? ? ? ? ? ? ? ② %?
第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。
? ? ? ? ? ? ??③?關鍵字? x(left/center/right)?? y(top/center/bottom)
如果您僅規定了一個關鍵詞，那么第二個值將是"center"。默認值：0% 0%。
可以只取一個值
?????????????? background-position:x;???——y默認為center
記憶：向左，上（定點坐標）都為負，向右，下（定點坐標）都為正值．即正值代表向右向下移動多少，負值代表向左向上移動多少。移動是相對于容器的左頂點移動（坐標軸的原點就是對應容器的左頂點）。
5.背景圖片的尺寸
background-size: width? height;
? ? ? 取值? px 為單位的數字
? ? ? ? ? ? ? ?%
可以只取一個值， px/%? 同時設置寬高
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contain圖片等比縮放，讓容器完全包含背景圖，背景圖要顯示完整
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?cover 圖片等比縮放，讓容器完全被背景圖覆蓋，不許有空白區域
注意：只設置一個值時，是同時設置寬高的，這跟background-position設置一個值只代表一個值，另一個值只是默認
? 小結：
語法：👇?
background-size: length|percentage|cover|contain;| length | 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為?auto(自動) |
| percentage | 將計算相對于背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度，各個值之間以空格?隔開指定高和寬，以逗號?,?隔開指定多重背景。如果只給出一個值，第二個是設置為"auto(自動)" |
| cover | 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。 |
| contain | 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。 |
實例：?👇
/* 關鍵字 */
background-size:?cover
background-size:?contain
/* 一個值：這個值指定圖片的寬度，圖片的高度隱式的為 auto */
background-size:?50%
background-size:?3em
background-size:?12px
background-size:?auto
/* 兩個值 */
/* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size:?50%?auto
background-size:?3em?25%
background-size:?auto?6px
background-size:?auto?auto
/* 逗號分隔的多個值：設置多重背景 */
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;??
擴展：background-size 100%跟cover的區別
①?100% 使用場景
當背景圖必須完整顯示全時，使用background-size:100% 100%;但是可能會導致圖片失真變形。
② cover 使用場景
當背景圖不是很重要時，只需要把 div 區域填充滿時，使用background-size: cover;
圖片比例保持不變且不會失真，但是可能部分區域不可見，也就是說某些部分被切割無法顯示完整背景圖像
總結：
background-size：100%;?總是X軸100%鋪滿整個容器，Y軸可能被裁剪會出現空白填不滿部分，圖片不變形。
background-size: 100% 50%; ?寬度占滿屏幕，高度占50%
background-size：100% 100%;?圖片不保持比例放大或縮小使X軸與Y軸都鋪滿整個容器，圖片可能會變形。也就是說，寬度高度都占滿整個屏幕，除非圖片完美適配，否則圖片會變形
background-size: 100% auto; 寬度占滿屏幕，高度自動適配，高度有所犧牲
background-size: auto 100%; 高度占滿屏幕，寬度自動適配，寬度有所犧牲
background-size：cover;?圖片保持比例放大或縮小使X軸與Y軸都鋪滿整個容器，但圖片超出容器部分會被裁剪掉，圖片不變形。
background-size：contain;?圖片保持比例放大或縮小填充容器，若不能完整填充容器，X軸或Y軸都有可能出現白邊，圖片不變形。
補：理解CSS3中的background-size(對響應性圖片等比例縮放)：
瀏覽器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;
基本語法：background-size: length | percentage | cover | contain;
(1) length
??? 該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。如果只設置第一個值，那么第二個值會自動轉換為 “auto”;
?
(2)?percentage
???? 該屬性是以父元素的百分比來設置圖片的寬度和高度的，第一個值是寬度，第二個值是高度。如果只設置一個值，那么第二個值會被設置為 “auto”;
(3) cover
????? 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
(4) contain
??? ??把圖像擴展至最大尺寸，以使寬度和高度 完全適應內容區域。
6.背景的簡寫形式
background:color? img? repeat? position
沒有size，位置可以自由更換
最簡方式：background: color/img? ?——2者必選一?
💦?關于background-position和background-size
要特別注意background-position和background-size這兩個屬性，因為它們的值都是像0px 0px這種格式的，所以要用這種格式：[background-position] / [background-size]，如果簡寫，沒有“/”則表示為background-position的值，而background-size采用缺省值。
?
以上簡寫，在 background 里面加個斜杠 “/” ，斜杠前面部分是 background-position 屬性的值，后面部分是 background-size 的值。
要注意的是，在這種格式下，background-position 屬性一定要寫出來，不能省略。
擴展：有關background屬性
在CSS2.1里，background屬性的簡寫方式包含五種屬性值，從CSS3開始，又增加了3個新的屬性值，加起來一共8個。
CSS2.1
background-color?使用的背景顏色。
background-image?使用的背景圖像。
background-repeat?如何重復背景圖像。
background-attachment?背景圖像是否固定或者隨著頁面的其余部分滾動。
background-position?背景圖像的位置。
CSS3
background-size?背景圖片的尺寸。
background-origin?背景圖片的定位區域。
background-clip?背景的繪制區域。
?
補：background-attachment屬性進階
前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動的。可簡單理解為定義背景圖片隨滾動軸的移動方式。
取值：
scroll:默認值，背景圖相對于元素固定，背景隨頁面滾動而移動，即背景和內容綁定。Fixed：背景圖相對于視口固定，所以隨頁面滾動背景不動，相當于背景被設置在了body上。
local：背景圖相對于元素內容固定，
inhert：繼承，initial 關鍵字用于設置 CSS 屬性為它的默認值。initial 關鍵字可用于任何HTML 元素上的任何 CSS 屬性。
補： background-origin 屬性進階
定義和用法
background-origin 屬性規定 background-position 屬性相對于什么位置來定位。
注釋：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。
語法：background-origin: padding-box|border-box|content-box;
取值
padding-box? ?背景圖像相對于內邊距框來定位。
border-box? ?背景圖像相對于邊框盒來定位。
content-box? 背景圖像相對于內容框來定位
補： background-clip 屬性進階
定義和用法：background-clip 屬性規定背景的繪制區域
語法：background-clip: border-box|padding-box|content-box;
取值：
border-box? ? ? 背景被裁剪到邊框盒。
padding-box? ? 背景被裁剪到內邊距框。
content-box? ? ?背景被裁剪到內容框。
🆕【后文傳送門】👉?css3漸變、文本格式化_04
總結
以上是生活随笔為你收集整理的【CSS】盒子模型、内边距、背景设置_03的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2023-2029年中国AI音箱行业运营
- 下一篇： CSS——icon 全解