前言

前端三大法宝之一CSS，当掌握了以下知识，基本控制HTML的表现可就不会再出现各种莫名其妙的问题啦~

层叠样式表cascading style sheet

• 嵌入式样式

  将style当做元素的属性, 将所有样式写在style中, 只对当前元素起作用, 不方便复用, 不推荐使用

• 内联样式

  在内部引入style标签

• 外联样式

  从外部引入style标签, 可以利用浏览器缓存加快用户访问速度, 最推荐使用, link原本的目的是用来链入外部文档，用rel(relation)表示当前文档与外部文档之间的关系

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

基本规则与定义

• 选择器

  使用选择器语法选择相应的元素

• 声明块

  使用{}, 为名值对结构, 不同声明使用;来分隔, 名值之间使用:来连接

• 元素类型

  • 块元素

    独占一行的元素, 无论内容多少都一定独占一行

    如div, h1, h2…, p, br等

    div没有语义, 仅仅为了设置一个块元素

  • 内联元素

    只占自身大小的元素, 不会占用一行

    如span,a,img,iframe

    span没有语义, 仅仅用来设置一个内联元素

• 一般情况下使用块布局, 使用内联元素修改样式并且使用块元素包含内联元素

• a元素可以包含任何元素但不能包含本身

• p元素不能包含任何块元素

• 元素之间的关系

  父元素

  子元素

  祖先元素

  后代元素

  兄弟元素

选择器

• CSS通过选择器来获取到HTML的指定DOM节点

• 基本选择器(适用于市面上所有浏览器)

  1. 通配符 *
  2. id选择器 #
  3. 类选择器 .
  4. 后代选择器 空格
  5. 元素选择器 元素名
  6. 分组 ,(结合符)

• 声明的优先级

  选择器特殊性, 特殊性为4个部分 0,0,0,0

  ID选择器特殊性为第三位

  类选择器, 伪元素, 属性选择器特殊性为第二位

  伪类与元素特殊性为第一位

  通配符不增加特殊性

  结合符对特殊性没有贡献

  内联中的选择器特殊性为第四位

  继承属性没有特殊性

  • 重要声明

    !important

    添加在声明最后的分号之前

    浏览器会将重要声明与非重要声明分为两组, 先解决每一组之间的冲突, 再解决两组之间的冲突, 但最终胜出的一定是重要声明

  • 权重(由高到低)

    读者的重要声明

    创作者的重要声明

    创作者的正常声明

    读者的正常声明

    用户代理的声明

  • 计算声明优先级(由高到低)

    按照来源排序

    按照选择器特殊性排序

    按照顺序排序

长度单位

• 像素 px 显示效果越好的显示屏, 像素越小
  • 手机浏览器会自动将实际像素大小乘以4来显示
• 百分比 % 根据父元素的大小来计算样式, 当父元素属性发生变化时, 子元素也会发生改变
  • 自适应时常用
• em 和百分比类似, 相对于当前元素字体大小来计算
  • 1em = 1 font-size

颜色单位

• 直接使用单词表示
  • red, blue
• RGB(红色浓度, 绿色浓度, 蓝色浓度)
  • 可以是0-255的数字
    • RGB(111,222,123)
  • 可以是0%-100%的百分比
    • RGB(50%,50%,50%)
  • 使用16进制来表示, 三组两位来表示, 每一组为00-ff, 当两位相同时可以简写
    • #0000ff /#00f

字体

• 字体颜色 color

  • 指定字体颜色, 会继承给border-color

• 字体大小 font-size

  • 设置的不是字体本身大小, 而是一个看不见的框的高度, 字在这个框中, chrome最小就支持12px,可以设置为0使内联元素间的距离清除

• 字体样式 font-style

  • normal
  • italic 斜体
  • oblique 倾斜

  大部分浏览器都不会区分这两者

• 字体粗细 font-weight

  • normal
  • bold 加粗

  也可以指定100,200, … , 900等9种粗体, 但是用户电脑往往没有那么多字体所以可能达不到想要的效果

• font-variant 设置小型大写字母

  • normal
  • small-caps

  所有字母用大写表示但是小写字母用比较小的大写字母显示

• 字体 font-family

  • 指定字体, 当采用某种字体如果浏览器支持则使用指定字体, 否则使用默认字体
  • 该样式可以同时指定多个字体, 优先显示排在前面的字体, 没有再使用下一个
  • 浏览器使用的是计算机中的字体, 有则使用没有则不使用, 尽量不要使用奇怪的字体
    • font-family: arial, 微软雅黑

