【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:url(../img/bg.jpg) no-repeat top center / cover;

以上简写，在 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

---