• CSS（Cascading Style Sheet），层叠样式表，用于渲染 HTML 元素标签的样式

CSS 的引入方式

  1. /* 使用内联样式：利用标签中 style 属性来改变每个标签的显示样式 */
  2. <p style="background-color:#FF0000; color:#FFFFFF;">
  3.     p 标签段落内容
  4. </p>
  6. /* 使用内部样式定义：在 <head> 中使用 <style>，对多个标签进行统一修改 */
  7. <head>
  8.     <style type="text/css">
  9.         p {color:#FF0000;}
  10.     </style>
  11. </head>
  13. /* 链接外部样式文件：在 <head> 中使用 <link/> 标签来引入外部样式文件 */
  14. /* rel 属性规定当前文档与被链接文档之间的关系；type 属性被链接文档的 MIME 类型；href 属性规定被链接文档的位置 */
  15. <link rel="stylesheet" type="text/css" href="mystyle.css" />
  17. /* 在 <style> 中使用 @import 导入外部样式文件 */
  18. <style type="text/css">
  19.     @import url(mystyle.css);
  20.     div {color:#FF0000;}
  21. </style>

CSS 语法

  1. selector {
  2.     property1: value1;
  3.     property2: value2;
  4. }

属性的值

  • inherit（继承父元素的值）
  • 预定义的值，如left、right、none
  • 长度和百分数，如3em、10px、100%（1 em 表示当前元素的字体尺寸）
  • 纯数字
  • URL，如url(bg-pattern.png)
  • CSS 颜色：预定义颜色关键字、十六进制数字、RGB、HSL、RGBA、HSLA（色相 hue、饱和度 saturation、亮度 lightness、透明度 alpha transparency）等格式表示的颜色值
  • !important：提升指定样式规则的应用优先权

属性继承

样式优先级

  • 由上到下，由外到内，优先级由低到高

    CSS优先级
    图 1 CSS优先级

选择器

  • 指定 CSS 要作用的标签

  • 简单选择器

    • 标签选择器 tag
    • class 选择器 .className
    • ID 选择器 #id
    • 属性选择器 [att]、[att=val]、[att~=val]
    • 伪类选择器 :link
  • 伪元素选择器 ::first-letter、::first-line、::before、::after、::selection
  • 组合选择器
    • 后代选择器 selector selector
    • 子选择器 selector>selector
    • 兄弟选择器 selector+selector、selector~selector
    • 选择器分组 selector,selector

CSS 盒子模型

  • CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，包括：margin（外边距）- 清除边框外的区域，外边距是透明的border（边框）- 围绕在内边距和内容外的边框padding（内边距）- 清除内容周围的区域，内边距是透明的content（内容）- 盒子的内容，显示文本和图像

  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

  • 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

    CSS盒子模型
    图 2 CSS盒子模型

  1. div {
  2.     background-color: lightgrey;
  3.     width: 300px;
  4.     border: 25px solid green;
  5.     padding: 25px;
  6.     margin: 25px;
  7. }

常见属性

浏览器私有属性前缀

  • Chrome、Safari：-webkit-
  • Firefox：-moz
  • IE：-ms-
  • Opera：-o-

字体

  • font-size: | ：文字的字体大小
  • font-family: [ | ] #：文字的字体系列（ = cursive | fantasy | monospace | serif | sans-serif）（可以使用 @font-face 规则定义字体）
  • font-weight: normal | bold | bolder | lighter | ：字体的粗细（normal 等价于 400、bold 等价于 700、100、200、300、400、500、600、700、800、900 ）
  • font-style: normal | italic | oblique：文字的字体风格（是否斜体）
  • line-height: normal | | | ：行间的距离（行高）
  • color：文字颜色

文本

  • text-align: left | right | center | justify ：文本水平对齐方式
  • vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | ：元素的垂直对齐方式
  • text-indent: | ：文本块首行的缩进
  • white-space: normal | pre | nowrap | pre-wrap | pre-line：元素中的空白符的处理方式（pre 保留空格，wrap 保留换行）
  • word-wrap: normal | break-word：当内容超过指定容器的边界时是否断行
  • word-break: normal | keep-all | break-all：文本的字内换行行为
  • word-spacing: normal | | ：单词间距（单词间的空白）
  • text-shadow: none | [ {2,3} && ? ]#：文本阴影效果
  • text-decoration: none | [ underline || overline || line-through || blink ]：文本修饰
  • text-overflow: clip | ellipsis：clip：当内联内容溢出块容器时，将溢出部分裁切掉；ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（…）text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  • text-transform：文本大小写（uppercase、lowercase、capitalize）
  • text-indent：文本块首行的缩进
  • letter-spacing：字符间距
  • cursor: [ [ ]?,]* [ auto | default | none | help | pointer| zoom-in | zoom-out | move：光标的类型

盒模型

  • width: | | auto：目标对象的宽度
  • height：目标对象的高度
  • padding：[ | ]{1,4}：内边距（填充）（顺序 TRBL：上 右 下 左）
  • margin：[ | | auto ]{1,4}：外边距（顺序 TRBL：上 右 下 左）（margin 合并：毗邻元素、父元素与第一个/最后一个子元素）
  • border: || || ：边框（宽度 border-width、样式 border-style、颜色 border-color）
  • border-radius: [ | ]{1,4} [ / [ | ]{1,4} ]?：圆角边框（水平半径、垂直半径）
  • overflow: visible | hidden | scroll | auto：内容溢出元素框时的处理方式
  • box-sizing: content-box | border-box：设置 width、height 指定的区域，，默认 content-box
  • box-shadow: none | [ , ]*： = inset? && {2,4} && ?：阴影
  • outline：轮廓边框

背景

  • background
  • background-color: ：内容背景色，默认值：transparent（全透明）
  • background-image: [ , ]*：背景图像，值 url(URL) 或 none
  • background-repeat: [ , ]*：是否及如何重复背景图像， = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
  • background-attachment: [ , ]*：背景图像是否固定或者随着页面的其余部分滚动， = fixed | scroll | local
  • background-position: [ , ]*：背景图像的开始位置， = [ left | center | right | top | bottom | | ] | [ left | center | right | | ] [ top | center | bottom | | ] | [ center | [ left | right ] [ | ]? ] && [ center | [ top | bottom ] [ | ]? ]
  • background-origin: border-box | padding-box | content-box：设置背景图像开始位置的参考原点，默认 padding-box
  • background-clip: border-box | padding-box | content-box：背景图像向外裁剪的区域，默认 border-box
  • background-size: [ | | auto ]{1,2} | cover | contain：背景图像的尺寸大小

布局

  • display: inline | block | inline-block | none | table | flex：元素的显示方式
    • block（块级元素）：默认宽度为父元素宽度，可设置宽高，换行显示
    • inline（行内元素）：默认宽度为内容宽度，不可设置宽高，同行显示
    • inline-block：默认宽度为内容宽度，可设置宽高，同行显示，整块换行
    • flex（弹性元素）
  • visibility: visible | hidden | collapse：元素是否可见
  • position: static | relative | absolute | fixed：元素的定位方式
    • relative（相对定位）：仍在文档流中，参照物为元素本身
    • absolute（绝对定位）：默认宽度为内容宽度，脱离文档流，参照物为第一个定位祖先/根元素
    • fixed（固定定位）：默认宽度为内容宽度，脱离文档流，参照物为视窗
  • float: none | left | right：浮动，默认宽度为内容宽度，半脱离文档流（对元素，脱离文档流；对内容，在文档流），向指定方向一直移动，float 的元素在同一文档流
  • clear: none | left | right | both：指定不允许有浮动对象的边，应用于后续元素、块级元素（清除浮动 .clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}）
  • top：上外边距边界与其包含块上边界之间的偏移
  • right：右外边距边界与其包含块右边界之间的偏移
  • bottom：下外边距边界与其包含块下边界之间的偏移
  • left：左外边距边界与其包含块左边界之间的偏移
  • z-index：元素的堆叠顺序

flex

  • flex container（弹性容器）；flex item（弹性元素）：在文档流中的子元素；main axis（主轴）；cross axis（副轴）

  • 方向

    • flex-direction: row | row-reverse | column | column-reverse：flex item 在弹性容器中的排列方向，默认值 row
    • flex-wrap: nowrap | wrap | wrap-reverse：弹性容器是否换行，默认值 nowrap
    • flex-flow: <' flex-direction '> || <' flex-wrap '>：默认值 row nowrap
    • order: ：定义 flex item 的排列顺序，数值小的排在前面，默认值 0

  • 弹性

    • flex-basis: main-size|：设置 flex item 的初始宽/高
    • flex-grow: ：设置 flex item 的伸展因子，用来分配弹性容器的剩余空间，默认值 0（flex-basis +flow-grow/sum(flow-grow)* remain）
    • flex-shrink: ：设置 flex item 的收缩因子，默认值 1（flex-basis +flow-grow/sum(flow-grow)* remain）
    • flex: none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>：默认值 0 1 main-size

  • 对齐

    • justify-content: flex-start | flex-end | center | space-between | space-around：设置 main-axis 方向上的对齐方式
    • align-items: flex-start | flex-end | center | baseline | stretch：设置 cross-axis 方向上对齐方式
    • align-self: auto | flex-start | flex-end | center | baseline | stretch：设置单个 flex item 在 cross-axis 方向上对齐方式
    • align-content: flex-start | flex-end | center | space-between | space-around | stretch：设置 cross-axis 方向上行对齐方式

变形

  • transform: none | +
  • 常见的 transform-function
    • rotate()：旋转
    • rotate3d(,,,)：旋转
    • translate([,]?)：移动
    • translate3d(,,)：移动
    • scalex( [,]?)：缩放
    • scale3d(,,)：缩放
    • skew([,]?)：倾斜，Y 轴向 X 轴倾斜，X 轴向 Y 轴倾斜
  • transform-origin: [ | | left | center | right ] [ | | top | center | bottom ]?：设置转换的原点，默认 50% 50%
  • perspective: none | ：指定观察者与「z=0」平面的距离
  • perspective-origin: [ | | left | center | right ] [ | | top | center | bottom ]?：指定透视点的位置，，默认 50% 50%
  • transform-style: flat | preserve-3d：指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化
  • backface-visibility: visible | hidden：指定元素背面面向用户时是否可见

过渡

  • transition
  • transition-property: none | [ , ]*：设置对象中的参与过渡的属性
  • transition-duration:
  • transition-timing-function: [,]*：设置对象中过渡的动画类型
  • transition-delay:

动画

  • animation
  • animation-name: [,]*：设置对象所应用的动画名称
  • animation-duration:
  • animation-timing-function: [,]*：设置对象动画的过渡类型
  • animation-iteration-count: [,]*：设置对象动画的循环次数
  • animation-direction: [,]*：设置对象动画在循环中是否反向运动
  • animation-play-state: [,]*：设置对象动画的状态
  • animation-delay:

  • animation-fill-mode: [,]*：设置对象动画时间之外的状态

  • @keyframes { }：指定动画名称和动画效果的关键帧，：[ [ from | to | ]{ sRules } ] [ [ , from | to | ]{ sRules } ]*

页面架构

居中布局

  1. <div class="parent">
  2.     <div class="child">DEMO</div>
  3. </div>
  • 水平居中
  1.  .parent {
  2.      text-align: center;
  3.  }
  4.  .child {
  5.      display: inline-block;
  6.  }
  1.  .child {
  2.      display: table;
  3.      margin: 0 auto;
  4.  }
  1.  .parent {
  2.      position: relative;
  3.  }
  4.  .child {
  5.      position: absolute;
  6.      left: 50%;
  7.      transform: translateX(-50%);
  8.  }
  1.  .parent {
  2.      display: flex;
  3.      justify-content: center;
  4.  }
  1.  .parent {
  2.      display: flex;
  3.  }
  4.  .child {
  5.      margin: 0 auto;
  6.  }
  • 垂直居中
  1.  .parent {
  2.      display: table-cell;
  3.      vertical-align: middle;
  4.  }
  1.  .parent {
  2.      position: relative;
  3.  }
  4.  .child {
  5.      position: absolute;
  6.      top: 50%;
  7.      transform: translateY(-50%);
  8.  }
  1.  .parent {
  2.      display: flex;
  3.      align-items: center;
  4.  }
  • 居中
  1.  .parent {
  2.      text-align: center;
  3.      display: table-cell;
  4.      vertical-align: middle;
  5.  }
  6.  .child {
  7.      display: inline-block;
  8.  }
  1.  .parent {
  2.      position: relative;
  3.  }
  4.  .child {
  5.      position: absolute;
  6.      left: 50%;
  7.      top: 50%;
  8.      transform: translate(-50%,-50%);
  9.  }
  1.  .parent {
  2.      display: flex;
  3.      justify-content: center;
  4.      align-items: center;
  5.  }

多列布局

  1. <div class="parent">
  2.     <div class="left">
  3.         <p>left</p>
  4.     </div>
  5.     <div class="right">
  6.         <p>right</p>
  7.         <p>right</p>
  8.     </div>
  9. </div>
  1. <div class="parent">
  2.     <div class="left"><p>left</p></div>
  3.     <div class="right-fix">
  4.         <div class="right">
  5.             <p>right</p><p>right</p>
  6.         </div>
  7.     </div>
  8. </div>
  • 定宽与自适应
  1.  .left {
  2.      float: left;
  3.      width: 100px;
  4.  }
  5.  .right {
  6.      margin-left: 120px;
  7.  }
  1.  .left {
  2.      float: left; width: 100px;
  3.      position: relative;
  4.  }
  5.  .right-fix {
  6.      float: right; width: 100%;
  7.      margin-left: -100px;
  8.  }
  9.  .right {
  10.      margin-left: 120px;
  11.  }
  1.  .left {
  2.      float: left;
  3.      width: 100px;
  4.      margin-right: 20px;
  5.  }
  6.  .right {
  7.      overflow: hidden;
  8.  }
  1.  .parent {
  2.      display: table; width: 100%;
  3.      table-layout: fixed;
  4.  }
  5.  .left, .right {
  6.      display: table-cell;
  7.  }
  8.  .left {
  9.      width: 100px;
  10.      padding-right: 20px;
  11.  }
  1.  .parent {
  2.      display: flex;
  3.  }
  4.  .left {
  5.      width: 100px;
  6.      margin-right: 20px;
  7.  }
  8.  .right {
  9.      flex: 1;
  10.  }
  • 不定宽与自适应
  1.  .left {
  2.      float: left;
  3.      margin-right: 20px;
  4.  }
  5.  .right {
  6.      overflow: hidden;
  7.  }
  8.  .left p {width: 200px;}
  1.  .parent {
  2.      display: table; width: 100%;
  3.  }
  4.  .left,.right {
  5.      display: table-cell;
  6.  }
  7.  .left {
  8.      width: 0.1%;
  9.      padding-right: 20px;
  10.  }
  11.  .left p{width: 200px;}
  1.  .parent {
  2.      display: flex;
  3.  }
  4.  .left {
  5.      margin-right: 20px;
  6.  }
  7.  .right {
  8.      flex: 1;
  9.  }
  10.  .left p {width: 200px;}
  • 等分
  1.  <div class="parent">
  2.      <div class="column"><p>1</p></div>
  3.      <div class="column"><p>2</p></div>
  4.      <div class="column"><p>3</p></div>
  5.      <div class="column"><p>4</p></div>
  6.  </div>
  1.  <div class="parent-fix">
  2.      <div class="parent">
  3.          <div class="column"><p>1</p></div>
  4.          <div class="column"><p>2</p></div>
  5.          <div class="column"><p>3</p></div>
  6.          <div class="column"><p>4</p></div>
  7.      </div>
  8.  </div>
  1.  .parent {
  2.      margin-left: -20px;
  3.  }
  4.  .column {
  5.      float: left;
  6.      width: 25%;
  7.      padding-left: 20px;
  8.      box-sizing: border-box;
  9.  }
  1.  .parent-fix {
  2.      margin-left: -20px;
  3.  }
  4.  .parent {
  5.      display: table;
  6.      width:100%;
  7.      table-layout: fixed;
  8.  }
  9.  .column {
  10.      display: table-cell;
  11.      padding-left: 20px;
  12.  }
  1.  .parent {
  2.      display: flex;
  3.  }
  4.  .column {
  5.      flex: 1;
  6.  }
  7.  .column+.column {
  8.      margin-left: 20px;
  9.  }
  • 等高
  1.  <div class="parent">
  2.      <div class="left">
  3.          <p>left</p>
  4.      </div>
  5.      <div class="right">
  6.          <p>right</p>
  7.          <p>right</p>
  8.      </div>
  9.  </div>
  1.  .parent {
  2.      display: table; width: 100%;
  3.      table-layout: fixed;
  4.  }
  5.  .left,.right {
  6.      display: table-cell;
  7.  }
  8.  .left {
  9.      width: 100px;
  10.      padding-right: 20px;
  11.  }
  1.  .parent {
  2.      display: flex;
  3.  }
  4.  .left {
  5.      width: 100px;
  6.      margin-right: 20px;
  7.  }
  8.  .right {
  9.      flex: 1;
  10.  }
  1.  .parent {
  2.      overflow: hidden;
  3.  }
  4.  .left,.right {
  5.      padding-bottom: 9999px;
  6.      margin-bottom: -9999px;
  7.  }
  8.  .left {
  9.      float: left; width: 100px;
  10.      margin-right: 20px;
  11.  }
  12.  .right {
  13.      overflow: hidden;
  14.  }

全屏布局

  1. <body>
  2.     <div class="parent">
  3.         <div class="top">top</div>
  4.         <div class="middle">
  5.             <div class="left">left</div>
  6.             <div class="right">
  7.                 <div class="inner">right</div>
  8.             </div>
  9.         </div>
  10.         <div class="bottom">bottom</div>
  11.     </div>
  12. </body>

全屏布局1
图 3 全屏布局1

  • position
  1.  html, body, .parent {
  2.      margin: 0;
  3.      height: 100%;
  4.      overflow: hidden;
  5.  }
  7.  .top {
  8.      position: absolute;
  9.      top: 0;
  10.      left: 0;
  11.      right: 0;
  12.      height: 100px;
  13.      background: blue;
  14.  }
  16.  .left {
  17.      position: absolute;
  18.      left: 0;
  19.      top: 100px;
  20.      bottom: 50px;
  21.      width: 200px;
  22.      background: red;
  23.  }
  25.  .right {
  26.      position: absolute;
  27.      left: 200px;
  28.      top: 100px;
  29.      bottom: 50px;
  30.      right: 0;
  31.      background: pink;
  32.      overflow: auto;
  33.  }
  35.  .bottom {
  36.      position: absolute;
  37.      left: 0;
  38.      right: 0;
  39.      bottom: 0;
  40.      height: 50px;
  41.      background: black;
  42.  }
  44.  .right .inner {min-height: 1000px;}
  • flex
  1.  html, body, .parent {
  2.      margin: 0;
  3.      height: 100%;
  4.      overflow: hidden;
  5.  }
  7.  .parent {
  8.      display: flex;
  9.      flex-direction: column;
  10.  }
  12.  .top {
  13.      height: 100px;
  14.      background: blue;
  15.  }
  17.  .bottom {
  18.      height: 50px;
  19.      background: black;
  20.  }
  22.  .middle {
  23.      flex: 1;
  24.      display: flex;
  25.  }
  27.  .left {
  28.      width: 200px;
  29.      background: red;
  30.  }
  32.  .right {
  33.      flex: 1;
  34.      overflow: auto;
  35.      background: pink;
  36.  }
  38.  .right .inner {min-height: 1000px;}

  • flex

    全屏布局2 

  1.  html, body, .parent {
  2.      margin: 0;
  3.      height: 100%;
  4.      overflow: hidden;
  5.  }
  7.  .parent {
  8.      display: flex;
  9.      flex-direction: column;
  10.  }
  12.  .top {
  13.      background: blue;
  14.  }
  16.  .bottom {
  17.      background: black;
  18.  }
  20.  .middle {
  21.      flex: 1;
  22.      display: flex;
  23.  }
  25.  .left {
  26.      background: red;
  27.  }
  29.  .right {
  30.      flex: 1;
  31.      overflow: auto;
  32.      background: pink;
  33.  }
  35.  .right .inner {min-height: 1000px;}

响应式

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  • @media: ：媒体查询
  1. @media screen and (max-width:320px) {
  2.     /* 视窗宽度<=320px 时应用以下样式 */
  3. }
  5. @media screen and (max-width:320px) {
  6.     /* 视窗宽度>=769px 时应用以下样式 */
  7. }
  9. @media screen and (max-width:320px) and (max-width:1000px) {
  10.     /* 769px<=视窗宽度<=1000px 时应用以下样式 */
  11. }