欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css基础2

程序员文章站 2022-03-22 12:26:34
今天是2019年6月19日星期三,在这里跟大家分享css基础的第二部分单位、尺寸、溢出和边框,下面是详细的内容,请各位大佬积极改正! 一、单位 尺寸单位: px(像素) cm mm pt em:当前字体的大小 rem:根字体的大小(Html标签字体的大小) 颜色单位: 三基色:红绿蓝 rgb(x1, ......

今天是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">我是div</div>
          </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>

      未完,待续!等待下次更新。。。。。。