html5--6-63 布局

html5--6-63 布局

实例

学习要点

• 掌握传统布局与CSS3新增布局方式的实现和应用
• 掌握CSS3新增属性box-sizing
• 了解CSS3新增的多列布局

---

常用布局方式

• 固定布局与流体布局的优缺点

  固定布局

  注：设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。
  大多数设计者选择960或760px的固定宽度。960px最适合1024×768或者更高的分辨率，有一点空间设置margin。如果设计者想让布局适应800×600分辨率的用户，可以使 用760px的宽度，它仍然适用于更大的分辨率。

  优点：

  1. 固定宽度布局更容易使用，在设计方面更容易定制。
  2. 在所有浏览器中宽度一样,不设置min-width和max-width，来防止内容缩放引起的布局混乱。

  缺点：

  1. 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。
  2. 屏幕分辨率过小时需要垂直滚动条。

  流体布局

  流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

  优点：

  1. 流动布局页面对用户更友好，因为它能自适应用户的设置。
  2. 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

  缺点：

  1. 设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。
  2. 视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。

• 浮动布局

  根据内容是固定尺寸还是百分比有可以划分为：

  1. 流体浮动布局
  2. 固定浮动布局

• 定位布局

  根据内容是固定尺寸还是百分比有可以划分为：

  1. 流体定位布局
  2. 固定定位布局

  使用定位布局的重要知识点---设置参照基准点：

  1. 将父元素设为相对定位，且不设置坐标
  2. 如果父元素设置了相对定位，子元素的决定定位将以父元素的基准点为参照基准点

• 了解CSS3新增的多列布局

  通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

  传统布局实现多列（3列及以上）布局的问题

  1. 实现起来麻烦，很不方便
  2. 后期维护更改困难

  多列属性:

  1. columns 规定设置 column-width 和 column-count 的简写属性。
     • column-width 规定列的宽度。(该宽度为缩放时的最小宽度，默认为auto)
     • column-count 规定元素应该被分隔的列数。默认为auto
  2. column-rule 设置所有 column-rule-* 属性的简写属性。
     • column-rule-color 规定列之间规则的颜色。
     • column-rule-style 规定列之间规则的样式。
     • column-rule-width 规定列之间规则的宽度。
  3. column-span 规定元素应该横跨的列数。默认值为1，可以设置为all
  4. column-gap 规定列之间的间隔。
  5. column-fill 规定如何填充列。 主流浏览器都不支持 column-fill 属性。

• 弹性布局

  比较新的布局方式：

  优点：

  1. 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
  2. 对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。

  缺点：

  1. 正是因为第一个优点，这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试，让布局适合所有用户。
  2. 这种布局类型相对于其他两个更难制作

CSS3新增属性box-sizing

• box-sizing:属性值content-box(默认值：元素的宽高不包含边框和内边距)/border-box(元素的宽高包含边框和内边距)
• 为了适应低版本浏览器需要加前缀。