css编码规范、空格占位符

这里我就不复制粘贴了内容了，请移步https://segmentfault.com/a/1190000002460968

 记录几个我平时不太注意的地方：

　　1.选择器与{ 之间包含空格；eg：

  .selector {}

　　2.属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格；eg:

   margin: 0;

　　3.列表型属性值书写在单行是， ，后必须跟一个空格;eg:　

  font-family:Arial, sans-serif;

　　4.当一个rule包含多个selector时，每个选择器声明必须独占一行；eg：

　　

　.post,
　.page,
　.comment {
　　　　line-height:1.5;
　}

 

　　5.选择器“>”“+”“~”的两边各保留一个空格

　　main > nav {
    　　padding: 10px;
　　}

　　label + input {
   　　 margin-left: 5px;
　　}

　　input:checked ~ button {
   　　 background-color: #69C;
　　}

　　6.属性书写顺序

　　　　布局方式、位置 > 尺寸 > 文本相关 > 视觉效果

　　　　布局方式、位置相关：position/top/right/float/display/overflow等

　　　　尺寸相关：border/margin/padding/width/height等

　　　　文本相关：font/line-height/text-align/word-wrap等

　　　　视觉效果：background/color/transition/list-style等

　　　　注意：如果包含content属性，应放在最前面。eg:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

　　7.2D位置，必须同时给出水平和垂直方向的位置，2D位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为center,为避免理解上的错误，同时给出两个方向的值较好；eg:

　　body {
   　　 background-position: center top; /* 50% 0% */
　　}

　　8.字体名称一律用英文，放在引号中，常见字体如下：

字体	操作系统	Family Name
宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
新宋体	Windows	NSimSun
仿宋	Windows	FangSong
楷体	Windows	KaiTi
仿宋_GB2312	Windows	FangSong_GB2312
楷体_GB2312	Windows	KaiTi_GB2312
新细明体	Windows	PMingLiU
细明体	Windows	MingLiU
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
苹果俪中黑	Mac/iOS	Apple LiGothic Medium
苹果俪细宋	Mac/iOS	Apple LiSung Light
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei
隶书	Windows	LiSu
幼圆	Windows	YouYuan
华文细黑	Windows	STXihei
华文楷体	Windows	STKaiti
华文宋体	Windows	STSong
华文中宋	Windows	STZhongsong
华文仿宋	Windows	STFangsong
方正舒体	Windows	FZShuTi
方正姚体	Windows	FZYaoti
华文彩云	Windows	STCaiyun
华文琥珀	Windows	STHupo
华文隶书	Windows	STLiti
华文行楷	Windows	STXingkai
华文新魏	Windows	STXinwei

　　font-family的最后指定一个字体族（serif/sans-serif）,eg：　

.article {
    font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

　　9.字号：需要在windows平台显示的中文内容分类，字号不小于12px;(由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认)

　　10.字体风格：需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。（由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。）

　　11.空位符整理

　　  == 普通的英文半角空格

　　  ==   ==   == no-break space （普通的英文半角空格但不换行）

　　　 == 中文全角空格 （一个中文宽度）

　　  ==   == en空格 （半个中文宽度）

　　  ==   == em空格 （一个中文宽度）

　　  == 四分之一em空格 （四分之一中文宽度）

　　相比平时的空格（ ），&nbsp拥有不间断（non-breaking）特性。即连续的&nbsp会在同一行内显示。即使有100个连续的&nbsp，浏览器也不会把它们拆成两行。

 　　12.css3选择器

:before ,::after 通过 css 模拟出来html标签的效果
注意：必须有content属性才行
::first-letter  选中第一个字母
::first-line    选中第一行的伪元素的选择器