• 字体分类

  • 在网页中将字体分为五大类, 浏览器自动选取属于这些类中的字体来显示, 一般将大分类指定为font-family的最后一种字体
    • serif 衬线字体即有笔锋
    • sans-serif 非衬线字体即无笔锋
    • monospace 等宽字体即每个字一样宽
    • cursive 草书字体
    • fantasy 虚幻字体

• 可以使用font来设置所有与字体相关的样式, 不同样式之间用空格隔开

  • 斜体 加粗 小型大写字母 三者顺序可变且可不写
  • 文字大小和字体必须写, 不写就将字体样式全部应用默认值
  • 性能较分开写更好

行间距

• 只能通过设置行高来间接设置行间距

• 行间距 = 行高 - 字体大小

• line-height

  • 使用大小表示
  • 使用百分数表示
  • 使用一个数值表示字体大小的倍数

• 文字会默认在行高中垂直居中显示

• 对于单行文本可以将行高设置与父元素高度一致使文本居中

• 可在font中设置行高, 行高值是字体大小加斜杠后设置

  • font: 30px/30px "微软雅黑"
    • 当使用font时其他在font中未指定的值都会变成默认值, 因此其他与字体相关的属性都要写在font之后

文本相关

• text-transform 设置大小写

  • none
  • capitalize 单词首字母大写, 用单词边界区分单词
  • uppercase 全部大写
  • lowercase 全部小写

• text-decoration 定义文本的线条

  • none
  • underline 下划线
  • overline 上划线
  • line-through 中线

  超链接会默认设置下划线, 要去除时要用此属性

• letter-spacing 字符间距

  • 中文也会起作用

• word-spacing 单词间距

  • 本质是单纯设置空格的大小

• text-align 文本对齐方式

  • left 靠左对齐
  • right 靠右对齐
  • center 居中对齐
  • justify 两端对齐(通过调整文本间大小来对齐)

• text-indent 设置首行缩进(IE6,7中可能会让父元素一起缩进)

  • 设置正值向右缩进指定像素
  • 设置负值向左缩进指定像素
  • text-indent: 2em;
  • 可以用来隐藏一段文字
    • text-indent: -9999px;

CSS重难点概念

• 盒子模型

  • 由内容区, 内边距, 边框, 外边距组成

  • 设置边框

    三种样式缺一不可

    • border-width
    • border-color
    • border-style

    每种属性都可以通过写入不同数量的属性值来表示不同方向应用哪些属性

    也可以使用类似如下语句来规定特定方向的属性

    • border-left-width

    大部分浏览器边框宽度和颜色有默认值但是style默认值为none

    所以只设置style时就有边框显示

    可以使用border统一设置, 没有顺序要求, border只能指定4个边的样式都相同不能分别指定

    • border： 10px blue solid;

    可以使用border-top, border-bottom等来分别设置

  • 设置内边距

    padding可以一次性写明上下左右

  • 设置外边距

    • 不影响可见框的大小而是影响定位
    • margin可以一次性写明上下左右
    • 左上的margin值影响元素本身的定位, 右下的margin值影响相邻元素的位置
    • 当值为负时, 元素向反方向移动
    • 水平方向设置为auto时将会设置成最大值
    • 垂直方向设置为auto时会设置成0
    • 当left与right都设置成auto时, 两值会相同因此可这样设置使元素居中

    • 垂直外边距的重叠

      • 元素间相邻的垂直方向的外边距会取最大值而不是相加

        • 兄弟之间
        • 父子元素之间, 当子元素设置上边距时如果父子元素上边距相邻, 父元素会使用子元素的上边距, 可使用padding, border等隔开使其不相邻而不生效

• 浏览器默认

  浏览器为了在没有设置样式时也可读会给标签设置默认样式, 但是许多默认样式是不需要的

  可以用margin, padding赋值为0来覆盖

• 内联元素的盒模型

  内联元素不能设置宽和高

  可以设置内边距但垂直内边距不影响页面布局, 水平内边距会影响

  可以设置边框但是垂直边框不影响布局, 水平会影响

  可以设置水平外边距且不会重叠, 不能设置垂直外边距

• 将内联元素设置为块元素

  • display
    • inline 内联元素
    • block 块元素
    • inline-block 行内块元素, 可以使元素既可以设置宽高等且不会独占一行
    • none 不显示元素且不占位与visibility:(visible/hidden)相似, 但后者会占位

