CSS样式知识点（书写规范、样式重置、清除浮动）

d# 样式的书写顺序
------- 样式可以简单的分为四大类，分别是”显示样式“，“自身样式”，“文本样式”，“css新样式”

• 显示样式：控制元素展示方式的属性，主要包括：float,posititon,display,overflow,visibility等
• 自身样式：关于元素自身的样式属性，主要包括：width,height,margin,padding,border等
• 文本样式：用于处理背景图片，段落文章，文字字体样式
• css新样式：css新增的属性

在编码时建议遵循“显示样式–>自身样式–>文本样式–>兼容及css新样式”的顺序编写，因为浏览器在解析时，是按照“显示样式–>自身样式–>文本样式”的顺序执行的。

完整的顺序推荐：

• display
• position
• left, * * * z-index
• float
• clear
• width
• height
• margin
• padding
• border
• background
• color
• font
• text-decoration
• text-algin
• vertical-algin
• white-space
• text-xxxx
• css3类

---

样式重置（来源网络，作为参考）

    @charset "utf-8";
    /* ----------------------------------------
    reset.css
    author:geduo
    Description: CSS样式重置代码
    Version 1.0, 2012-10-18
    ----------------------------------------- */
    /* 防止用户自定义背景颜色对网页的影响 */
    html { color: #333333; background: #fff; }
    /* 始终不显示滚动条 */
    body { overflow-x: hidden; /*隐藏水平滚动条*/ }
    /* 内外边距重置 */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
    body, button, input, select, textarea { font-family: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; word-wrap: break-word; color: #333333; }
    input, select, textarea { font-size: 100%; }
    div:focus { outline: none; }
    /* 去掉各Table  cell 的边距并让其边重合 */
    table { border-collapse: collapse; border-spacing: 0; }
    /* IE bug fixed: th 不继承 text-align*/
    th { text-align: inherit; }
    /* 去除默认边框 */
    fieldset, img { border: 0; }
    /* ie6 7 8(q) bug 显示为行内表现 */
    iframe { display: block; }
    /* 去掉 firefox 下此元素的边框 */
    abbr, acronym { border: 0; font-variant: normal; }
    /* 去掉列表前的标识, li 会继承 */
    ol, ul, li { list-style: none; }
    /* 左对齐排版 */
    caption, th { text-align: left; }
    /* 让标题都自定义 */
    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
    q:before, q:after { content: ''; }
    /* 让链接在 hover 状态下不显示下划线 */
    a:hover { text-decoration: none; }
    a:visited { color: #333333; }
    /* 默认不显示下划线 */
    ins, a { text-decoration: none; }
    /* button的cursor属性 */
    button, a { outline: none; cursor: pointer; }
    /*hr统一样式*/
    hr { height: 1px; border: none; border-top: 1px solid #CCCCCC; }
    /*常用属性*/
    .clear{ clear:both}
    .left{ float:left}
    .right{ float:right}

after伪类清除浮动

.clearfix:after{
	content: '\200B'; /* \200B,表示一个零宽度的空格*/
	clear: both;
	display:block;
	height:0;
}
.clearfix{
	*zoom:1;
}

度量单位

• ch字符0(零)的宽度;
• rem——根元素(HTML元素)的font-size;
• vw——viewport width,视窗宽度,lvw等于视窗宽度的1%
• vh——viewport height,视窗高度,lvh等于视窗高度的1%;
• vmin——vw和vh中较小的那个。

小知识点汇总

• a标签嵌套时，要先将其转换为块元素，或开启浮动。
• img下3~5像素的空隙，通过转换块元素除去
• IE低版本元素透明 filter:alpha(opacity = 0~100);
• text-algin: justify :文本俩段对齐