【CSS】背景样式,背景颜色和图片的处理、浮动、盒子模型、溢出、定位

1.背景样式 背景颜色和图片的处理

① 背景颜色 background-color: orange;
② 背景图片 background-image: url(./img/bg.gif);
如果图片过小会平铺 过大会从左上角显示局部
如果背景图片大小和容器一样大则整好显示
③ 背景平铺
background-repeat 背景平铺处理
background-repeat: no-repeat; 背景不平铺
④ 背景位置
background-position: x y;
background-position: 200px 100px;
也可以通过方位来取
⑤ 背景的固定和滚动
background-attachment: fixed;
⑥ 背景大小
background-size
取值: 100px 100px 以像素为单位
100% 100% 以百分比为单位
如果取两个值则为x和y轴的定义如果取1个值则为x的定义y的自适应
关键字取值:
contain 完整显示 如果比例不对会留白
cover 缩放进行铺满，但是如果比例不对则会显示有左上角开始的局部

2 浮动样式

在页面当中，块元素会逐个换行显示，行元素会逐个排列显示不换行，这种情况叫做常规文档流
浮动可以 打破常规文档流让块元素横向排列。
float: left/right;
浮动的高度塌陷问题 ：
描述：如果父元素在没有设定高的情况下子元素进行了浮动，会出现高度塌陷的情况就是父元素无法
通过子元素来撑起来自己的高度。
解决：
1，通过给父元素固定的高度来解决。仅限于已知子元素的高度可以写死父元素高度。
2，通过给父元素添加overflow hidden来解决添加overflow可以触发bfc机制（bfc是文档当中跟常规文档里对立的一个空间，这个空间跟常规文档流空间相互不受影响）无法显示隐藏的属性
3，给父容器的结束位置添加一个块元素清除浮动 clear: both;
4,万能清除法，可以通过添加伪元素的方式来实现万能清除

3 盒子模型样式

（1）描述:盒子模型就是在一个页面当中所有的块元素都具备宽高外边距内填充边框这几个属性，这几个属性
也决定着这个盒子（元素）在也能当中所占的位置大小。
margin 外边距
取值:1个代表上下左右 2个代表上下 和左右 3个代表上 左右 下 4个代表上右下左
也可以根据方位来定义如margin-left 代表左边外边距
padding 内填充
border 边框
（2） margin-top的问题,子元素定义了上边距然后父元素会跟着下来
1 父容器 overflow: hidden;
2 父容器 float: left;
3 父元素 border: 1px solid red;
4 给父容器添加padding-top
（3）margin的上下边距重叠问题
如果上面一个盒子定义为margin-bottom为50 下面一个元素maigin-top为50
上下会重叠，如果其中一个较大则会跟进大的来进行显示

4溢出

语法:overflow
取值: overflow: hidden;内容溢出部分隐藏
取值: overflow: scroll; 内容溢出部分滚动可见
取值: overflow: auto; 溢出部分滚动不溢出不滚动

5 定位

需要让一个元素在页面当中进行不同位置的摆放而且不影响其他元素可用定位

相对定位 position: relative;
特点:基于自己原本的位置进行定位当定位到了其他位置后原本的位置不可以被占用还是在
文档流当中。

绝对定位
绝对定位会打破常规文档流触发bfc实现定位，之前的位置不存在了。参照物是父元素，是基于
有定位属性的父元素来进行的定位，如果父元素没有定位属性就会往上找祖元素，如果都没有
则基于浏览器定位。
相对定位和绝对定位经常会一起综合使用会子元素绝对定位父容器相对定位也叫做子绝父相

固定定位
固定定位是基于浏览器进行的定位，一般情况下定位为固定定位的元素一般父容器就是浏览器。

固定定位和绝对定位会脱离文档流，宽度不会自适应显示了，需要定义宽度。
固定定位和绝对定位的同一级元素会层层叠加，可以通过z-index来进行修改他们的位置。

粘性定位 position: sticky;
粘性定位可以像固定定位那样去基于浏览器定位，同时也可以想相对定位那样占用原有的空间不脱离文档流。