盒子属性 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-width: 4px,10px;
            /*样式:上横线,右圆点,下双横线,左虚线*/
            border-style: solid dotted double dashed;
            /*颜色:上绿,右红,下紫,左黄*/
            border-color: green red purple yellow;

2、按照方向来编写

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

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

        input{
            /*清除默认样式*/
            border:0;
            /*清除点击时的外线*/
            outline: none;
        }
        /*清除默认样式后,重新设置个人样式*/
        .username{
            width: 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;

 

上一篇:【ZYNQ Ultrascale+ MPSOC FPGA教程】第六章 FPGA片内RAM读写测试实验


下一篇:【ZYNQ Ultrascale+ MPSOC FPGA教程】第二章 硬件原理图介绍