CSS学习（五）——区块、浮动、定位、溢出、滚动条

区块

占据一整行的标记叫做区块。例如：

...

...

只要是区块，可以使用如下属性名称：

属性名称	设定值	说明
width	像素/百分比	区块的宽度
height	像素/百分比	区块的高度
min-height	像素/百分比	区块的最小高度
max-height	像素/百分比	区块的最大高度
min-width	像素/百分比	区块的最小宽度
max-width	像素/百分比	区块的最大宽度

下面例子可以体现区块的含义以及各种属性的意义：

  
  


  
CSS区块、浮动、定位、溢出、滚动条

  	CSS区块、浮动、定位、溢出、滚动条

    CSS区块、浮动、定位、溢出、滚动条

    CSS区块、浮动、定位、溢出、滚动条

    CSS区块、浮动、定位、溢出、滚动条

    CSS区块、浮动、定位、溢出、滚动条

    CSS区块、浮动、定位、溢出、滚动条

浮动

属性名称	设定值	说明
float	none	正常显示
	left	元件往左边浮动
	right	元件往右边浮动
clear	none	允许元件左右浮动
	left/right	不允许元件往左/右边浮动
	both	不允许元件两边浮动

往左/右边浮动的意思是：如果视窗足够宽，那么元件会尽量挤占上面的位置，与前面的元件并列显示。

注意，如果有多个元件，前面的元件使用了float属性，后面的元件如果不使用float，那么需要添加clear:both属性，否则该元件会被前面的元件覆盖。

定位 

属性名称	设定值	说明
position	relative	设置区块左上角为基准点来移动
	absolute	设置网页左上角为基准点来移动
left	像素/百分比	基准点距离左边界移动多少
top	像素/百分比	基准点距离上边界移动多少
right	像素/百分比	基准点距离右边界移动多少
bottom	像素/百分比	基准点距离下边界移动多少
z-index	数字	数字越大层级越高。

注一：position属性与margin-left/right/top-bottom属性的区别在于，position让元件在移动的过程中不影响周围其他元件的位置，不会让其他元件的位置发生变化，而margin属性在移动元件时，会让其他紧挨着该元件的元件位置也一起发生变化。

注二：设定值relative与absolute的区别在于：1.当设定为relative时，left/top/right/bottom里设置的数值是元件距离外部边框的水平或垂直距离，当设置为absolute时，left/top/right/bottom里设置的数值是元件距离外部边框左上角的斜角距离；2. 当设定为relative时，元件移动后，紧挨元件的其他元件不会占用该元件原本的位置，也即元件原本的位置仍然保留在网页上，当设置为absolute时，元件移动后，紧挨元件的其他元件会自动顶上占据它的位置。

注三：属性z-index的作用是，当position的设定值为absolute时，决定重叠的元件叠放的顺序。

例子：

  

  	
PHP100.COM中文网
  

05/11补充例子：

  

  	
复习区块
  

溢出

当对象（区块）内放置的内容溢出了对象时，可以通过以下属性自动给区块添加滚动条：

属性名称	设定值	说明
overflow	auto	在必需时对象内容才会被裁切或添加滚动条
	hidden	不显示超过对象尺寸的内容
	scroll	总是显示滚动条
overflow-x	（同上）
overflow-y	（同上）

例子：

  
  


  
CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  CSS区块、浮动、定位、溢出、滚动条
  

滚动条的外观属性

属性名称	设定值	说明
scrollbar-3dlight-color	十六进制/英文	滚动条亮边框
scrollbar-highlight-color	十六进制/英文	滚动条3D 界面亮边
scrollbar-face-color	十六进制/英文	滚动条3D 表面
scrollbar-arrow-color	十六进制/英文	滚动条方向箭头
scrollbar-shadow-color	十六进制/英文	滚动条3D 暗边
scrollbar-darkshadow-color	十六进制/英文	滚动条暗边框
scrollbar-base-color	十六进制/英文	滚动条基准颜色
scrollbar-track-color	十六进制/英文	滚动条的拖动区域