web初探-css-盒模型

盒模型：

相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> margin

边框

border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

内边距

用 padding 设置内边距

外边距

用 margin 设置外边距

网页布局与盒模型

1，标准文档流

标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则；

2，块级元素 VS 行内元素

块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如

；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如 ；

盒子在标准流中的定位

1，行内元素之间的水平 margin
marin-right + margin-left

2，块级元素之间的竖直 margin
Margin-bottom margin-top 以大的为标准

3，嵌套盒子之间的 margin
子块的 margin 将以父块的内容为参考

4，margin 属性可以设置成负值

---

盒子的浮动与定位

盒子浮动 float

Float 属性
默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；

使用 clear 清除浮动的影响

Clear属性
默认是 none，允许两边都可以有浮动对象；Left： 不允许左边有浮动对象Right：不允许右边有浮动对象Both：不允许有浮动对象

盒子定位 position

Position 属性：
默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；
Fixed：固定定位，以浏览器窗口为基准进行定位；

在设置了Position属性后，然后设置偏移属性，可以有四个属性设置，right，left，top，botton

z-index 空间位置

Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

盒子 display 属性

Display：
Inline：把元素变成内联元素；
Block：把元素变成块级元素；