今天是2019年6月19日星期三，在这里跟大家分享css基础的第二部分单位、尺寸、溢出和边框，下面是详细的内容，请各位大佬积极改正！

一、单位

• 尺寸单位：
  • px（像素）
  • cm mm pt
  • em：当前字体的大小
  • rem：根字体的大小（Html标签字体的大小）
• 颜色单位：
  • 三基色：红绿蓝   rgb（x1,x2,x3）取值为0-255
    • rgb（255,0,0）   纯红
    • rgb（0，0，0）   黑色
    • rgb（255,255,255）  白色
  • rgba：（x1,x2,x2,a）a代表的是透明度，取值为0-1之间
    • 0表示全透明
    • 1表示完全不透明
  • 十六进制：#rrggbb
    • #ff0000：正红色
    • #ffffff：白色
    • #000000：黑色
  • 简写：当三基色、十六进制每一位的色值两位的值都是相同的话可以省略一个值！
    • #aabbcc  可以缩写为  #abc
    • #ff0000  可以缩写为  #f00　　

二、尺寸属性

• 宽度属性：width：宽度  单位有px和百分比
  • max-width：最大宽度
  • min-width：最小宽度
• 高度属性：height：高度  单位有px和百分比
  • max-height：最大高度
  • min-height： 最小高度
• 注意：
  • 块元素可以设置宽高，行内元素不可以设置宽高
  • 快元素宽度默认值是100%
  • 高度如果没有设置，默认值是auto，由内容撑开

三、溢出

• 定义：当我们给一个元素设置了宽高，如果内容的面积超出了你设置的尺寸的面积，就会产生溢出！溢出属性定义了元素内容溢出时怎么处理。
• 溢出属性：overflow
• visible：可见，默认值
• hidden：溢出部分隐藏
• scroll：滚动   默认显示滚动条，在内容溢出时可用
• auto：自动   如果内容没有溢出，就不显示滚动条。内容溢出，显示滚动条并可用。
• 单向溢出：
  • overflow-x：控制x轴方向内容溢出时的处理
  • overflow-y：控制y轴方向内容溢出时的处理
• 注意：当我们只给一个方向设置溢出属性时，另一个方向的值默认是auto。
• sample：

  DOCTYPE html>
  html>
      head>
          meta charset="utf-8">
          title>溢出属性title>
          style>
              #box {
                  width: 150px;
                  height: 150px;
                  border: 1px solid #333;
                  overflow: hidden;
                  /*overflow: scroll;
                  overflow: auto;*/
              }
          style>
      head>
      body>
          div id="box">
              zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
              zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
              zhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
              zhyzhyzhyzhyzhyzhy
          div>
      body>
  html>

  四、边框

  • 边框属性：border
    • 值：width  style  color
      • width：宽度  单位px
      • style：线条样式
        • solid 实线
        • dotted  虚线   实心圆
        • dashed  虚线    实心方块
      • color：颜色   合法的颜色值
    • sample：

      DOCTYPE html>
      html>
          head>
              meta charset="utf-8">
              title>边框title>
              style>
                  #box {
                      width: 400px;
                      height: 400px;
                      border: 10px solid orange;
                      /*border: 10px dotted orange;
                      border: 10px dashed orange;*/
                  }
              style>
          head>
          body>
              div id="box">我是divdiv>
          body>
      html>

  • 单方向定义
    • 方向：上下左右（top  bottom  left  right）
    • 格式：border-方向    值：同上
    • sample：

      DOCTYPE html>
      html>
          head>
              meta charset="utf-8">
              title>单项边框title>
              style>
                  #box {
                      width: 300px;
                      height: 300px;
                      border-left: 10px solid #666;
                      border-top: 10px dotted #456;
                      border-right: 10px dashed #000;
                      border-bottom:10px dotted #800080;
                  }
              style>
          head>
          body>
              div id="box">div>
          body>
      html>

  • 单属性定义：同时控制上下左右四条边框单属性
    • 语法：border-属性：值
    • sample：

      DOCTYPE html>
      html>
          head>
              meta charset="utf-8">
              title>单边框title>
              style>
                  #box {
                      width: 300px;
                      height: 300px;
                      border: 5px solid orange;
                      border-color: #FF0000;
                  }
              style>
          head>
          body>
              div id="box">div>
          body>
      html>

  • 单边单属性：border-方向-属性
    • sample：

      DOCTYPE html>
      html>
          head>
              meta charset="utf-8">
              title>单边框单属性title>
              style>
                  #box {
                      width: 400px;
                      height: 400px;
                      border: 5px solid #008000;
                      border-top-color: #800080;
                      border-right-color: #E4393C;
                      border-bottom-color: #FFA500;
                  }
              style>
          head>
          body>
              div id="box">div>
          body>
      html>

  • 注意：
    • 边框颜色除了合法的颜色值之外还可以是transparent。
    • 使用场景：某种状态下，加上边框尺寸，导致元素抖动；在变化前加上边框颜色透明，保证前后状态尺寸无变化。
  • 边框组成：边框是由三角形或者梯形组成
  • 边框倒角：border-radius
    • 取值：px或者百分比  
      • 注意：同时控制四个角的角度
    • 单独定义每个角的角度：border-垂直方向-水平方向-radius

      • DOCTYPE html>
        html>
            head>
                meta charset="utf-8">
                title>单边倒角title>
                style>
                    #box {
                        width: 300px;
                        height: 300px;
                        background: orange;
                        border-top-left-radius: 20px;
                        border-radius: 5px 20px 40px 100px;
                    }
                style>
            head>
            body>
                div id="box">div>
            body>
        html>

    • border-radius：当取值为四个值时，从左上角开始，顺时针旋转。四个值之间以空格分割！
  • 边框阴影：box-shadow
    • 值列表：offsetx  offsety  blur  spread  color  inset  
      • offsetx：水平偏移距离（必选）
      • offsety：垂直偏移距离（必选）
      • blur：模糊距离（必选）
      • spread：阴影超出面积（默认是0）
      • color：阴影颜色（必选）
      • inset：外部该内部阴影
    • 推荐常用：offsetx  offsety  blur  color；
    • sample

      DOCTYPE html>
      html>
          head>
              meta charset="utf-8">
              title>边框阴影title>
              style>
                  #box {
                      width: 300px;
                      height: 300px;
                      background: orange;
                      box-shadow: 10px 10px 10px rgb(93,145,77);
                  }
              style>
          head>
          body>
              div id="box">div>
          body>
      html>

      未完，待续！等待下次更新。。。。。。