- 盒子模型
- 组成部分
从内到外:内容(content)、内边距(padding)、边框(border)、外边距(margin)
- 作用
改善网页布局
- 盒子的内容(content)
默认样式下内容宽度为其父容器的宽度,高度是内容自适应。如图:
-
盒子的内边距(padding)
内容与边框之间的空间。
- 盒子的外边距(margin)
盒子边框与相邻元素之间的空间。
- 盒子模型的定位
$.浮动(float):
1.所谓浮动就是让设置的标签产生漂浮效果,脱离文档流,其产生的效果是使后续元素的位置上移。
2.元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。
3.另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
正常的文档流效果:div为块级元素,所以一行只排一个
1号浮动,2号不浮动:1号脱离原来的文本流,后续元素往上移
1,2号都浮动:都浮动时,排在同一行,若浮动空间不够,则换行
$.Position的主要属性和对应的作用如下
static:默认值。其特点是代码中的前后位置按顺序显示,块元素独占一行,行内元素紧跟着前一个元素水平显示。
相对定位(relative):这种定位方式下元素不脱离文档流,相对自己原来的位置进行定位。继续保留它原来所占位置,不影响其后续元素的位置。
默认的定位情形
2号div相对定位的情形:相对自己原来的位置进行定位
2号相对定位,但left与top设为0
若不设置top、left等位置属性,其在布局中与默认位置相同,那为什么不设置呢?因为其最大的功能是:
相对定位了的元素可以作为其子元素的定位环境。一般relative用来做参照物(定位环境),absolute用来做定位 。
绝对定位(absolute):
1.相对于最近的有定位的父级进行定位,如果没有,那么相对于body元素来定位。
2.float属性的设置对绝对定位元素不起作用。
3.top、left等位置属性值是参照定位环境的。
3.脱离文档流,其产生的效果是使后续元素的位置上移,完全忽略绝对定位元素的存在。
默认的定位情形
1号div绝对定位的情形:相对body进行定位
菜鸟一枚,若有错误之处,还请大家指出 ^__^