一、CSS盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
二、网页布局与盒子模型
1,标准文档流
标准文档流:指在不使用其他与排列和定位相关的特殊 CSS 规则时,各种元素的排列规则;
2,块级元素 VS 行内元素
块级元素:以一个块的形式展现,跟同级的兄弟块依次竖直排列,左右撑满,比如<div>; 行内元素:以普通的一个 DOM 节点展现,跟同级的兄弟元素横向排列,排满后,自动换行,比如<span>;
三、盒子再标准流中的定位
1,行内元素之间的水平 margin
marin-right+margin-left
2,块级元素之间的竖直 margin
Margin-bottommargin-top 以大的为标准
3,嵌套盒子之间的 margin
子块的 margin 将以父块的内容为参考
4,margin 属性可以设置成负值
四、盒子的浮动与定位
1,盒子浮动 float
Float 属性: 默认是 none ,按照标准流来定位;
Left:左悬浮;
Right:右悬浮;
2,使用 clear 清除浮动的影响
Clear 属性: 默认是 none,允许两边都可以有浮动对象;
Left: 不允许左边有浮动对象
Right:不允许右边有浮动对象
Both:不允许有浮动对象
3,盒子定位 position
Position 属性: 默认是 static,按照标准流来定位;
Relative:相对定位,相对于原本的标准位置偏移指定的距离;
Absolute:绝对定位,以它的包含框为基准进行偏移;(包含框是指含有posistion属性的盒子)
Fixed:固定定位,以浏览器窗口为基准进行定位
4,z-index 空间位置
Z-index 空间位置,默认是 0,z-index 值大的页面位于其值小的上方;
5,盒子 display 属性
Display: Inline:把元素变成内联元素;
Block:把元素变成块级元素