css基础2

今天是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>

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

posted @ 2019-06-19 15:35  Man+Man=Man++  阅读(272)  评论(0)  编辑  收藏  举报