• 溢出

  子元素理论上小于等于父元素的内容区但有时候会大于父元素的内容区, 此时叫溢出

  可以使用overflow处理

  • 可选值

    • visible 默认值
    • hidden 隐藏溢出内容
    • scroll 滚动查看溢出内容, 无论是否溢出都会添加滚动条
    • auto 根据需求是否添加滚动条

• 文档流

  文档流在网页最底层, 表示页面的位置, 所创建的元素默认在文档流中

  • 元素在文档流中的特点

    • 块元素

      1. 在文档流中独占一行自上向下排列
      2. 块元素在文档流中默认宽度是100%, 宽度值是auto
      3. 块元素在文档流中的高度默认被内容区撑开

    • 内联元素

      1. 内联元素在文档流中只占自身大小, 默认从左向右排列, 如果一行不够容纳则换到下一行继续自左向右
      2. 文档流中, 内联元素宽度和高度默认被内容撑开

• 浮动float

  可以使用它来使块元素脱离文档流

  • 使元素浮动后, 这个元素会向上浮动直到碰到父元素的边框或者其他浮动元素就会停止

  • 如果浮动元素上面是没有设置浮动的块元素则浮动元素不会超过块元素

  • 在IE6中上面元素如果是内联元素也不会超过那个内联元素

  • 如果一行无法容纳浮动元素则会自动换行

  • 浮动的元素不会超过它上边的兄弟浮动元素, 即处于其下方或平行

  • 浮动的元素不会盖住文字, 文字会自动环绕在浮动元素周围

  • 在文档流中元素宽度默认值是父元素的全部, 当浮动脱离文档流后高度和宽度默认由内容决定

  • 内联元素脱离文档流后表现与块元素脱离后相同

  • 可选值:

    • none 默认值, 不浮动

    • left 向左浮动

    • right 向右浮动

• 高度塌陷问题

  在文档流中父元素默认被子元素撑开, 子元素多高, 父元素也多高

  当给子元素设置浮动, 子元素会完全脱离文档流此时将会导致子元素无法撑起父元素的高度造成高度塌陷

  • 最直接的解决高度塌陷方式

    • 将高度写定, 但父元素无法适应子元素高度, 因此不推荐使用

• 高度塌陷的进阶办法

  在页面中元素有隐藏属性block formatting context, 简称BFC, 该属性可以打开或关闭, 默认关闭

  • 当开启BFC时元素有以下属性

    • 父元素垂直外边距不会和子元素重叠
    • 不会被浮动元素覆盖
    • 可以包含浮动元素

  • 开启BFC有如下方法

    • 设置元素浮动

      会导致父元素宽度丢失, 且之后的元素上移, 不推荐

    • 设置绝对定位

    • 设置为inline-block

      宽度会丢失, 不推荐使用

    • overflow设置为非visible值

      此元素内部的相对定位元素如果超出内容区会被隐藏

      这些方法中将overflow设置为hidden或者auto副作用最小

  IE6及以下不支持BFC, 因此使用此方式不兼容BFC

  IE6有类似属性叫做hasLayout

  • 开启此属性有以下方法

    • zoom: 1 将元素放大至原来的1倍
    • min-height/max-height/min-width/max-width:(除none外的其他选项)
    • 绝对定位

  基础篇中对这些内容讲解较少，详细规则可以参考进阶篇中的内容

  • 清除浮动

    有时希望其他元素浮动时对当前元素不产生影响, 使用clear样式

    • clear用来清除其他元素对当前元素的影响, 可选值

      • none 默认值
      • left 清除影响最大的左侧浮动元素的影响
      • right 清除影响最大的右侧浮动元素的影响
      • both 清除两边中影响最大的浮动元素的影响

  • 常用的解决高度塌陷方式

    使用清除浮动的方式解决高度塌陷, 在浮动元素后增加一个带有clear属性的空白块元素来撑起高度

    可使用伪类.clearfix:after来在不修改html结构的情况下解决问题(clearfix为浮动元素的父元素)

    IE6及以下不支持此伪类, 使用以下语句来兼容

      .clearfix{
          zoom: 1;
      }
    

    table添加在子元素前时可以解决父子元素上外边距重叠问题, 为了不改变html结构使用以下语句可以同时解决上外边距重叠与高度塌陷问题

      .clearfix:before,
      .clearfix:after{
          content: "";
          display: table;
          clear: both;
      }
    

    清除浮动属于CSS中较困难的知识，此处有清除浮动练习可供参考

