CSS设计指南（第3版）第三章 定位元素

[TanXinNiao]

所谓盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子 们都要按照可见版式模型（visual formatting model）在页面上排布。可见的页面 版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中， position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并 排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多 栏布局。

[TanXinNiao]

理解盒模型

每个元素盒子的属性:  边框（border）。可以设置边框的宽窄、样式和颜色。  内边距（padding）。可以设置盒子内容区与边框的间距。  外边距（margin）。可以设置盒子与相邻元素的间距。 CSS 为边框、内边距和外边距分别规定了简写属性，属性值的顺序都是上、右、下、左,想象一下顺时针旋转就记住了 {margin:12px 10px 6px;} 对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即 10px。 {margin:12px 10px;} 只写了两个值，上和右，因此缺少的下和左就会被设定为 12px 和 10px 。 {margin:12px;} 那么 4 个边都取这个值。使用这种简写属性，不能绕开上和右，只给下和左设定值 每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及 那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。

1. 全部 3 个属性，全部 4 条边 {border:2px dashed red;}
2. 1 个属性，全部 4 条边 {border-style:dashed;}
3. 1 个属性，1 条边 {border-left-style:dashed;} 类似地，其他属性也都有这三级粒度，例如 padding 和 border-radius 等

   盒子边框

   边框（ border ）有 3个相关属性。  宽度（ border-width ）。可以使用 thin 、 medium 和 thick 等文本值，也可以使用 除百分比和负值之外的任何绝对值。  样式（ border-style ）。有 none 、 hidden 、 dotted 、 dashed（虚线） 、 solid 、 double 、 groove 、 ridge 、 inset 和 outset 等文本值。  颜色（ border-color ）。可以使用任意颜色值，包括 RGB、HSL、十六进制颜色 值和颜色关键字

[TanXinNiao]

理解盒模型

每个元素盒子的属性:  边框（border）。可以设置边框的宽窄、样式和颜色。  内边距（padding）。可以设置盒子内容区与边框的间距。  外边距（margin）。可以设置盒子与相邻元素的间距。 CSS 为边框、内边距和外边距分别规定了简写属性，属性值的顺序都是上、右、下、左,想象一下顺时针旋转就记住了 {margin:12px 10px 6px;} 对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即 10px。 {margin:12px 10px;} 只写了两个值，上和右，因此缺少的下和左就会被设定为 12px 和 10px 。 {margin:12px;} 那么 4 个边都取这个值。使用这种简写属性，不能绕开上和右，只给下和左设定值 每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及 那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。

1. 全部 3 个属性，全部 4 条边 {border:2px dashed red;}
2. 1 个属性，全部 4 条边 {border-style:dashed;}
3. 1 个属性，1 条边 {border-left-style:dashed;} 类似地，其他属性也都有这三级粒度，例如 padding 和 border-radius 等

   盒子边框

   边框（ border ）有 3个相关属性。  宽度（ border-width ）。可以使用 thin 、 medium 和 thick 等文本值，也可以使用 除百分比和负值之外的任何绝对值。  样式（ border-style ）。有 none 、 hidden 、 dotted 、 dashed（虚线） 、 solid 、 double 、 groove 、 ridge 、 inset 和 outset 等文本值。  颜色（ border-color ）。可以使用任意颜色值，包括 RGB、HSL、十六进制颜色 值和颜色关键字 注：为了看清楚 margin 和 padding 的实际效果，可以临时设定盒子 的边框。

[TanXinNiao]

盒子内边距

