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;

  • 相关阅读:
    关于在MAC上进行 LARAVEL 环境 Homestead 安装过程记录
    js 贷款计算器
    js 实现阶乘
    js 两点间距离函数
    composer Your requirements could not be resolved to an installable set of packages
    vue 项目优化记录 持续更新...
    vue 项目打包
    vue 真机调试页面出现空白
    vue 真机调试
    谈谈-Android状态栏的编辑
  • 原文地址:https://www.cnblogs.com/lifi/p/5664665.html
Copyright © 2011-2022 走看看