• 定位

  position

  作用是将元素移动到页面的指定位置

  • static 默认值, 没有开启定位

  • relative 相对定位

    开启元素相对定位不设置偏移量时页面不会产生任何变化

    可以通过left, right, top, bottom来设置元素偏移量

    如果没有开启定位会忽略以上属性

    相对定位是元素相对原本在文档流中的位置进行定位

    相对定位会使元素提升层级, 定位元素会盖住文档流中的元素

    相对定位不会改变元素的性质, 块元素和内联元素这个性质不会变化

  • absolute 绝对定位

    开启此定位会使元素脱离文档流

    开启此定位不设置偏移量元素的位置不会发生变化

    绝对定位是相对于开启了定位的最近的祖先元素进行定位

    如果所有祖先元素都没有开启定位则会相对于浏览器窗口进行定位(一般来说开启绝对定位都会开启父元素的相对定位)

    绝对定位会提升元素的层级

    开启绝对定位会使内联元素变成块元素, 宽度和高度默认被内容撑开

  • fixed 固定定位

    固定定位是绝对定位的一种, 不同点

    永远只相对于页面窗口进行定位

    IE6及以下不支持固定定位

• 元素层级

  如果元素层级相同, 则结构上在下面的元素会覆盖上面的

  可以通过z-index来指定层级, 层级越高越优先显示

  父元素层级再高也不会盖住子元素, 父元素调高层级, 子元素也会自动调高

• 透明

  • opacity

    • 0-1之间的值, 0是完全透明
    • IE8及以下不支持

  • filter: alpha(opacity=50)

    • 在IE中使用此属性代替
    • 0-100之间的值

元素背景

1. background-color: [color|transparent]

   设置为transparent则背景透明,此元素从border-box绘制

2. background-image: url(相对路径或者绝对路径)

   • 元素大小默认为位图的大小
   • 如果背景图片大于img元素, 则从左上角开始显示, 多出部分不显示
   • 如果背景图片小于img元素则默认平铺来充满元素
   • 可以同时指定背景图片与背景颜色, 此时背景颜色会充当底色
   • 在IE6中对PNG24支持不高, 如果使用则透明效果无法正常使用, 使用png8来解决或者引入外部js文件处理
3. background-repeat
   • repeat 默认值, 双向平铺
   • no-repeat 不平铺
   • repeat-x 水平平铺
   • repeat-y 垂直方向平铺

   可以通过平铺来将1像素宽或高的图片填充各种元素的背景

4. background-position

   对background-image中s设置的图片进行位置定位

   • 使用left,top,right,bottom,center中的两个值来确定图片位置

     如果只给出一个值第二值默认是center

   • 指定偏移量 第一个值为水平偏移量第二值为垂直偏移量, 偏移量为百分比时, 是指元素大小减去图片大小的百分比, 保留正负号

5. background-attachment

   设置背景图片是否随页面滚动

   • scroll 默认值, 背景图片随窗口滚动
   • fixed 背景图片固定, 不随页面滚动

   当设置成fixed时, 背景图片的定位会变成相对于视图调整 不推荐使用此语句, 因为性能耗费严重, 建议使用固定定位代替

6. background

   设置所有背景相关的属性, 没有顺序与数量要求, 不设置的值会有默认值

简单的兼容性问题

• 条件hack

  编写在HTML中的hack语句

  当只需要在某些IE浏览器中执行某些代码时使用

  原理在于特定浏览器能识别这些代码而其他浏览器不能识别

  • 例如

    适用于IE9及以下

      <!--[if IE]>
      <![endif]-->
    

  • 基本语法

      <!-- [if (keyword)? IE (version)?]>
      <![endif]-->
    

• 属性hack

  编写在CSS中的hack语句

  • 在样式前添加_, 使此条语句只在IE6生效

    body {_background-color: black;}
  

  • 在样式前添加*, 使此条语句只在IE7及以下生效

    body {*background-color: pink;}
  

• IE6双倍边距bug

  在IE6中如果给左浮动元素设置左外边距或者给右浮动元素设置右外边距会变成双倍外边距 给此浮动元素设置成inline可以解决

CSS性能优化的小tip

• CSS-sprite

  方法:

  将多个图片整合成一个请求, 加快访问速度, 提升体验并且能够减少图片的总大小

• Previous
  Javascript 语法补充(错误处理)
• Next
  CSS 之CSS3新增技术