UC知道div+css布局高手进
来源：百度知道 编辑：UC知道 时间：2024/05/31 09:44:09
小弟今天遇到个问题 请教下 代码如下
<style type="text/css">
.NBA{
width：190px；
}
a{display:block;
width：190px;
padding:10px;}
<style>
<body>
<div class="NBA">
<a href="#">logo</a>
<div>
问题来了 就是大家都知道 DIV最终的尺寸 是 内容+padding+border+margin
但是这个代码中DIV的宽度是190px
a标签 我设置了display：block； 设置成了块元素，而我设置其的padding为10px 向里面扩展啊 div不被撑大 但是当padding到达一定得数值时 div又会被撑大啊 很不解啊？这是为什么呢？忘高手指点迷津啊！小弟跪谢！
<style type="text/css">
.NBA{
width：190px；
}
a{display:block;
width：190px;
padding:10px;}
<style>
<body>
<div class="NBA">
<a href="#">logo</a>
<div>
问题来了 就是大家都知道 DIV最终的尺寸 是 内容+padding+border+margin
但是这个代码中DIV的宽度是190px
a标签 我设置了display：block； 设置成了块元素，而我设置其的padding为10px 向里面扩展啊 div不被撑大 但是当padding到达一定得数值时 div又会被撑大啊 很不解啊？这是为什么呢？忘高手指点迷津啊！小弟跪谢！
padding还是会把 <a>的边界撑大的
上面的写法 实际上<a>宽度是210px了
实际上width指的是内容的宽 而不是边界的宽
其实很简单的一个道理
padding 有padding-top padding-bottom padding-left padding-right
相信你都知道把.像你直接设置的padding:10px也就是4面都向内扩展10像素
当你只设置了div的宽为190像素时
如果你四面都向内扩展10像素.高肯定发生了变化(高了20个像素),宽没发生变化
同理如果你设置的padding:100px;时高增加了(200个像素) ，而宽本来就有190个像素.然而里面还有字所以宽怎加了10像素+字的宽度 现在明白了吧