CSS-第五天（B站黑马程序员）

这节的主要内容是完整地编写一个网页，对前几天学习的知识进行一个综合应用。以下是实践过程中需要注意的要点和遇到的问题。

一、CSS书写的顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

二、页面布局的整体思路

1. 必须确定页面中的版心，可以测量得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。
4. 制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要。
5. 所以，要先清楚布局结构，再写代码。这尤其重要。

三、导航栏注意点

实际开发中，我们不会直接用链接a，而是用无序列表li包含链接（li+a）的做法。

1. li+a语义更加清晰，一看这就是有条理的列表型内容。
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键词嫌疑（故意堆砌关键词容易被搜索引擎降权），从而影响网站排名

注意：

1. 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
2. 导航栏不设置宽度，将来可以继续添加其余文字。
3. 导航栏的文字长度不一样，不设置宽度，而是设置padding撑开。

四、遇到的各个问题

1. 表单元素button默认有边框，要记得去掉
2. 浮动的盒子不会有外边框塌陷的问题
3. line-height行高是会继承的
4. 一排具有左右外边距的盒子放不下最后一个时，修改宽度即可
5. 一浮都浮
6. 当上下大盒子中的元素都浮动，下面的浮动盒子跑到上面的大盒子中去时，记得检查上面大盒子是否设置高度；不想设置高度时，就要记得清除浮动。