html盒模型向上浮动,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 垂直