padding属性详细分析

<p>1.padding会增加元素的尺寸</p>
    <p>2.padding对内联元素的影响，对内联元素的垂直方向的影响是有的但视觉是没有</p>
    <a href="javasvript:">链接</a><span>我在a链接旁边(这里说明了这里padding在视觉上对水平方向是一直有用的)</span>
    <p></p>
    <a href="javasvript:">链接</a>
    <p>可以看到当没有颜色显示的时候感觉padding对内联元素没有影响，当放上了背景颜色了就会明白是有影响的，只是padding的影响发生了重叠，在视觉上感觉没有影响</p>
    <p>发生重叠的属性有纯视觉效果的，对外部尺寸没有影响的如：box-shadow outline</p>
    <p>发生重叠的属性有纯视觉效果的，并且对外部尺寸有影响的如：inline元素的padding</p>
    <div class="box">
        <a>链接</a>
    </div>
    <p>好处当某个链接a因为太小点不到的时候就可以加上padding</p>
    <P>利用padding制作可控高度的|管道符</P>
    <a href="#">登录<a href="#">注册</a></a>
    <pre>
        a + a:before{
            content:"";
            font-size: 0px;
            padding: 10px 3px 1px;
            margin-left: 6px;
            border-left: 1px solid saddlebrown;
        }
    </pre>
    <p>原理:在地二个a标签的前面加入一个元素因为padding: 10px 3px 1px;有了个长10px宽6px的空间格局在将他margin-left: 6px;这样就可以显的左右对称，因为只有border-left有边框</p>
    <p>其中font-size:是对行内元素中的幽灵节点的处理</p>
    <!--<p>再有在宽状nav下面放标题类型的文字，一般文字会紧靠nav的下面部分但我们要让他们直接有点间距如果给标题设置为块级元素设置padding-top就会有标题类型的文字就会填充而影响布局</p>
    <p>处理方式设置为 </p>
    <p>1.当标题类型的文字为块状在设置margin-top;</p>
    <p>2.当标题类型的文字为内联元素时在h1标签中在加个span标签并给他设置padding-top</p>
    <h3 id="hash"><span>标题</span></h3>-->
    <p>比如说定位的距离当我们的页面是有个position:fixed的导航的时候一般都会点位在这个的下面那我们就可以使用inline元属的padding-top就可以渲染到body的顶部，定位回来的时候就可以定位到顶部</p>
    <h3>标题</h3>
    <p>实际上对于非替换元素的内联元素，不仅padding不会加入行盒高度的计算，margin，border也都是如此，但实际上内联盒周围发生了渲染</p>
    <h2>padding百分比的学习</h2>
    <p>1.属性不同,padding不支持负值</p>
    <p>2.padding支持百分比，但是和height等属性的百分比计算规则有些差距,差距在于padding百分比无论是水平方向还是垂直方向均是相对于宽度计算的</p>
    <p>为什么高度也相对于宽度计算呢，因为如果padding的高度是相对于height的百分比计算的话那么有很多情况下的height都是NAN</p>
    <pre>
    在作用在块级元素上时候：    
        div{padding :50%;} //就可以实现一个正方形并且轻松实现自适应
        div{padding :10% 50%} //就可以实现一个长方形并且自适应
        这样就可以不用使用js来控制高度了
    在作用在内联元素上的时候：
        1.同样相对于宽度计算；
        2.默认的高度和宽带会有差异(内联元素的幽灵节点font-size:0px)
        3.padding会断行(padding区域会跟着内联盒模型中的行框盒子走)
    </pre>
    <h3>标签元素内置padding</h3>
    <p>很多元素都有内置padding比如说按钮button，这个时候我们为了控制padding</p>
    <button id="btn"></button>
    <label for="btn">按钮</label>
    <pre>
        button{
                position: absolute;
                clip: rect(0 0 0 0);
            }
            label{
                display:inline-block;
                line-height: 20px;
                padding:10px;
            }
    </pre>
    <p>label中的for和button中的id对应就可以了，这样按钮的高度就可以控制(各个浏览器的按钮高度不同)，而且行为也保留了</p>