CSS 笔记——定位尺寸

3. 定位尺寸

-> 尺寸

（1）height

基本语法

height : auto | length

语法取值

auto    :　 默认值。无特殊定位，根据HTML定位规则分配

length  :　 由浮点数字和单位标识符组成的长度值 | 百分数。

百分数是基于父对象的高度。不可为负数。

使用说明

检索或设置对象的高度。对于 img 对象来说，仅指定此属性，其 width 值将根据图片源尺寸等比例缩放。按照样式表的规则，对象的实际高度为其下列属性值之和：

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

在IE6中使用 !DOCTYPE 声明指定 standards-compliant mode

可以实现这一点。而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant 模式，以及以前的浏览器版本，对象的实际高度等于：

margin-top + height+ margin-bottom 此属性对于 currentStyle

对象而言是只读的。对于其他对象而言是可读写的。

（2）max-height

基本语法

max-height : none | length

语法取值

none    :　 默认值。无最大高度限制。

length  :　 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。

使用说明

设置或检索对象的最大高度。如果此属性的值小于 min-height 属性的值，将会被自动转设为 min-height 属性的值。

（3）min-height

基本语法

min-height : none | length

语法取值

none    :　 默认值。无最小高度限制。

length  :　 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。

使用说明

设置或检索对象的最小高度。如果此属性的值大于 max-height 属性的值，将会被自动转设为 max-height 属性的值。

在IE6中这个属性仅仅作用于固定布局的表格内的 td 对象， th 对象， tr 对象。表格的默认布局是自动计算的，要得到固定布局的表格，设置表格的

table-layout 属性的值为 fixed 。固定布局的算法比默认的自动算法要快很多。此属性对于 currentStyle

对象而言是只读的。对于其他对象而言是可读写的。设置或检索对象的最大高度。如果此属性的值小于 min-height 属性的值，将会被自动转设为 min-height 属性的值。

（4）width

基本语法

width : auto | length

语法取值

auto    :　 默认值。无特殊定位，根据HTML定位规则分配。

length  :　 由浮点数字和单位标识符组成的长度值 | 百分数。

百分数是基于父对象的宽度。不可为负数。

使用说明

检索或设置对象的宽度。对于 img 来说，仅指定此属性，其 height 值将根据图片源尺寸等比例缩放。按照样式表的规则，对象的实际宽度为其下列属性值之和：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE6中使用 !DOCTYPE 声明指定 standards-compliant 模式可以实现这一点。而在IE6中如果没有将

!DOCTYPE 声明指定 standards-compliant mode，以及以前的浏览器版本，对象的实际宽度等于： margin-left + width + margin-right 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

（5）max-width

基本语法

max-width : none | length

语法取值

none    :　 默认值。无最大宽度限制。

length  :　 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。

使用说明

设置或检索对象的最大宽度。如果此属性的值小于 min-width 属性的值，将会被自动转设为 min-width 属性的值。

（6）min-width

基本语法

min-width : none | length

语法取值

none    :　 默认值。无最小宽度限制。

length  :　 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。

使用说明

设置或检索对象的最小宽度。如果此属性的值大于 max-width 属性的值，将会被自动转设为 max-width 属性的值。

-> 定位

（1）position

基本语法

position : static | absolute | fixed | relative | sticky

语法取值

static     :　 默认值。无特殊定位，对象遵循HTML定位规则

absolute   :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。

fixed      :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative   :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

使用说明

检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外边距( margin )，但仍有内边距( padding )和边框( border )。

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

属性值说明

relative

相对定位元素的定位是相对其正常位置。

设置相对定位元素的顶部，右侧，底部和左侧属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。即：移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素参照的容器块。

根据其静态定位所在位置的某个顶点做偏移。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>possition_relative</title>

	<style type="text/css" media="screen">

	h2.pos_left {

		position: relative;

		left: -2em;

	}

	h2.pos_right {

		position: relative;

		left: 2em;

	}

	h2.pos_bottom {

		position: relative;

		bottom: 10px;

	}

	</style>

</head>

<body>

	<br><br><br>

	<h2>这是位于正常位置的标题</h2>

	<h2 class="pos_bottom">这是位于正常位置bottom的标题</h2>

	<h2 class="pos_left">这是位于正常位置left的标题</h2>

	<h2 class="pos_right">这是位于正常位置right的标题</h2>

</body>

</html>

fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。top，right，bottom 和 left 属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>possition_fixed</title>

	<style type="text/css" media="screen">

	p.pos_fixed {

		position: fixed;

		top: 30px;

		right: 5px;

	}

	</style>

</head>

<body>

	<h2>测试 possition_fixed</h2>

	<p class="pos_fixed">possition_fixed</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

	<p>Some text</p><p>Some text</p><p>Some text</p>

</body>

</body>

</html>

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。一旦一个元素被绝对定位，将离开原始队列，其原来的位置将被后续的元素占用。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>possition_absolute</title>

	<style type="text/css" media="screen">

	h2 {

		position: absolute;

		left: 100px;

		top: 150px;

	}

	</style>

</head>

<body>

	<h2>这是一个绝对定位了的标题</h2>

	<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。</p>

</body>

</body>

</html>

sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>possition_sticky</title>

	<style type="text/css" media="screen">

	div.sticky {

		position: -webkit-sticky;

		position: sticky;

		top: 0;

		padding: 5px;

		background-color: #cae8ca;

		border: 2px solid #4CAF50;

	}

	</style>

</head>

<body>

	<p>尝试滚动页面。</p>

	<p>滚动我</p>

	<p>来回滚动我</p>

	<p>滚动我</p>

	<p>来回滚动我</p>

	<p>滚动我</p>

	<p>来回滚动我</p>

	<div class="sticky">我是粘性定位!</div>

	<div style="padding-bottom:2000px">

		<p>滚动我</p>

		<p>来回滚动我</p>

		<p>滚动我</p>

		<p>来回滚动我</p>

		<p>滚动我</p>

		<p>来回滚动我</p>

		<p>滚动我</p>

		<p>来回滚动我</p>

		<p>滚动我</p>

		<p>来回滚动我</p>

		<p>滚动我</p>

		<p>来回滚动我</p>

	</div>

</body>

</html>

（2）z-index

基本语法

z-index : auto | number

语法取值

auto    :　 默认值。遵从其父对象的定位。

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

使用说明

检索或设置对象的层叠顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number

值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number

值为负数的对象在其之下。设置参数为 null 可以移除此属性。此属性仅仅作用于 position 属性值为 relative 或 absolute

的对象。

这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe

对象是窗口控件，会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Z-index</title>

	<style type="text/css" media="screen">

	img {

		position:absolute;

		left: 0px;

		top: 0px;

		width: 100%;

		z-index:-1;

	}

	</style>

</head>

<body>

	<h1>This is a heading</h1>

	<img src="背景.png" width="100" height="140" />

	<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

</body>

</html>

（3）top , right ，bottom ，left

基本语法

top : auto | length

right : auto | length

bottom : auto | length

left : auto | length

语法取值

auto    :　 默认值。无特殊定位，根据HTML定位规则在文档流中分配 。

length  :　 由浮点数字和单位标识符组成的长度值 | 百分数。

必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

使用说明

检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。

检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。

检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。

检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。

这些属性仅仅在对象的定位( position )属性被设置时可用。否则，这些属性设置会被忽略。这些属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。