css知识

首先：

小小感想：在进行web后端开发，或者其他业务开发时，通常要做原型系统，需要自己去写前端。传统电商业务前后端分离得比较明显，分工比较明确，但大多数业务处理中，都是需要自己写原型系统的，然后再和前端交互，所以即便不是做前端，也需要看懂前端的html css js 等界面的东西，需要在这方面做一些积累

本以下转载，非原创（用于记录）

背景

CSS是一种声明式的语言，学好CSS的难度甚至大于学好一门服务器语言（我个人的感觉），这周在学习CSS，就记录一下学习经验。

1、规则声明顺序

因为CSS的样式具备层叠性和继承性，为了最小化代码量，规则的声明可以按照如下顺序：

1. 常用标记
2. 常用类
3. 布局类
4. 导航类
5. 表格类
6. 表单类
7. 组件类

2、盒子模型、文档流、定位和浮动一定要清楚

• 盒子模型：浏览器把每种标记都当做一个盒子，有两种盒子（内联和框），他们在文档流中的布局模式是不同的。
• 文档流：框盒子会被从上到下的布局，内联盒子会被从左到右、从上到下的布局。
• 定位：可以修改框盒子的定位方式，static（正常的文档流中的位置）、absolute（相对于最近一个被定位（非static定位）了的祖先元素的位置，脱离了文档流）、relative（相对于正常的文档流的位置，保留原来的位置）、fixed（相对于窗口，脱离了文档流）。
• 浮动：浮动会导致元素脱离文档流，元素会浮动到父亲元素的边缘或其它浮动元素的边缘，如果遇到空间不够就会下降寻找足够的空间，浮动一般伴随着清除，清除会让元素的左右没有任何浮动元素。

教程：http://www.w3school.com.cn/css/css_positioning.asp。

3、利用伪元素清除浮动

1 .clear-fix:after2 {3     content: ".";4     clear: both;5     display: block;6     height: 0;7     visibility: hidden;8 }

教程：http://www.w3school.com.cn/css/css_pseudo_elements.asp。

4、margin可以支持负数

Bootstrap中的栅格系统就用了这个特性，row的margin-left为-20px，span*的margin-left也为20px，这样就抵消了第一个span的margin。

教程：http://www.w3school.com.cn/css/css_margin.asp。

5、属性选择器

1 [class*="span"] {2      float: left;3      min-height: 1px;4      margin-left: 20px;5 }

教程：http://www.w3school.com.cn/css/css_selector_attribute.asp。

6、相邻兄弟选择器

 1 .main-content 2 { 3     background: url("../Images/accent.png") no-repeat; 4     padding-left: 10px; 5     padding-top: 30px; 6 } 7  8 .featured + .main-content 9 {10     background: url("../Images/heroAccent.png") no-repeat;11 }

教程：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp。

备注

CSS不好学习，还是需要专门的人员来做，后端懂点CSS有利于更好的合作。