CSS（4）网页布局

CSS属性推荐的书写顺序

布局定位相关属性

display / position / float / clear / visibility / overflow

自身相关属性

width / height / margin / padding / border / background

文本相关属性

color / font / text-decoration / text-align / vertical-align / white-space / break-word

其他属性（CSS3）

content / cursor / border-radius / box-shadow / text-shadow/等

页面布局整体思路

确定页面的版型，可视的区域

第一准则：先分析行模块（标准流），以及每个行模块中的列模块

第二准则：一行中的列模块经常浮动布局，先确定列的大小再确定列的位置

如果子元素使用绝对定位（不会占有位置，在父盒子里放在任何一个地方不会影响兄弟盒子），父元素需要使用相对定位（占有位置），不是绝对的。

注意：

制作HTML结构，先有结构，后有样式

先理清布局结构，再写代码

注意类名要有语义化，不是随便起

布局方式：

标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

浮动：可以让多个块级盒子一行没有缝隙左右对其排列显示，经常用于横向排列盒子。

定位：最大的特点是有层叠的概念，可以让盒子前后叠压来显示。可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

命名

header 头部盒子

content 内容盒子

footer 底部盒子

nav 导航

sidebar 侧栏

column 栏目

wrapper 版区宽度

left 左

right 右

center 中

loginbar 登陆条

logo 标志

banner 广告

main 主体

hot 热点

news 新闻

download 下载

subnav 子导航

search 搜索

friendlink 友情链接

user 个人信息

prev 轮播图左箭头，上一页

next 轮播图右箭头，下一页