zoukankan      html  css  js  c++  java
  • padding-使用必记

    前言

    说起了padding可谓是盒子模型中最常用的一个属性,你真的了解padding吗?那我请问您设置padding会影响盒子的宽度与高度吗?也许好多人会回答padding会影响到盒子的宽度与高度。在我看来,padding是不会影响盒子宽度与高度,padding会影响盒子宽度与高度的。前提是:

    1、padding值暴走,一定会影响尺寸
    2、width非auto,padding影响尺寸
    3、width为auto 或者box-sizing为border-box,同时padding没有暴走,不影响尺寸
                                                ------来源于--张鑫旭笔记-----

    一、padding值暴走,一定会影响尺寸

    接下来我们来看一看

    /**css代码*/
    .padd{
         30px;
        height: 30px;
        margin: 0 auto;
        padding: 60px;
        background-color: red;
    }
    <!--
        作者:java-script@qq.com
        时间:2017-10-26
        描述:html代码
    -->
    <div class="padd">
    
    </div>

    效果图:
    没有padding值时候。

    padding暴走

    二、 width非auto,padding影响尺寸

    定宽度的div,width不是auto则padding影响尺寸。

    /**css代码*/
    .padd{
         30px;
        height: 30px;
        margin: 0 auto;
        padding: 10px;
        background-color: red;
    }
    <!--
        作者:java-script@qq.com
        时间:2017-10-26
        描述:html代码
    -->
    <div class="padd">
    
    </div>

    如图:
    宽度为30px高度为30px,padding为10实际尺寸则为50px*50px

     三、width为auto 或者box-sizing为border-box,同时padding没有暴走,不影响尺寸

    先看看width为auto的时候。

    /**css代码*/
    html,body{
        padding: 0;
        margin: 0;
    }
    .contents{
        margin: 0 auto;
         400px;
        height: 300px;
        background-color: #4B546C;
    }
    .body{
        padding: 100px;
        height: 300px;
        background-color: #717FA5;
    }
    <!--
        作者:java-script@qq.com
        时间:2017-10-26
        描述:html代码
    -->
    <div class="contents">
        <div class="body">
            小小坤--padding-使用必记
        </div>
    </div>

    如图:
    没有设置padding值

    设置padding值

    如果div父元素没有设置宽度高度,div设置padding值,width:auto,则不会影响尺寸。如果div父元素设置固定宽度高度,div设置padding则,父元素会受到高度影响。由于div没有设置宽度高度,它的宽度与父元素是相同的,高度也如此。
    设置div的css box-sizing为border-box,是不会影响实际尺寸。如图

    总结

    通过上边的案例得到 padding值影响尺寸的前提是,宽度,与padding暴走与box-sizing为border-box三要素。只要记住了上边三要素。麻麻再也不要担心padding值引起宽度改变啦!!!

  • 相关阅读:
    python计算纹理特征
    遥感影像提取农作物种植分布数据之经验总结
    Python实现多线程调用GDAL执行正射校正
    Centos7.3 编译安装GDAL以及Python的GDAL包
    C#通过COM组件调用IDL的pro程序
    IDL实现矢量文件裁剪栅格数据
    HttpClient使用示列(post请求的)
    SpringBoot自带的定时功能
    mysql安装与启用
    dos命令之端口查看
  • 原文地址:https://www.cnblogs.com/xiaoxiaokun/p/7736630.html
Copyright © 2011-2022 走看看