日期:2014-05-16  浏览次数:20650 次

CSS 定位和布局常用标签

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 定位

? ?1,定位方式 ?position ? ?

? ? ? ? ? ? ? static(默认值):对象遵循常规流,top,right,bottom,left等属性不会被应用;

? ? ? ? ? ? ? relative:对象遵循常规流 ?top,right,bottom,left等属性会被应用,在应用时 他的偏移不会影响流中任何元素;

? ? ? ? ? ? ? absolut :不遵循常规流,通过用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。

? ? ? ? ? ? ?center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义;

?

?

? ?2,层叠顺序z-index

? ? ? ? ?auto:遵从其父对象的定位

? ? ? ? ?<integer>:用整数值来定义堆叠级别。可以为负值。 ? ? ?

? ? ? ? 注:这个值必须是在对象脱离常规流是才会生效

?

? ?3,top ?right ?botton left

?

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 布局

?

?1,display ? 设置对象是否显示 该如何显示

? ? ? ? ? ? ? ? ? ? ?如果该对象隐藏,那么不会为该对象预留物理区域;

?

?2,设置对象是否显示?visibility ??

? ? ? ? ? ? ? ? ? ? ??visible:设置对象可视

? ? ? ? ? ? ? ? ?hidden:设置对象隐藏? ? ? ? ? ? ? ? ?collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
? ? ? ? ? ? ? ? ? 注:如果影藏对象 ? 那么还会为对象预留物理空间

?3,folat ?设置浮动

? ? ? ? ? ? ? ?none:设置对象不浮动

? ? ? ? ? ? ? ?left:设置对象浮在左边? ? ? ? ? ? ? ?right:设置对象浮在右边?

?4,浮动控制器 clear

? ? ? ? ? ? ? ??none:允许两边都可以有浮动对象

? ? ? ? ? ? ? ? both:不允许有浮动对象? ? ? ? ? ? ? ? left:不允许左边有浮动对象? ? ? ? ? ? ? ? right:不允许右边有浮动对象? ? ? ? ? 注:用来设置folat是否有效的

5,用来设置高和宽超过指定尺寸时的处理方式 ?overflow? ? ? ??

visible:不剪切内容。
hidden:将超出对象尺寸的内容进行裁剪,将不出现滚动条。
scroll:将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto:在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
no-display:当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。
no-content:当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?常用标签margin外部距离 ? padding内部距离 ?border边框(宽度 ?样式 ?颜色)