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 轮播图右箭头,下一页