<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
*{/*去除页面原有边距*/
margin: 0;
padding: 0;
}
.wrapper{/*定义标题盒子*/
width: 400px;
height: 35px;
margin: 100px auto;
border: 1px solid red;
}
.tab-item{/*标题栏设置*/
float:left;
display: block;
font-size: 20px;/*字体大小*/
background-color: white;
}
a:hover{/*鼠标悬停变色*/
background-color:aqua;
}
ul{/*去除小圆点*/
list-style: none;
}
a{
text-decoration: none;/*去除下划线*/
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item"><a href="#">国际大牌</a></li>
<li class="tab-item"><a href="#">国妆名牌</a></li>
<li class="tab-item"><a href="#">清洁用品</a></li>
<li class="tab-item"><a href="#">男士精品</a></li>
</ul>
</div>
</body>
</html>
为什么我定义的盒子width为400,height为35,显示的却是502,46呢?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答
- it_lin_web 2019-05-09 20:06关注
你的盒子css代码加上这句box-sizing: border-box;
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 js调用html页面需要隐藏某个按钮
- ¥15 ads仿真结果在圆图上是怎么读数的
- ¥20 Cotex M3的调试和程序执行方式是什么样的?
- ¥15 一道python难题3
- ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
- ¥15 牛顿斯科特系数表表示
- ¥15 arduino 步进电机
- ¥20 程序进入HardFault_Handler
- ¥15 oracle集群安装出bug
- ¥15 关于#python#的问题:自动化测试