HTML 与 CSS 总结

详细的知识点：【重识 HTML + CSS】知识点目录

HTML 元素

脱标元素

脱标元素特点：

• 可以随意设置宽高
• 如果没有设置宽高，宽高由内容决定
• 不再受标准流（normal flow）的约束
• 不再严格区分块级元素、行内级元素
• 元素内部默认还是按照标准流

哪些元素是脱标元素：

• 浮动元素
  • float:left
  • float:right
  • 浮动元素之间不能层叠
  • 浮动元素不能跟行内级内容层叠

• 绝对定位元素
  • position:absolute
  • position:fixed
  • 通过 z-index 可以设置元素的层叠顺序

非脱标元素

块级元素（基本都是非替换）

• div、p、pre、table、form、h1~h6
• ul、li、ol、dl、dt、dd
• header、footer、nav、section、article、aside
• 独占一行
• 可以随意设置宽高
• 如果不设置高度，高度默认由内容决定

行内级元素

• 替换元素
  • img、input、iframe、canvas、object
  • video、audio
  • 可以跟其他行内级元素在同一行显示
  • 可以随意设置宽高
• 非替换元素
  • span、strong、a、em、i
  • 可以跟其他行内级元素在同一行显示
  • 不可以随意设置宽高
  • 如果不设置宽高，宽高默认由内容决定

inline-block

• 可以跟其他行内级元素在同一行显示
• 可以随意设置宽高
• 如果不设置宽高，宽高默认由内容决定

CSS属性

盒子模型

• width、min-width、max-width
• height、min-height、max-height
• padding、padding-top、padding-right、padding-bottom、padding-left
• margin、margin-top、margin-right、margin-bottom、margin-left
• border、border-top、border-right、border-bottom、border-left

  • 可以利用边框生成三角形

• box-sizing
  • content-box
    • width 不包括 padding 和 border，height 不包括 padding 和 border
  • border-box
    • width = padding + border + 内容宽度
    • height = padding + border + 内容高度
• box-shadow
  • box-shadow: 2px 5px 10px 7px rgba(0,0,0,.2) inset
    2px：向右偏移2px
    5px：向下偏移5px
    10px：模糊半径（模糊度，这个值越大，越模糊）
    7px：扩散半径（值越大，扩散范围越广）
    inset：阴影显示到元素内部（如果不加 inset，看显示在元素外部）
• overflow
  • visible：溢出内容仍然可见
  • hidden：溢出内容直接隐藏
  • scroll：会一直显示水平、垂直方向的滚动条
  • auto：会自动根据内容的溢出情况来决定是否显示滚动条
• 对于行内级非替换元素（span、strong、a 等）
  • margin-top、margin-bottom 不起作用
  • padding-top、padding-bottom、border-top、border-bottom 的效果比较特殊
• 对于块级元素（比如 div、p 等）
  • 存在 margin-top、margin-bottom 传递的问题（传递给块级父元素）
  • 存在 margin-top、margin-bottom 折叠问题（margin collapse）
  • 包含块的宽度 = margin-left + margin-right + 块级元素实际占用的宽度

定位

• position:static

  • 默认（非定位元素）
  • 不脱离标准流
  • 不能通过 left、right、top、bottom 调整位置

• position:relative

  • 相对定位（定位元素）
  • 不脱离标准流
  • 可以通过 left、right、top、bottom 调整位置
  • 定位参照对象：自己原来的位置

• position:absolute

  • 绝对定位（定位元素，绝对定位元素）
  • 脱离标准流
  • 可以通过 left、right、top、bottom 调整位置
  • 定位参照对象：
    • 最邻近的定位祖先元素（从祖先元素中找到最邻近的定位元素）
    • 如果找不到这样的祖先元素，那么就参照视口（viewport）

  很多情况下，子元素都会参照父元素进行绝对定位，常用做法是：子绝父相

  • 子元素：position: absolute
  • 父元素：position: relative

• position:fixed

  • 固定定位（定位元素，绝对定位元素）
  • 脱离标准流
  • 可以通过 left、right、top、bottom 调整位置
  • 定位参照对象：视口（viewport）

