本文共 4402 字，大约阅读时间需要 14 分钟。

复习关于盒子模型相关知识点补充说明(细节决定成败)

高度样式设置auto

图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算

同行宽度问题

一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度

无法完整放入的元素会被挤下一行展示

比如:一张图片 + 一段文字一起变为块元素,如果一段文字不设置宽度则默认继承父级body100%整行,就不可能和图片一起显示在一行中.(因此只能给p设置固定的宽度,除了图片外父级还剩多少宽度,那么文字就可以设置为剩余宽度,才能在同一行中)

内外边距问题

1. 外边距垂直方向会合并 选最大值 , 水平方向会进行叠加
2. 外边距如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果 子元素的外边距会穿透父元素生效
3. 内外边距都只能设置为整数 不要设置带小数的 边距 长宽

行高与高度

当行高与高度相等的时候 文本垂直居中

第九天: CSS盒子 背景(background)

总括:CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景尺寸
background-size	背景尺寸

##!!!背景的复合写法: (没写属性会默认值有给你强制写上.复合写法的缺点)

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/背景大小

background: url(image.jpg)  no-repeat  scroll 0 0(如果不调整左右必须都写行0,否则另一个默认50%)/ cover; background: url(image.jpg)  no-repeat  scroll center/ cover; font: font-style  font-weight  font-size/line-height  font-family;  font也有类似

一.背景颜色(color)

1.语法：

background-color : hex(16进制) | rgb | 内置颜色英文 |rbga(+透明度0-1)

2.CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

二.盒子背景图片(image )

1.background-image属性允许指定一个图片展示在盒子背景中（只有CSS3才可以多背景）

即在盒子中引入背景图片

2.语法：

background-image : none | url (图片的路径)

3.参数：

none : 　无背景图（默认的） url(): 　使用绝对或相对地址指定背景图像 background-image 可以和 background-color 连用。 4.如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

三.背景平铺（是否多重复去铺repeat）

因为背景图片不一定和盒子一样大.因此可以选择是否平铺即重复背景图片.

1.语法： (默认是repeat,横纵一起平铺)

background-repeat : repeat | no-repeat | repeat-x | repeat-y

2.参数：

repeat : 　背景图像在纵向和横向上平铺（默认的,在横向铺几次,纵向也铺几次）

no-repeat : 　背景图像不平铺,(但是,只一张铺背景图片,其余空白)

repeat-x : 　背景图像在横向上平铺 .(只能横向铺满一次,其余空白)

repeat-y : 　背景图像在纵向平铺 .(只能总向铺满一次,其余空白)

三.背景图片尺寸 :

(可以理解为图片的放大缩小,不会溢出盒子,因此不要和图片img设置宽高混淆)

1.语法：

background-size : width height;

单位 : px | % | cover|contain

length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个px值，第二个是自动设置为 auto
percentage	将计算相对于背景定位在盒子区域的百分比(100%等于铺满父级盒子)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。(适合整个页面)
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。(前提得有块盒子,否则失效)

##四.移动背景位置(position) (超级重要!!!类似margin)

1.语法:

background-position :  X  Y;

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center" 左边栏的的键值对都是可以等价替换的,是一样的比如left top=top left
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％ 0％
x pos y pos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 。如果仅指定了一个值，其他值将是50％。你可以混合使用％和pos
inherit	指定background-position属性设置应该从父元素继承

2.参数可以为： (百分数可以合并纵横参数,但px不可以合并纵横参数.因此最好都写xy纵横两个参数.)

①.百分数% (以居中50%为分界线,宽度数值越大越向右,数值越小越向左.高度同理)

②.英文单词: 　top | bottom | center | left | right (写英文上下左右各顶端)

(例如:只写一个center是都横纵都居中,写center top 横向居中,纵向是上顶端) ③.px值: 比如，设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上： ④inherit:background-position属性设置应该从父元素继承

3.注意说明：

①background-position : X Y 移动位置起点是从背景图片的左上角点(不是当前盒子),为xy坐标轴原点开始移动背景图片的.(如果调了background-origin则起点才会改) ②如果background-position只指定了一个px值，该值将只用于x横坐标。y纵坐标将默认为50%即纵向会居中。当然如果有第二个值将用于纵坐标。

③如果和精确单位和方位名字混合使用(但不规范)，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。(不推荐这么搞,很乱也累)

④实际工作用的最多的就是背景图片居中对齐了(xy各50%或者xy各center)

还有精灵图一定要学会怎么使用background-position调位置!!!

五.背景附着attachment(很少用)

语法：

background-attachment : scroll | fixed

参数：

scroll : 　背景图像是随对象内容滚动,(滚着背景图片就不见了)

fixed : 　背景图像固定 .(图片始终固定在窗口上 ,怎么滚都能看到图片)

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

六.背景裁剪background-clip（知道即可）

1.background-clip: border-box|padding-box|content-box;

2.作用：裁剪规定背景的绘制区域：

（因为一个盒子最终由原始盒子+pad+border组成，那么背景图片就能裁剪到某个区域内）

●border-box：背景被裁剪到边框盒，即边框以内的区域。

●padding-box：背景被裁剪到内边距框，即padding以内区域。

●content-box：背景被裁剪到内容框，即内容以内的区域。

注：InternetExplorer8以及更早的版本不支持background-clip属性。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。#

七.背景移动起源background-origin:（知道即可）

1.概念：

background-Origin属性指定background-position属性应该是相对位置。 (通俗来讲就是:background-position : X Y 移动位置起点是从背景图片的左上角点(不是当前盒子),为xy坐标轴原点开始移动背景图片的.(如果调了background-origin则起点才会改))

注意:如果背景图像background-attachment是"固定"，这个属性没有任何效果。

2.background-origin 属性规定 background-position 纵横扩展属性应该相对于什么位置来定位。

padding-box 背景图像相对于内边距框来定xy位

border-box 背景图像相对于边框盒来定xy位(前提你有边框!!!)

content-box 背景图像相对于内容框来定xy位

3.语法：

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框