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 中的 None 与真假
    AVR第5课:蜂鸣器
    Solr使用入门指南
    EJB究竟是什么,真的那么神奇吗??
    Android 各个版本号WebView
    android SQLite 使用实例
    BackTrack5 (BT5)无线password破解教程之WPA/WPA2-PSK型无线password破解
    腾讯QQ企业邮箱POP3/SMTP设置
    【LeetCode】Substring with Concatenation of All Words
    PreferenceFragment 使用 小结
  • 原文地址:https://www.cnblogs.com/xiaoxiaokun/p/7736630.html
Copyright © 2011-2022 走看看