CSS布局基础（CSS书写顺序 导航栏写法 常见问题）
CSS布局基础（CSS书写顺序 & 导航栏写法）
- CSS布局基础（CSS书写顺序）
- 导航栏写法
- PC端网页开发一般步骤
- 容易出问题的点
CSS布局基础（CSS书写顺序）
- 布局定位属性
- 自身属性（宽高，边框，内外边距）
- 内部文本属性
- C3等其他属性
导航栏写法
使用 li + a 的方式实现，而不是直接写多个 a 标签
PC端网页开发一般步骤
布局的一般原则是，从大到小，也就是先确认整体布局，再对局部布局进行调整。
清除默认间距
* {margin: 0;padding: 0;
}
- 确定主显示区
PC端网页一般会有个中心区域展示内容，有的地方也叫版心。
.main {width: 960px;margin: 0 auto;
}
button{border: 0;
}
行内（块）元素，之间默认有空隙
解决方案：
- 浮动
- 源代码级别，将两个标签连接的字符(><SPAN＞)放在同一行
- 源代码级别，用注释连接两行，在注释中换行
- 划分大致的区域
一般来讲，大致分为 头部，内容区，尾部 - 在每个大区内部再进行划分
一般来讲，相同或相似样式的内容划分到一个盒子
容易出问题的点
- 上下外边距相遇时，会忽略较小值，直接取较大值，而不是二者之和
- 嵌套父子盒子同时设置margin-top时，子元素无效，会计算到父元素上
- 盒子浮动后，变成行内块的特性
- UI上没有明显界限的多个盒子，可酌情划分
- 盒子内图片大小，只设置一边，若同时设置宽高，可能导致图片扭曲变形
- 不定长的导航栏或者 列表，在不确定的方向上不要设置固定的宽高，由实际内容撑开