代码规范
http://www.uisdc.com/css-written-specifications
CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS书写规范
- 使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
font: font-style | font-variant | font-weight | font-size | line-height | font-family
- 去掉小数点前的”0″
- 简写命名
navigation->nav
author->atr - 16进制颜色代码缩写
#FFFFFF-> 连字符CSS选择器命名规范
不要用 _ 而用 -输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用”_”）不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。- 为选择器添加状态前缀
css 重难点
1. 单位 px em rem
- px
相对显示器的物理像素点而言
em
如果没有相对对象，则根据浏览器的字体大小相对来说，它的值是根据父元素字体大小而言的1
2
3
4
5
6body{
font-size:62.5%;
}
#main {
width:90em;
}rem
css3 新增的属性
与 em 不同的是，它的大小只相对< html>根元素而言
2. 颜色
- 颜色名
例如，red blue - rgb
rgb(255,255,255) - rgba
rgb(255,255,255,.8) - 十六进制
#FFFFFF #FFF
3. margin & padding
margin 可有 1-4 值，默认值为 0px;
- 1 个值的时候，表示 上下左右
- 2 个值的时候，表示 上下 左右
- 3 个值的时候，表示 上 左右 下
- 4 个值的时候，遵循 TRBL 规则，即 top right bottom left 上 右 下 左 的瞬时间规则。
例如：1
2
3
4margin: 20px;
margin: 10px 20px;
margin: 10px 20px 10px;
margin: 10px 20px 10px 20px ;
特殊用法：1
margin: 0 auto;
意为上下边距为 0 ，左右边距根据宽度自适应。以上写法可以达到居中的效果。(但要注意给居中的元素一个宽度，并且该元素不能浮动，否则居中无效)
padding 与 margin 设值是一样的规则，但是不能设置负值，另外如果元素背景有背景属性，则背景会覆盖内边距。
4. 盒子模型
7个属性：(margin)左右外边距，(padding)左右内边距，(border)左右边框，width，子元素加上7个属性为父元素的width属性，但 IE早期的版本包括 IE6 的浏览器中，元素的 width 属性指的是 border+padding+content
子元素不达父元素的width，左边距10px,右边距10px,若父元素减去子元素七个属性还差10px,则右边距为20px;
垂直margin:auto auto;height自动归零
能设置为auto的属性为width margin-left margin-right
上外边距与下外边距合并，以大为准,只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框、浮动框、或绝对定位框之间的外边距是不会发生叠加的
5. absolute 、 relative 与 fixed 的区别
讲到 absolute 时需要先知道文档流的概念。
简单来说，文档流是文档中可显示对象在排列时所占用的位置。
absolute
absolute 时，它会脱离原来的文档流，就好像这个元素不存在了一样，漂浮在其没有设置为 absolute 时的文档位置的地方，其他元素会占据其原来的位置。也就是说 absolute 是相对最近 position 为 relative 或 absolute 的父元素定位，默认相对与 body 定位。relative
而设置为 relative 时，元素并没有脱离文档流，这个时候给其设置 top 跟 left 值，它只会在原来位置的基础上进行肉眼上的移动，而其在文档流上的位置并没有发生改变。fixed
fixed 将元素直接以浏览器窗口为定位对象，给其设置 top 跟 left 值时，元素将相对固定在浏览器窗口的对应位置上（起点为浏览器窗口的最左上方那一个点）默认为static
6.行内元素和块级元素
以下内容来自百度
块级元素具有以下特点：
1.总是在新行上开始，占据一整行；
2.高度，行高以及外边距和内边距都可控制；
3.宽带始终是与浏览器宽度一样，与内容无关；
4.它可以容纳内联元素和其他块元素。
行内元素的特点：
1.和其他元素都在一行上；
2.高，行高及外边距和内边距部分可改变；
3.宽度只与内容有关；
4.行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
值得一提的是，块级元素可以通过设置为 display: inline-block; 使其可以在行内容纳其他行内元素。
以下链接记录了哪些是行内元素，哪些是块级元素
http://q.cnblogs.com/q/36975/
7.居中
margin和width实现水平居中
容器上定义一个宽度，然后配合margin的左右值为“auto”实现
inline-block实现水平居中方法
利用父元素设置 text-align:center; 这一个除了对内容文本居中外，对子元素的居中也起作用浮动实现水平居中的方法
利用 position
http://www.w3cplus.com/css/elements-horizontally-center-with-css.html绝对定位实现水平居中
1
2
3
4
5
6.ele {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}
当不知道元素宽度时可以结合一下浮动实现的方法
- css3 的 flex 实现水平居中方法、CSS3的fit-content实现水平居中方法等
https://css-tricks.com/centering-css-complete-guide/
8.布局
基本概念：定位、浮动、外边距操纵
常见的布局
两栏布局
left+right三栏布局
- 两栏基础上
- 左右两栏宽度固定，中间自适应
固定布局
固定尺寸，只有当设计的宽度是不变的时候用固定布局最简便
缺点： 分辨率低的在分辨率高的显示器上面显示，设计会缩小并且出现在屏幕中间；分辨率高的设计在分辨率低的显示器上面显示会出现滚动条，行长与文本易读性问题等等
而下面说的流式布局、弹性布局可以解决这些问题流式布局
尺寸用百分比而非像素，视情况对较小窗口设置以 em 为单位的最大宽度等等
弹性布局
em为单位，老式的浏览器进行页面缩放可能还需用到
css3 列
css3 也可以创建等高文本列，可以通过，column-count column-width 和 column-gap 来完成，但是目前浏览器对 css3中的列支持还不广泛。flex 布局
flex 布局又属于弹性布局的一种，依赖 display属性 + position属性 + float属性。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool另外一提，margin 负值在布局上面也是有很多作用的
9.选择器优先级
优先级从高到低排序如下：
1.在属性后面使用 !important 的优先级最高，它会覆盖页面内任何位置定义的元素样式（不支持 IE6）
2.在html中给元素标签加 style ，但不符合结构与样式分离的原则，故不推荐使用
3.id选择器
4.类选择器、属性选择器、伪类选择器定义（伪类概念：http://www.w3school.com.cn/css/css_pseudo_classes.asp）
5.类型选择器
6.通配选择器