css篇如何合理有序的布局以及部分css重要特征

css的属性先后书写顺序

为了让别人在看你写的代码时不会觉得杂乱无章，而是有迹可循，为了让自己在后期想要修改某一个盒子的某一个属性的时候能够更快速的找到，我们书写css的属性时应该有一定的规范。
先后顺序应该是:
1.布局定位属性：display/postion/float/clear/visbility/overflow(建议display第一个写，毕竟关系到模式)
2.自身属性：width/height/margin/padding/border/background
3:文本属性：color/font/text-align/vertical-align/white-space/break-word
4.其他属性：（css3）：content/cursor/border_radius/box-shadow/text-shadow/background:line-gradient…等
养成一个良好的书写习惯，可以让自己的代码让别人看起来更舒服，也方便自己日后的修改。

创建页面的顺序与基本思想

为了提高网页制作的效率，布局时通常有以下的整体思路︰
1．必须确定页面的版心(可视区)），我们测量可得知。
2．分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3．一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置.页面布局第二准则
4．制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5．所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累.
在写一个网页前需要提前规划好自己的思路，以及页面的分布，想好一行放几个盒子，用到什么方法能实现目标要求，一定要先想好路线再动手。

CSS浮动

float是css样式中的定位属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
提问：为什么需要浮动呢，使用行内块也可以实现一样的界面，浮动的优点是什么呢。
回答： 在图文混排的时候可以很好的使文字环绕在图片周围 当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的：第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

CSS样式继承

文字相关的样式可以被继承 布局相关的样式不能被继承（默认不继承，可以使用inherit值让其继承）

CSS优先级

相同样式优先级 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况内部样式与外部样式 内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高单一样式优先级 style行间（权重1000）> id（权重100） > class（权重10）> tag（权重1）> 继承!important（不能针对继承的属性进行优先级的提升） 提升样式优先级，非规范方式，不建议使用 #elem{color:red !important;}标签+类与单类 标签+类 > 单类群组优先级 群组选择器与单一选择器的优先级相同，靠后写的优先级高层次优先级 权重比较、约分比较