zoukankan      html  css  js  c++  java
  • CSS边框与边界

    • CSS中边框的使用
    • CSS中边界的使用

    16.1 CSS中边框的使用

               属性名称           属性值            说明
           border-color    
    十六进制        可依序设置上,右,下,左线颜色

                            英文名称        border-color:red(四边均为红色)

                            三原色            border-color:red green

    (上下为红色,左右为绿色)

                                            border-color:red green blue

    (上为红色、左右为绿色、下为蓝色)

                                            border-color:red green blue yellow

    (上右下左分别为红绿蓝黄)

            border-style     none            不显示边线

                             dotted            点线

                             dashed            虚线

                             solid            实线

                             double            双线

                  border-width     长度            border-0.2px 0.3px 0.4px 0.5px;

                                          (上右下左分别为0.2px 0.3px 0.4px 0.5px)

                                             border-1 2 3 4;

    属性名称:属性值1 属性值2 属性值3 属性值4(上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值

     

    简化方案:border: 长度 形态 颜色

            例如 border:1px solid black;

    16.2 CSS中边界的使用

                padding属性介绍(对象挤压自身)

                属性名称            属性值            说明

                padding-bottom        长度/百分比        元件下端边线的空隙

                padding-left        长度/百分比        元件左端边线的空隙

                padding-right        长度/百分比        元件右端边线的空隙

                padding-top            长度/百分比        元件上端边线的空隙

    简易写法:padding:10px(四边界均为10px

             padding:2px 4px(上下2px,左右4px

             padding:2px 6px 10px(上2px,左右6px,下10px

             padding:1px 2px 3px 4px(上右下左依次为1px 2px 3px 4px

                margin 系列属性介绍(对象挤压外界)

                属性名称            属性值                说明

                margin-bottom        auto                 自动调整空隙

                                    长度/百分比            设置下端空隙

                margin-left          auto                自动调整空隙

                                    长度/百分比            设置左端空隙

                margin-right        auto                 自动调整空隙

                                    长度/百分比            设置右端空隙

                margin-top            auto               自动调整空隙

                                    长度/百分比            设置上端空隙

    简化方案:margin:2px 4px

             margin:2px 6px 10px

             margin:1px 2px 3px 4px

    常用网页顶格设置:margin:0;

  • 相关阅读:
    WPF 下两种图片合成或加水印的方式(转载)
    Git reset与checkout的区别
    C# 串口导致电脑蓝屏一个可能的原因
    两个用于win7任务栏显示进度的dll
    批量远程执行shell命令工具
    基于zookeeper的主备切换方法
    代码的演变随记
    svn错误:Can't convert string from 'UTF-8' to native encoding
    not allowed to access to crontab because of pam configuration
    大数据利器
  • 原文地址:https://www.cnblogs.com/lifi/p/5664665.html
Copyright © 2011-2022 走看看