盒子宽度默认是怎样的呀？
来源：4-7 编程练习
weixin_慕斯卡3305140
2020-02-19 02:20:14
border的尺寸不是向盒子外拓展嘛 为什么我的ul列表加上border以后元素的宽度会自动从100变成98？需要重新定义宽度100%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{margin:0px; padding:0px; margin:auto;font-family:"微软雅黑";}
.big{width:100px; margin: 0px auto;}
h3{background-color:#efefef;margin: 0;width: 100%; text-align: center;border: 1px #ececec solid;}
ul{
/*display:none;*/
text-align:center;
list-style-type: none;
line-height: 2em;
/*border: 1px #ececec solid;*/
/*width: 100%*/
}
.div2 ul{width: 100%}
h3:hover~ul{display: block;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好， 对于你的问题解答如下：
块级元素默认是填充满父元素。
以同学的代码为例： ul的父元素宽度是100px， 那么ul默认宽度也应该是100px; 但是，给ul设置border后，ul会重新计算内容的宽度，保证ul的内容宽度加上border值，刚好等于父元素的宽度。所以内容的宽度会变成98，结合左右border值，刚好填充满父元素。
如果给元素同时设置宽度百分百和border值，会导致元素实际占据页面的宽度值，超出父元素宽度，示例：同学这里给标题同时设置百分百宽度和border
建议：需要设置border时，不给子元素设置百分百宽度，让元素自己计算内容的宽度，填充满父元素。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题