• 对于绝对定位元素来说

  • 包含块的宽度 = left + right + margin-left + margin-right + 元素的实际占用宽度
  • 包含块的高度 = top + bottom + margin-top + margin-bottom + 元素的实际占用高度

对于定位元素来说，有时候会利用 left、margin-left 联合使用来让一个元素水平居中：

• left: 自己宽度的一半乘以负一
• margin-left: 50%

文字

• color：前景色（文字颜色、边框颜色、文字装饰线颜色，#fff、#ffffff、rgb(255,255,255)、rgba(255,255,255,.5)）

• text-align，设置元素的内容在元素中的水平位置

  • left：左对齐
  • right：右对齐
  • center：居中

• text-indent，一般用来设置首行文本的缩进

  • 常见用法：text-indent: 2em
  • 刚好缩进 2 个文字

• text-decoration，设置文字装饰线

  • underline：下划线
  • line-through：删除线（比如电商网站的原价）
  • none：去除删除线

• text-overflow，设置隐藏掉的溢出文字内容的表现形式

  • clip：溢出的内容直接裁剪
  • ellipsis：溢出的内容用省略号显示

让一个元素永远只显示一行文字，并且溢出部分显示省略号：

white-space: nowrap; /* 永远只显示一行文字 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 隐藏掉的内容用省略号来表示 */

字体

• font-family：字体名称，可以设置多个字体名称，它们之间用逗号隔开
  • 一般英文字体写在前面，中文字体写在后面
• font-weight：设置轻重（粗细）
  • 100~900
  • bold：700
  • normal：400
• font-size：设置字体大小
  • font-size: 10px
  • font-size: 10%
    • 使用父元素的 font-size 乘以 10%
    • 继承父元素的 font-size 时，继承的是计算值，不是直接继承 10%
  • font-size: 0.5em，使用父元素的 font-size 乘以50%
  • width: 2em，使用自己的font-size乘以2
• line-height
  • line-height: 20px
  • line-height: 20%，使用自己的 font-size 乘以 20%
  • line-height: 2em，使用自己的 font-size 乘以 2
  • line-height: 2，使用自己的 font-size 乘以 2

  • 如果希望一行文字垂直居中，常见做法是：
    设置 line-height 和 height 保持一致

• font-style
  • normal：正常
  • italic：斜体
  • oblique：倾斜
• font
  • 简写属性
  • 格式：font-size/line-height font-family

背景

• background-color：背景色
• background-image：背景图片
• background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
• background-position
  • background-position: 10px 20px
  • background-position: right top;
  • background-position: center top;
• background-size：设置背景图片的大小
• background
  • 简写属性
  • 格式：background: url("1.png") no-repeat left top/20px 20px #f00;

CSS Sprite：精灵图片、雪碧图片

动画

由于动画部分没有详细学习过，因此暂且略过

• transition

  • 用于决定哪些CSS属性需要参与动画
  • transition: all 2s;
    • 所有可动画CSS属性的修改，都会在2s的时间内通过动画完成

• transform

  • 平移
    • translateX(10px)
    • translateY(30px)
    • translate(10px, 30px)
  • 缩放
    • scaleX(0.5)
    • scaleY(0.5)
    • scale(0.5)
  • 旋转
    • rotate(45deg)：二维平面旋转
    • rotateX(45deg)：绕着x轴旋转
    • rotateZ(45deg)：绕着Z轴旋转（跟rotate()类似）
    • rotateY(45deg)：绕着Y轴旋转
  • transform: translate(20px, 30px) scale(0.5) rotate(45deg);

• animation

  • 使用步骤

    • 创建动画

    • @keyframes my-anim1 {
          from {
              
          }   
          
          to {
      
           }
      }
      
      @keyframes my-anim2 {
          0% {
      
          }
      
          20% {
      
          }
      
          60% {
      
          }
      
          100% {
      
          }
      }
      

    • 使用动画

      • animation-duration：动画的持续时间
      • animation-name：动画名称
      • animation-iteration-count：动画执行次数
        • infinite：代表无限次数执行
      • animation-timing-function：动画的执行节奏
      • animation：简写属性
        • animation: my-anim 2s infinite

• 3D透视

  • /* 给父元素增加 */
    transform-style: preserve-3d;
    perspective: 500px;