使用CSS制作网页布局

CSS常用布局属性如下:

  1. clear 该属性的值指出了不允许有浮动对象的边
    语法: clear:none|left|right|both
    none :允许两边都可以有浮动的对象
    both: 不允许有浮动的对象
    left: 不允许左边有浮动的对象
    right: 不允许右边有浮动的对象
  2. float 改属性的值指出了对象是否及如何浮动
    语法: float : none | left |right
    none: 对象不浮动
    left: 对象在左边浮动
    right: 对象在右边浮动
  3. clip 检索或设置对象的可视区域,区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。
    语法: clip : auto | rect ( number number number number )
  4. overflow 检索或设置对象的内容超过其指定高度及宽度时如何管理内容,设置textarea对象为hidden值将隐藏其滚动条。对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性 。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。对应的脚本特性为overflow。
    语法: overflow:hidden|auto|scroll|visible
    hidden 不显示超过对象尺寸的内容
    auto 为文本区域默认值,在显示内容超过部分自动添加滚动条
    scroll 总是显示滚动条
    visible 不剪切内容,超出的部分也不添加滚动条
  5. display 检索或设置对象是否显示及如何显示
    语法: display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table- header-group | table-row | table-row-group
    block :  CSS1 块对象的默认值。用该值为对象之后添加新行
    none :  CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    list-item :  CSS1 将块对象指定为列表项目。并可以添加可选项目标志
    run-in :  CSS2 分配对象为块对象或基于内容之上的内联对象
    table :  CSS2 将对象作为块元素级的表格显示
    table-caption :  CSS2 将对象作为表格标题显示
    table-cell :  CSS2 将对象作为表格单元格显示
    table-column :  CSS2 将对象作为表格列显示
    table-column-group :  CSS2 将对象作为表格列组显示
    table-header-group :  CSS2 将对象作为表格标题组显示
    table-footer-group :  CSS2 将对象作为表格脚注组显示
    table-row :  CSS2 将对象作为表格行显示
    table-row-group :  CSS2 将对象作为表格行组显示
  6. visibility 检索或设置是否显示对象,与display属性不同,此属性为隐藏的对象保留其占据的物理空间
    语法: visibility : inherit | visible | collapse | hidden
    inherit 继承上一个父对象的可见性
    visible 可视对象
    hidden 隐藏对象
    collapse 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。