css阶段总结（常用的）

1、常见的标签
    >> h1~h6：
      标题标签，效果是加粗和字体大小的变化。

    >> p：
      段落标签，主要用于文本展示。

    >> div：
      块级标签，没有意义的标签，一般用于布局。

    >> span：
      文本标签，没有意义的标签，一般用在需要突出显示文字的时候。

 2、超链接
    <a></a>
    >> href 属性
      清除a标签的下划线：text-decoration: none;
      默认进行链接跳转，设置跳转地址的时候必须加上 http 或者 https。
      * 超链接 <a href="http://www.baidu.com">百度</a>
      * 执行 JS 代码 <a href="javascript:alert(123);">执行 JS 代码</a>
      * 打电话 <a href="tel:13562698714">打电话</a>
      * 发短信 <a href="sms:13562698714">发短信</a>
      * 发邮件 <a href="mailto:fay@163.com?subject=邮件主题&bodu=邮件内容">发送邮件</a>
    >> title（绝大部分标签都有该属性）
      鼠标停留在该标签上时，会显示的文字。
    >> target：
      一般用于链接跳转，代表当前打开的链接在什么位置显示。
      _blank：在新标签页打开；
      _self：在当前标签页打开；
      _top：在顶层窗口打开；
      _parent：在窗口打开；

3、图片
    <img> 或者 <img />
    >> src：图片地址。
      >>> 绝对地址：
        http://www.baidu.com
        c:/
      >>> 相对地址：
        * 兄弟关系：图片名.后缀名
        * 文件与图片的父级是同级：图片所在文件夹名/图片名.后缀名
        * 文件父级与图片同级：../图片名.后缀名
        * .. 代表返回上一级
    >> alt 
      图片无法展示的时候显示的文字信息。

4、实体符号
    空格：&nbsp;
    大于符号：&gt;
    小于符号：&lt;
5、列表
    >> 有序列表
      <ol>
        <li></li>
      </ol>
    >> 无序列表
      <ul>
        <li></li>
      </ul>
      type：disc、circle、
    >> dl、dt、dd
    清除li前面的小圆点：list-style: none;

6、 标签嵌套规则
    * 原则上块级标签可以嵌套块级标签和内联标签；
    * 内联标签原则上只能嵌套内联标签；
    * p 和 h1~h6 只能嵌套内联标签；
    * ul 和 ol 只能嵌套 li，li 可以嵌套任意标签；

7、 HTML5 新增了一些语义化标签
    header：用于定义文档或者章节的头部。
    nav：用于定义导航链接部分
    footer：用于定义文档或者章节的底部
    article：用于定义文档的文章（帖子、新闻、博客）
    section：用于定义一个文档的章节
    aside：用于定义与当前页面文章内容无关的附属信息
    address：用于地址

8、
表格
   涉及标签
    table：用于定义表格
    caption：用于定义表格标题
    th：定义列标题，文字自动居中并且有加粗效果
    tr：定义行
    td ：定义单元格

9、表单元素
    >> form
    >> input
      >>> type：
        * text：普通文本输入框
        * passord：密码框
        * radio：单选框同一个组的单选项需要相同的 name 属性值，设置 checked 属性默认选中
        * checkbox：多选
        * file：上传按钮
      >> placeholder：提示占位符
      >> value：输入框的值，输入框的数据
    >> label
      * for 属性：该属性值为表单元素的 id
      提示：id 是所有标签都有的一个属性，并且该值唯一。
    >> textarea
      文本域
    >> select & option
      下拉选择框
    >> button
      type：
        button
        reset
        submit（提交）

10、字体属性
  >> font-size: 大小(px);
    设置字体大小。
  >> font-style: normal | italic;
    字体样式（斜体）。
  >> font-weight: 400;
    加粗，值为 100 到 900 之间的正数。或者 bold、lighter 等。
  >> font-family: 字体;
    使用安全字体。
    多个单词和中文字体要打引号，多个字体之间通过逗号分开。
  >> line-height: 大小;
    行高。

11、background：设置背景
    background-color: 颜色代码;
    background-image: url(图片地址);
    background-repeat: no-repeat; 背景图不重复出现
    background-size: 设置背景图大小
      * contain：其中一边与盒子一样大，另一边等比例缩放；
      * cover：等比例放大图片，一直到最短边与盒子一样大，必然会导致场边会被裁剪；

    background-position: center; 背景图定位

12、padding 的写法
    padding：四边的大小
    padding-left
    padding-right
    padding-toppadding-bottom
    padding: 10px 20px; 上下padding为10px，左右为20px
    padding: 10px 20px 30px; 上为 10px，左右为 20px，下为30px
    padding: 10px 20px 30px 40px; 上右下左分别为 10px 20px 30px 40px

13、overflow
  当内容超出元素范围后，应该如何处理。
  visible：超出后依然显示；
  hidden：超出的内容会被隐藏掉；
  scroll：无论是否超出都会显示滚动条，超出内容通过滚动条查看；
  auto：内容超出后就会出现滚动条；

14、display
  用于决定当前元素表现的特性。
  inline：
    当前元素表现为内联标签的特性。
    * 无法设置宽高，大小由内容决定。
    * 可以设置水平方向 margin、padding、border；
    * 垂直方向 padding、border 会遮挡其他元素；
  block：
    块级标签的特性。
    宽度默认父元素 100%，独占一行
  inline-block：
    * 不会独占一行；
    * 可以设置宽高、margin、padding、border
  table-cell：
    单元格的特性。

15、float: left | right;
清楚浮动的通用代码（挺好用）
.clear::before,
.clear::after {
  display: table;
  content: '';
}
.clear::after {
  clear: both;
}

16、定位
    relative
  >> 语法：
    position: relative;
    坐标点：left || right + top || bottom
    相对于自己原来的位置。
    没有脱离文档流。
    absolute
  >> 语法：
    position: absolute;
    left || right: 数值;
    top || bottom: 数值;
    绝对定位会脱离文档流；
    如果当前元素的所有祖先级元素都没有定位，则相对于浏览器当前可视窗口进行定位；
    如果祖先级元素有定位，则相对于有定位的祖先级元素进行定位；
    定位边界点包含 padding，不包含margin、border。
    fixed
  >> 语法：
    position: fixed;
    left || right: 数值;
    top || bottom: 数值;
    定位相对于浏览器可视窗口，并且不会随着浏览器滚动条的改变而改变位置。 
     z-index
  该属性用于决定定位元素（绝对、相对、固定）的层级关系，如果没有定位，则该属性不生效的。

  问题：
    一个元素有定位，并且设置了一个很大的z-index 的值，但是依然被一个元素遮挡住了。

    解决办法：提高父元素的 z-index。

17、css样式文件的命名（我用过的）
     　　头：header
     　　内容：content/containe
     　　尾：footer
     　　导航：nav
     　　侧栏：sidebar
     　　栏目：column
     　　左右中：left right center
     　　登录条：loginbar
     　　标志：logo
     　　广告：banner
     　　页面主体：main
     　　热点：hot
     　　新闻：news
     　　下载：download
     　　子导航：subnav
     　　菜单：menu
     　　子菜单：submenu
     　　搜索：search
     　　滚动：scroll
     　　内容：content
     　　标签页：tab
     　　文章列表：list
     　　提示信息：msg
     　　小技巧：tips
     　　服务：service
     　　注册：regsiter
     　　状态：status