• 第二篇、css尺寸和边框


    一、尺寸和标签图

    二、尺寸单位

    %:百分比
    in:英寸
    cm:厘米
    mm:毫米
    pt:磅(点)(1pt等于1/72英寸)
    px:像素(计算机屏幕上的一个点)
    em:1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍    (相对单位)

    三、颜色单位

    rgb(x,x,x):RGB值,如rgb(25500)
    rgb(x%,x%,x%):RGB百分比值,如rgb(100%,0%,0%)
    #rrggbb:十六进制数,如#ff0000
    #rgb:简写的十六进制数,如#f00
    表示颜色的英文单词,如red

    四、尺寸

    尺寸属性适用于设置元素的宽度和高度
      单位一般为像素或者百分比
    宽度属性
     width
     max-width   只能让用户设置的里面使用
     min-width   只能让用户设置的里面使用
    高度属性
    height
    max-height
    min-height

    五、溢出

    •  使用尺寸属性控制框的大小的时候,如果内容所需的空间大于框本身的空间会导致内容溢出
    • overflow:当内容溢出元素框的时候如何处理

       --visible

       ---hidden

       ---scroll

       ---auto

    • overflow-x 
    • overflow-y

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*定义选择器,设置边框颜色为黑色,设置y轴没有滚动条,x轴有滚动条*/
            div.sample_img{
                 500px;
                height: 150px;
                border: 1px solid#000;
                overflow-y: hidden;
                overflow-x: auto;
            }
            div.sample_img img{
                 100px;
                height: 100px;
            }
            /*设置p标签在宽度上大于所有图片的宽度*/
            div.sample_img p{
                 800px;
                height: 150px;
            }
    
        </style>
    </head>
    <body>
        <div class="sample_img">
            <p>
                <!--图片路径-->
                <img src="p_small_001.jpg">
                <img src="p_small_002.jpg">
                <img src="p_small_003.jpg">
                <img src="p_small_004.jpg">
                <img src="p_small_005.jpg">
                <img src="p_small_006.jpg">
                <img src="p_small_007.jpg">
            </p>
        </div>
    </body>
    </html>
    View Code

    如果让一个非块级元素设置宽和高需要加上display元素

    span{
    500px;
    height:150px
    border:1px solid #000
    display:block;
    }

    六、边框

    简写方式

      border:width style color;

    单边定义

      border-left/right/top/bottom:width style color;

    border-width

      border-left/right/top/bottom-width

    boder-style

      border-left/right/top/bottom-style

    border-color

      border-left/right/top/bottom-color

    边框颜色,可以设置transparent(用于创建有宽度的不可见边框)

     

  • 相关阅读:
    AngularJs 与Jquery的对比分析,超详细!
    身份证号验证,获取户口地址、性别、出生日期
    前端面试·
    页面可见性(Page Visibility API) 可以有哪些用途?
    webSocket如何兼容低浏览器?(阿里)
    如何实现浏览器内多个标签页之间的通信?
    HTML5的form如何关闭自动完成功能?
    Label的作用是什么?是怎么用的?
    cookies,sessionStorage 和 localStorage 的区别?
    浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
  • 原文地址:https://www.cnblogs.com/pyrene/p/6514201.html
Copyright © 2020-2023  润新知