第二讲、盒子模型（02）

5.背景

1.背景颜色

语法：background-color: ;

background-color的值可以是颜色的单词、十六进制色号（常用）、十六进制的缩写、rgba（）。

其中颜色单词的值兼容性比较差，常用的是十六进制。

例如：

2.背景图片

语法：background-image:url();

其中url是图片的路径

关于设置图片的值：

background-image:url() url(); 表示双重背景

3。背景平铺

repeat 表示图片平铺；

background-repeat-y:repeat;        y轴平铺

background-repeat-x:repeat;        x轴平铺

no-repeat 表示图片不平铺；

案例：

4.图片大小

其值是：background-size: 100px 80px;

当然设置图片大小也不是唯一的，他可用百分比表示：background-size: 50%;

以及cover和contain，其区别请看图：

5.背景图片的位置

语法：background-position: ；

他的值也有很多样式，我们可以根据自己的需要进行设置。

例如：

 6.渲染的位置

语法：background-origin: padding-box;

他的值还有：

background-origin: padding-box; 从内边距的padding位置渲染
background-origin: content-box; 从内容区域渲染
background-origin: border-box;从border位置渲染

7.图片的固定

语法：background-attachment: ;

图片的固定有两个值分别是：fixed和scroll；

fixed        其含义是故图片固定不动

scroll        其含义是随着滚轮的滑动而移动

背景图片相关值的简写：

background : bg-color值   bg-image值   bg-repeat值   bg-position值 / bg-size值   bg-attachment值；

切记图片位置与图片大小之间有斜杠！

6.浮动

造成标签“浮动”，影响“文档流”的空间

float:left;“左浮动”

float:right;”右浮动”

对span元素添加一个float:left，span元素已经“块”化。

例如：

这里浮动没有到边缘是因为其父元素的原因！

 7.定位

1.static默认值

语法：position: static;

2.相对定位

语法：position: relative;        相对于自己原来的位置，不会因为移动导致原来位置不在

案例：

 3.绝对定位

绝对定位有两种：一种是包含框无定位，相对浏览器定位；另一种是包含窗有定位，相对有定位的离自己最近的包含框定位。

绝对定位脱离了”文档流“，

使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签

如果没有，那么将以浏览器左上角为准来定位

特别

只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”

案例一：

 案例二：

 大家可以仔细看一下，绝对定位的第二种方式其父元素中的值。

4.固定定位

语法：position: fixed;

固定定位始终相对于浏览器定位。

案例

 5.粘性定位

语法：position: sticky;

粘性定位是 position:relative 与 position:fixed 的结合体，

代码如下：

 

 以上的定位都使用top、right、bottom、left的值来确定他的位置的！

同学们有什么不太懂的地方可以在评论区留言，我会尽量给大家解答！