p {font:16px helvetica, arial, sans-serif; width:220px; border:2px solid red; background-color:#caebff;} 但这里多出来的内边距padding并没有像我们想象的那样挤压文本内容

盒子外边距

推荐大家把下面这条规则作为样式表的第一条规则：

• {margin:0; padding:0;} 这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后，所有默 认的外边距和内边距都会消失。然后，你可以为那些真正需要外边距的元素再添加外边距。

  叠加外边距

  垂直方向上的外边距会叠加 假设有 3 个段落，前后相接，而且都应用以下规则：

  p { height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px;
  margin-bottom:30px;}

  由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距 是 80 像素（50+30），但是你错啦！它们实际的间距是 50 像素。像这样上下外边距 相遇时，它们就会相互重叠(大小取决二者最大的外边距，直至一个外边距碰到另一个元素的边框。

  边距的单位

  一个段落的左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间 距，不受字号变大或变小的影响。而对于上、下外边距，以 em为单位则可以让段间 距随字号变化而相应增大或缩小 p {font-size:1em; margin:.75em 30px;} 这样，段落的垂直间距始终会保持为字体高度的四分之三（上下外边距都是 .75em ， 叠加后还是 .75em ）。如果用户增大了字号，那么不仅段落中的文本会变大，段间距 也会成比例变大

[TanXinNiao]

盒子有多大

没有宽度的盒子 如果不设置块级元素的 width 属性，那么这个属性的默认值是 auto ，结果会让元素的宽度扩展到与父元素同宽。 盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父 元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量 等于水平边框、内边距和外边距的和。 有宽度的盒子 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展 得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占 据的水平宽度。 CSS3 新增了一个 box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为。

[TanXinNiao]

浮动与清除

浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。一是可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。 浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下， 向上提升到与浮动元素平起平坐。 如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能 放下第二段，也不想让它上来），怎么办？用 clear 属性来“清除”第二段，然后它 就乖乖地呆在浮动元素下面了。

浮动

1. 文本绕排图片 为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。

<img …… />
<p>…the paragraph text…</p>
p {margin:0; border:1px solid red;}
/*外边距防止图片紧挨文本*/
img {float:left; margin:0 4px 4px 0;}

浮动非图片元素时，必须给它设定宽度，否则后果难以预料。 2. 创建分栏 在此基础上创建多栏，只要再用一次 float 属性，就这么简单。

p { float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}

浮动元素位于“文档流外部”，因而它已经不被包含在标记中的父元素之内了。正因为如此，它对布局可能产生破坏性影响。

围住浮动元素

浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这种情况有 时候并非我们想要的，本节向大家传授三种围住浮动子元素的方法。 方法一：为父元素添加 overflow:hidden 这是BFC。 方法二：同时浮动父元素

<section>
<img src="images/rubber_duck2.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
section {border:1px solid blue; float:left; width:100%; ;}
img {float:left;}
footer {border:1px solid red; clear:left;}

为了强制 footer依然呆在 section 下方，要给它应用 clear:left 。被清除的元素不会被提升到浮动元素的旁边。 方法三：添加非浮动的清除元素 就是给父元素的最后添加一个非浮动的 子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会 让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元 素——以及前面的浮动元素。 上边的案例：

section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

或者使用伪类：

<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

给每个段落加入clearfix类让每个段落清除浮动

<section>
<img src="images/rubber_duck3.jpg">
<p class="clearfix">This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p class="clearfix">This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p class="clearfix">Because the previous image's text does not…</p>.
</section>

这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用 overflow:hidden ，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显 示在其父元素区域的外部，而这恰恰是 overflow:hidden 所要阻止的。

[TanXinNiao]

定位

CSS布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规 文档流中的位置重新定位。 position 属性有 4个值： static 、 relative 、 absolute 、 fixed ，默认值为 static

静态定位

在静态定位的情况下，每个元素在处在常规文档流中。它们都是块级元素，所以就 会在页面中自上而下地堆叠起来。

相对定位

相对定位下，可以利用 top 和 left等 属性相对于元素在文档流中的常规位置重新定位 要注意，除了这个元素自己相对于原始位置挪动了一下之 外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他元素也没动。 可以给 top 和 left 属性设定负值，把元素向上、向左移动

绝对定位

绝对定位会把元素彻底从文档流中拿出来。 绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，是默认的定位上下文 body ）定位 关于定位上下文,绝对定位元素默认的定位上下文是 body 元素。

固定定位

从完全移出文档流的角度说，固定定位与绝对定位类似。 但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。

定位上下文

把元素的 position 属性设定为 relative 、 absolute 或 fixed 后，继而可以使用 top 、right 、 bottom 和 left 属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。 另外顺便一说：display 属性还有一个值有必要提一下，就是 none 。把元素的 display 设定为 none ，也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是 visibility 属性，这个属性最常用的两个相对的值是 visible （默认值）和 hidden 。把元素的visibility 设定为 hidden ，元素会隐藏，但它占据的页面空间仍然“虚位以待”。

[TanXinNiao]

背景

每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（使用background-image 属性），背景图片叠加在背景颜色之上 CSS规定以下与背景相关属性。  background-color  background-image  background-repeat  background-position  background-size  background-attachment  background （简写属性）  background-clip 、 background-origin 、 background-break （目前尚未得到广泛支持） 前景色color ，前景色既影响文本，也影响边框 repeat:比元素小的背景图片会在水平和垂直方向上重复出现，直至填满整个背景空间 控制背景重复方式的 background-repeat 属性有 4个值。默认值就是 repeat还有 repeat-x repeat-y no-repeat CSS3 还规定另外两个值（但尚未得到浏览器支持）  background-repeat:round ：为确保图片不被剪切，通过调整图片大小来适应背景区域。  background-repeat:space ，为确保图片不被剪切，通过在图片间添加空白来适应背景区域。

背景位置

background-position 属性，是所有背景属性中最复杂的。 background-position 属性同时设定元素和图片的原点。 background-position 属性有5个关键字值，分别是 top 、 left 、 bottom 、 right 和 center ，这些关键字中的任意两个组合起来都可以作为该属性的值 设定背景位置时可以使用三种值：关键字、百分比、绝对或相对单位的数值。可以使用两个值分别设定水平和垂直位置。

背景尺寸

 50% ：缩放图片，使其填充背景区的一半。  100px 50px ：把图片调整到 100像素宽，50像素高。  cover ：拉大图片，使其完全填满背景区；保持宽高比。  contain ：缩放图片，使其恰好适合背景区；保持宽高比。

背景粘附

background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动。这 个属性的默认值是 scroll ，即背景图片随元素移动。如果把它的值改为 fixed ，那么背景图片不会随元素滚动而移动。 background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印，让水印不随页面滚动而移动。

简写背景属性

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;} 声明中少写了哪个属性的值（比如没写 no-repeat ），就会使用相应属性的默认值（ repeat ）。  background-clip 。控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的。  background-origin 。控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置。比如，可以设定以内容区左上角作为原点。  background-break 。 控制分离元素（比如跨越多行的行内盒子）的显示效果

多背景图片

p {
height:150px;
width:348px;
border:2px solid #aaa;
margin:20px auto;
font:24px/150px helvetica, arial, sansserif;
text-align:center;
background:
url(images/turq_spiral.png) 30px -10px no-repeat,
url(images/pink_spiral.png) 145px 0px no-repeat,
url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}

为鼓励浏览器厂商尽早采用W3C的CSS3推荐标准，于是就产生了VSP （Vendor Specific Prefixes，厂商前缀）的概念。 就拿 W3C 推荐的 transform 属性为例，标准语法是这样的： transform: skewX(-45deg); 然而，由于这个属性还没有完全定案，为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性，应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明

-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最后是 W3C 标准属性 */

VSP 的开头是一个连字符，然后是前缀名，接着又是一个连字符，最后是 W3C 属性名。另外 要特别注意，在带前缀的属性声明之后还要声明 W3C 标准属性，以备将来有浏览器实现完整 的不带前缀的属性时派上用场。这里的 Safari 和 Chrome 都使用相同的 -webkit- 前缀，是因为 它们都使用 Webkit 渲染引擎。 以下 CSS3 属性必须加 VPS： border-image translate linear-gradient transition radial-gradient background transform background-image transform-origin

背景渐变

渐变分两种，一种线性渐变，一种放射性渐变。线性渐变从元素的一端延伸到另一端，放射性渐变则从元素内一点向四周发散。

/*例 1：默认为从上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例 2：从左到右*/
.gradient2 {
background:linear-gradient(left, #64d1dd, #fff);
}
/*例 3：左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

声明了 -45deg （deg是“度”），等于把起点从默认的中上设定到了左上。 渐变点

/*例 1：50%处有一个渐变点*/
.gradient1 {
background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);
}
/*例 2：20%和 80%处有两个渐变点*/
.gradient2 {
background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);
}
/*例 3：25%、50%、75%处有三个渐变点*/
.gradient3 {
background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,
#64d1dd);
}
/*例 4：为同一个渐变点设定两种颜色可以得到突变效果*/
.gradient4 {
background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,
#fff 75%, #e86a43);
}

放射性渐变

.gradient1 {
background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
}
.gradient2 {
background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);
}
.gradient3 {
background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,
#4947ba);
}

这里虽然只声明了 -webkit- 前缀，但带有其他厂商前缀的属性也是必要的。