HTML5盒模型、浮动和定位

在此之前我们先了解一下块级元素和行内元素的区别
一、块级元素
1、总是从新的一行开始
2、高度、宽度都是可控的
3、宽度没有设置时，默认为100%
4、块级元素中可以包含块级元素和行内元素
二、行内元素
1、和其他元素都在一行
2、高度、宽度以及内边距都是不可控的
3、宽高就是内容的高度，不可以改变
4、行内元素只能行内元素，不能包含块级元素
三、盒模型
1、盒模型简单示意图
边框border： 宽度 px 、 边形 ： solid实线、 dotted 圆点 、dashed虚线 、 none 没有边框 。
外边距margin：可以通过上top、 下bottom 、左left、右right，单位像素px。
内边距padding：可以通过上top、 下bottom 、左left、右right，单位像素px。

2、盒模型的一些问题
（1）BFC 块级元素的一个规则，块格式化上下文（Block Formatting Context，BFC）
百度去吧这个说不明白。
（2）外边距重叠 BFC —> 导致父盒子随着子盒子走 父盒子拥有子盒子的上外边距属性
1：解决：
(1) 父盒子设置上边框 border-top:1px solid orange
(2)父盒子设置内边距 padding-top:1px
(3)overflow:hidden 溢出的隐藏
2：避免：设置父盒子内边距 ，而不是子盒子的外边距 ， 优先： 内边距 > 外边距
（3）margin : 10px 四面外边距值一样
margin: 10px 20px 左右外边距为20px 上下外边距为10px
margin: 10px 20px 30px 10px 上外边距 20px 左右 30px 下
margin: 10px 20px 30px 40px 上右下左
盒子水平居中：
margin: 0 auto; 上下0 左右auto 浏览器自己去算
水平居中只适合于块级元素 ,伪元素:before,:after是行内元素，想要实现的话需要加display:block;
（4）溢出隐藏
overflow:hidden
当子盒子超出了父盒子的范围，可以在父盒子里用overflow:hidden来隐藏
前后效果图


四、浮动
浏览器默认展示的元素的位置 ————>标准流
不浮动就是标准流，如图4个盒子

浮动 float : left /right /none 默认
并排必须同时加浮动属性 ——————> 破坏标准流 ，浮动流，如图

五、定位
定位position
left：10px 当前定位元素相对于参考物左边界的距离 x
top： 10px 当前定位元素相对于参考上边界的距离 y
right：10px 右边界
bottom ：10px 底边界
静态定位： static
静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。
相对定位： relative
如果想为元素设置层模型中的相对定位，需要设置position:relative;，自己最初的位置做参考发生位置移动
，没有脱标 ，只是发生移动，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
固定定位： fixed
如果想为元素设置层模型中的固定定位，需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。比如我们准备一长串的文字，让文字超出一屏的宽度，设置浮动元素div的left和top为100px，拖动浏览器的滚动条，浮动元素div的位置不会发生变化。
绝对定位：absolute
如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，滚动条滚动，固定定位元素位置发生改变，不保留原来位置 ——>脱标，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
z-index 定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意：元素可拥有负的 z-index 属性值，Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

颜色
opacity: 0-1 小数 0 完全透明 1代表实色 数值越小越透明
opacity: 盒子里的内容都变透明
background-color:rgba(0,0,0,.2);rgba() 仅仅只是盒子背景透明
背景
背景属性 background
颜色 background-color
background-image: url(“img/ms.jpg”);引入背景图片地址
background-repeat: no-repeat;背景图片是默认平铺的，用no-repeat表示不平铺
background-position: 方位值，left 、top 、right 、bottom、center、x 水平 、y 垂直