CSS盒模型

盒模型

 

在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 : 　固定位置。

z-index:

z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的元素位于值小的上方。z-index属性的值为整数，可以是正数也可以是负数

auto : 　遵从其父对象的定位  number : 　无单位的整数值。可为负数 

 

clear:
number : 　无单位的整数值。可为负数 

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象 

 

clip:

auto : 　对象无剪切
rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

 

overflow:

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条 

 

display: none；隐藏对象，display：显示对象。

visibility：

inherit : 　继承上一个父对象的可见性
visible : 　对象可视
hidden : 　对象隐藏
collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。 

与display属性不同，此属性为隐藏的对象保留其占据的物理空间。