CSS盒模型
浏览数：66 /
时间：2015年06月09日
盒模型
在CSS中，一个独立的盒子模型content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。
一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。设置边框样式
border-style
border-width
border-color
padding又称为内边距，
用于控制内容与边框之间的距离。
padding属性可以设置1、2、3、4个属性值，分别如下：
设置1个属性值时，表示上下左右4个padding均为该值。
设置2个属性值时，前者为上下padding的值，后者为左右padding的值。
设置3个属性值时，第1个位上padding的值，第2个为左右padding的值，第3个为下padding得值。
设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。
设置外边距(margin)
margin指的是元素与元素之间的距离。
margin属性值的设置方法与padding一样，也可以设置不同的数值来代表相应地含义。
<div>标记与<span>标记
div标记早在HTML4.0之前就已经出现，但那时并不常用，直到CSS的普及，才逐渐发挥出它的优势。span标记在HTML4.0时才被引入，它是专门针对样式表而设计的标记。
div简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。
一个ul是一个块级元素，同样div也是一个块级元素，二者的不同在于ul是一个具有特殊含义地块级元素，具有一定的逻辑语义，而div是一个通用的块级元素，用它可以容纳各种元素，从而方便排版。
<span>标记与<div>标记一样，作为容器标记而被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素。如果把div换成span，执行后的效果完全一样。可以说<div>和<span>这两个标记起到的作用都是独立出各个区块，在这个意义上说二者没有不同。
二者的区别在于div是块级元素，它包含的元素会自动换行。而span是内嵌元素，不会换行。
行内元素之间的水平margin
当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
块级元素之间的垂直margin
当两个块级元素是垂直排列，则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。这种现象称为合并，意思是说较小的margin合并到了较大的margin中。
盒子的浮动
float：如果设置为left/right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面内容的宽度确定。
position：static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，top，right，bottom，等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 固定位置。
absolute : 将对象从文档流中拖出，使用left，top，right，bottom，等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 固定位置。
z-index:
z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的元素位于值小的上方。z-index属性的值为整数，可以是正数也可以是负数
auto : 遵从其父对象的定位 number : 无单位的整数值。可为负数
clear:
number : 无单位的整数值。可为负数
number : 无单位的整数值。可为负数
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
clip:
auto : 对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
overflow:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
display: none；隐藏对象，display：显示对象。
visibility：
inherit : 继承上一个父对象的可见性
visible : 对象可视
hidden : 对象隐藏
collapse : 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。
visible : 对象可视
hidden : 对象隐藏
collapse : 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
