CSS总结

CSS(层叠样式表)

创建css文件方式

  1. command+N新建文档输入文件名和后缀，然后保存
  2. 通过slideBar插件，右键创建
  3. 通过终端，touch+space+文件名和后缀创建

css的引入方式

1.行间样式

    <div style="color:blue;width:200px;height:200px">
        <span></span>
    </div>

优点：（1）快速定位标签（2）优先级高（3）不会额外增加请求

缺点：（1）破坏html结构（2）内容样式不分离（3）不能复用（4）冗余代码多

2.内部样式

    <head>
        <style type="text/css">
            body{
                margin:0;
            }
            div{
                width:200px;
                height:200px;
            }
        </style>
    </head>

优点：（1）不会破坏html结构（2）不会额外增加请求（3）可以实现样式复用

缺点：（1）没有完全实现内容与样式的分离（2）多个html文件之间不能复用样式文件

3.外部样式

    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>

优点：（1）不会破坏html结构（2）实现内容样式的分离（3）不会有冗余代码（4）多个html文件可以复用样式文件

缺点：（1）增加了额外请求

通过比较来看，外联式css是我们理想的选择。

css选择器

1.选择器分类

（1）标签选择器

标签名{}

作用是选择系列标签，对该系列标签进行样式设置，做不到精确设置

（2）id选择器

#id名{}

id名要唯一，可以做到精确设置，但是不能复用

（3）class类选择器

.class名{}

class名可以复用，样式可以复用

（4）后代选择器

选择器1 选择器2

（5）群组选择器

选择器1,选择器2

（6）通配选择器

*

过于暴力，不建议使用

2.选择器的优先级

    *    <        标签        <        class    <        id    <        style    <        !important
    0    <        1        <        10        <        100    <        1000    <        10000+

    后代选择器为优先级相加，群组选择器无优先级之说
  1. 相同等级的选择器，样式冲突的情况下，后面覆盖前面（以后面为准）
  2. 样式冲突的时候，谁的优先级高，就以谁为准。优先级相等，以后面为准
  3. 选择器的优先级不能跨级比较（主要针对后代选择器）

文本设置

  1. color 文本颜色

  2. font-weight 文本的粗细

  3. font-style 设置斜体：italic斜体；normal正常

  4. text-align 文本的水平方向设置：left；center；right

  5. text-decoration 文本划线位置：underline；line-through；overline；none

  6. text-indent 文本缩进：px/em

  7. vertical-align 文本和元素的垂直方向设置：top；middle；bottom
    必须配合display:table;display:table-cell使用

  8. line-height 行间距：纯数值/px

  9. direction 文本输入方向设置：ltr默认文本方向从左到右/rtl文本方向从右到左

尺寸设置

  1. width 设置容器宽度 单位：px/%/vh

  2. height 设置容器高度 单位：px/%/vh

  3. min-width 设置最低宽度 内容不足容器的宽度时，以容器宽度为准；内容宽度超出容器宽度时，以内容宽度为准

  4. min-height 设置最小高度 内容不足容器高度时，以容器高度为准

可参考上文的CSS单位。

盒模型

盒模型是一个概念，是一些css属性的集合

  1. width

  2. height

  3. padding

  4. margin

  5. 块级标签display:block

  6. 标准盒模型

  7. IE盒模型

  8. boxsizing:border-box;

  9. border：border-width 3px默认值；border-color 继承父级的字体颜色；border-style solid实线/dashed虚线/dotted点状线

背景

  1. background-color

  2. background-image:url()

  3. background-repeat:repeat-x/repeat-y/no-repeat

  4. background-position:0 0;

  5. background-size:0 0/cover自适应/contain自适应（改变后会留白）

  6. css sprite 雪碧图技术

显示与隐藏

  1. 设置display:none隐藏/block显示

  2. 设置opacity(透明度):0透明/1完全不透明

  3. 设置visibility：hidden隐藏(但还占着地方)/visible显示

float浮动

float:left;right;none

清除浮动的方法：

  1. 给浮动元素的父级设置高度（达到清除浮动的影响）

  2. 给浮动元素的父级设置overflow:hidden（达到清除浮动的影响）

  3. 给浮动元素的下方（同级）新增标签，并设置clear属性（真正的清除浮动）

position定位

position:relative/absolute/fixed

附加样式属性：left;top;bottom;right;z-index层级

  1. relative相对定位 本身没有任何改变，设置了left相关属性才会位移，一般作用于设置绝对定位元素的父级

  2. absolute绝对定位 元素本身会发生改变，尺寸由内容撑开，设置了left相关属性才会位移：（1）父级元素有position相关属性的话，该元素会以父级元素定位（2）父级元素没有position相关属性，该元素会以窗口定位

  3. fixed固定定位 元素本身会发生改变，尺寸由内容撑开，设置了left相关属性才会位移（1）一般使用场景，窗口固定位置：比如广告、回到顶部（2）固定在窗口的某个位置