CSS布局基础（CSS书写顺序 导航栏写法 常见问题）

CSS布局基础（CSS书写顺序）

1. 布局定位属性
2. 自身属性（宽高，边框，内外边距）
3. 内部文本属性
4. C3等其他属性

导航栏写法

使用 li + a 的方式实现，而不是直接写多个 a 标签

PC端网页开发一般步骤

布局的一般原则是，从大到小，也就是先确认整体布局，再对局部布局进行调整。
清除默认间距

* {margin: 0;padding: 0;
}

1. 确定主显示区
   PC端网页一般会有个中心区域展示内容，有的地方也叫版心。

.main {width: 960px;margin: 0 auto;
}
button{border: 0;
}

行内（块）元素，之间默认有空隙
解决方案：

• 浮动
• 源代码级别，将两个标签连接的字符(><SPAN＞)放在同一行
• 源代码级别，用注释连接两行，在注释中换行

2. 划分大致的区域
   一般来讲，大致分为 头部，内容区，尾部
3. 在每个大区内部再进行划分
   一般来讲，相同或相似样式的内容划分到一个盒子

容易出问题的点

• 上下外边距相遇时，会忽略较小值，直接取较大值，而不是二者之和
• 嵌套父子盒子同时设置margin-top时，子元素无效，会计算到父元素上
• 盒子浮动后，变成行内块的特性
• UI上没有明显界限的多个盒子，可酌情划分
• 盒子内图片大小，只设置一边，若同时设置宽高，可能导致图片扭曲变形
• 不定长的导航栏或者 列表，在不确定的方向上不要设置固定的宽高，由实际内容撑开