<CSS设计指南> 学习总结 -- 第三章

---

可见的页面版式主要由三个属性控制：position属性，display属性和float属性，其中，position属性控制页面上元素间的位置关系；display属性控制元素是堆叠，并排还是根本不出现在页面上；float属性提供控制方式，以便把元素组成成多栏布局。

理解盒模型

元素盒子的属性可以分为三组：

• 边框(border)。可以设置边框的宽窄，样式和颜色
• 内边距(padding)。可以设置盒子内容区与边框的间距
• 外边距(margin)。可以设置盒子与相邻元素的间距

CSS 为边框，内边距和外边距分别规定了简写属性，让你可以通过一条声明就可以完成设定。在每个简写声明中，属性值的顺序都是上，右，下，左。另外，每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你选择那边以及那条边的哪个属性。三种颗粒度从上到下是：

1. 全部3个属性，全部4条边：{border:2px dashed red;}
2. 1个属性，全部4条边：{border-style: dashed;}
3. 1个属性，1条边：{border-left-style:dashed;}， {border-right:none;}

混合使用这三种粒度的简写属性达成设计目标是很常见的

一. 盒子边框

边框(border)有3个相关属性：

• 宽度 (border-width)。可以使用thin，medium和thick等文本值，也可以使用除百分比和负值之外的任何绝对值
  
• 样式 (border-style)。有none，hidden，dotted，dashed，solid，double，groove，ridge，insert，outset等文本值
• 颜色 (border-color)。可以使用任意颜色值，包括使用任意颜色值，包括RGB、HSL、十六进制以及颜色关键字。

二. 盒子内边距

内边距是盒子内容区与盒子边框之间的距离

三. 盒子外边距

叠加外边距，垂直方向上的外边距会叠加，直到一个元素的外边距碰到另外一个元素的边框为止，这个是必须知道的一件事。叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和。

根据经验，为文本元素设置边距时通常需要混合使用不同的单位。

二. 盒子大小

没有宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框，内边距和外边距，会导致内容宽度减少，减少量等于水平边框，内边距和外边距的和。

为设定了宽度的盒子添加边框，内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

总之，设定了元素的width属性后，再给元素添加边框，内边距和外边距，元素的行为和默认的auto状态下会有截然不同的表现。

---

 浮动与清除

浮动的意思就是把元素从常规文档流中拿出来，一可以实现文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。浮动元素脱离了常规文档流之后，原来紧跟着其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。

浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳他们，它们就会并列排在一行。

浮动文档脱离了文档流，其父元素也看不到它，因而也不会包围它，有三种方式可以围住浮动子元素的方法。

• 为父元素应用overflow:hidden：overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用之后，包含元素依然保持其设定该宽度，即超大的自内容会被容器剪切掉。除此之外，另外一个作用，它能可靠地迫使父元素包含其浮动的子元素。
• 浮动父元素
• 在父元素内容的末尾添加非浮动元素，可以直接再标记中加，也可以通过给父元素添加clearfix类添加(当然，样式表中得需要相应的clearfix规则)

---

定位

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

• static：static定位提供按顺序布局元素的方式
• relative：相对的是它原来在文档流中的位置(或者默认位置)，接下来，可以使用top、right、bottom、left属性来改变它的位置，多数情况下，使用top和left就可以实现我们想要的效果了。
• absolute：绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素(在这里，是默认的定位上下文body)定位
• fixed：从完全移出文档流的角度说，固定定位与绝对定位类似。不同之处是，固定定位元素的定位上下文是视口(浏览器窗口或手持设备的屏幕)，因此它不会随页面滚动而滚动。

定位上下文：把元素的position属性设定为relative，absolute或fixed之后，继而可以使用top，right，bottom，left等属性，相对于另一个元素移动该元素的位置，这里的”另一个元素“就是指定位上下文。

绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的position设定为relative即可。

---

显示属性

display：可以通过将元素的该属性值设为inline或block来更改为行内元素或者块元素。如果设置为none，该元素以及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被”回收”，好像相关标记根本不存在一样。

visibility：这个属性最常用的值是visible（默认值）和hidden，把元素的visibility设定为hidden，元素会隐藏，但它占据的页面空间仍然”虚位以待“。