网页设计的两个流派
- fixed-width
- liquid 液体的、流式
responsive web design 则为第三个流派。针对不同屏幕尺寸采用不同的布局 (media query)。例如，PC 上使用 fixed-width, 移动设备上使用 liquid.
fixed-width 常见的宽度是 960, 以便于支持 1024*768 分辨率的屏幕。
早期的 table 排版方式，相对于如今的 div 方式最大的劣势就是没法使用一套代码兼容移动设备，即，采用 liquid 方式是不可能的。
div 内部排版
padding-left & padding-top
使用 HTML5 引入的语义化标签
我的理解是，不会对排版带来任何便利性，主要是帮助新的浏览器、应用内置 web view 解析网页内容。例如，如何通过 article 找到网页内的 article.
内容为王
设计开始之前，首先要确保用户想看到的内容能够合理的展示出来，然后再追求效果。有用、好用、有趣，按照这个优先级来设计。
Mobile First
- 移动设备的排版相对简单
- 移动设备已经占据了绝大多数用户的业余时间
- SEO 相对容易很多。因为旧的网站，很多没有继续维护，但是仍然占据 PC 搜索的首页位置。而移动端则保证大家在同一个起跑线。更可喜的是，很多手机应用内置了自己的搜索功能，例如，新浪微博、twitter、微信、facebook、pinterest 是我们打破既有搜索格局的好契机。
Float-based Layout
.sidebar {
float: left;
width: 25%;
}
一个简单的 sidebar 就实现了。
需要注意的是，无论是 float left 还是 float right, float 的部分，在代码中始终需要写在并行的非 float 部分前面。
同样，三栏式布局，也是 float left, float right, main 这样的代码顺序。
无论是二栏式还是三栏式，建议，sidebar 设置宽度，main 部分不设置宽度。
当然，如果是多栏式，可以将所有 column 都设置成 float left， 但是这种情况下, main section 就需要设置宽度了。同时需要注意，宽度的总和不能超过页面的宽度，否则会被挤下去。
优雅地清理 float
在包含 float 元素的 div 底部加入
<br style="clear: both;"/>
当然还有更优雅的方式，不改变 HTML 的结构
.clear:after {
content: " ";
display: table;
clear: both;
}
这样只需要在包含 float 元素之上 add class clear 即可。
可见，在同级 float 外层加个 wrapper 还是很有必要的。
box-sizing
- content-box 浏览器默认模式。css width 只是限制了 content 的宽度，并没有包含 padding, margin, border. 所以渲染之后，实际宽度为 content width + padding + margin + border
- padding-box 已废弃，勿使用。
- border-box css width 包含了 content, padding, border, 但是不包含 margin
的确，border-box 更好理解一些。好多激进的人，直接这样干了
* {
box-sizing: border-box;
}
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式