zoukankan      html  css  js  c++  java
  • 盒子属性 padding、border、margin

    ------------恢复内容开始------------

    一、padding 内边距,盒子边框到内容的距离

                /*表示内边距到内容的上左下右距离*/
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 20px;
                padding-right: 50px;
    
                /*一个参数表示上下左右都为20px*/
                padding:20px;
    
                /*两个参数表示上下距离20px 左右距离40px*/
                padding: 20px 40px;
    
                /*三个参数表示上20px,左右各30px,下40px*/
                padding: 20px 30px 40px;
                /*四个参数表示上20px,右30px,下40px,左50px*/
                padding: 20px 30px 40px 50px;

    二、border 外边框

    1、按照三要素来编写border:粗细width、样式style、颜色color

                /*上下外边距4px,左右外边距10px*/
                border- 4px,10px;
                /*样式:上横线,右圆点,下双横线,左虚线*/
                border-style: solid dotted double dashed;
                /*颜色:上绿,右红,下紫,左黄*/
                border-color: green red purple yellow;

    2、按照方向来编写

                /*设置上方向的粗细、样式、颜色*/
                border-top- 4px;
                border-top-style: solid;
                border-top-color: red;
                /*设置下方向的粗细、样式、颜色*/
                border-bottom- 5px;
                border-bottom-style: solid;
                border-bottom-color: blue;

    3、清除样式,通常应用于input输入框

            input{
                /*清除默认样式*/
                border:0;
                /*清除点击时的外线*/
                outline: none;
            }
            /*清除默认样式后,重新设置个人样式*/
            .username{
                 180px;
                height: 40px;
                font-size: 20px;
                padding-left: 10px;
                border:1px solid #666;
            }
            .username:hover{
                border:1px solid orange;
            }

    三、margin 外边距,盒子与盒子间的距离

    左右方向外边距会合并,以下表示两个盒子左右相隔120px

    margin-right: 20px;

    margin-left: 100px;

    上下方向上会出现外边距合并(外边距塌陷)的情况,以下表示两个盒子上下方向相隔100px

    margin-bottom: 30px;

    margin-top:100px;

     

  • 相关阅读:
    汉文博士 0.5.6.2345 修订版发布
    汉文博士 0.5.6 正式版发布
    汉文博士 0.5.5 正式版发布
    汉文博士新测试版发布(0.5.4.2228)
    海盗(Haidao)网店系统最新官方版
    ZipMarket数字内容/素材交易网站源码项目
    windows phone 8 使用页面传对象的方式 实现页面间的多值传递
    仿win8磁贴界面以及功能
    三角形状的点阵模糊效果iOS源码
    Coding iOS客户端应用源码
  • 原文地址:https://www.cnblogs.com/nanjo4373977/p/12408835.html
Copyright © 2011-2022 走看看