为什么这个padding会往外挤呢?
来源：7-2 作业题
这个头像是黑豹
2018-08-09 22:39:14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式作业</title> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/index.css"> <!-- first --> <header> <div class="first"> <div class="iphone6-title"></div> <nav> <ul> <li>前端</li> <li>java</li> <li>ios</li> <li>Android</li> <li>php</li> </ul> </nav> <div class="wrap-top-content"> <img src="../img/1.png"> <h1>IMOOC</h1> <button>start</button> </div> </div> </header> <!-- second --> <section> <div class="second"> <ul> <li>关于慕课网</li> <li>关于课程</li> <li>核心团队</li> <li>新增专题</li> </ul> </div> </section> <!-- third --> <section> <div class="third"> <h1>响应式</h1> <article>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客，起飞页可以满足您的所有需求。几乎覆盖了各个行业，您只需要在模板上进行网页修改，即可完成自己的网页。这一切都是免费的。</article> </div> </section> <section> <div class="fourth"> <p>IMOOC</p> <a>Welcome to www.imooc.com</a> </div> </section> </head> <body> <script src="../js/index.js"></script> </body> </html>
/*first*/
.first{background:#B2C5CC;width: 100%;height: 5.7rem;}
.first nav ul{width: 60%;display: flex;margin:0 auto;}
.first nav ul li{flex:1;display: flex;justify-content: center;align-items: center;height: 0.7rem;
-webkit-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;}
.first nav ul li:nth-child(1){color: #afafaf;}
.first nav ul li:hover{color:#afafaf;}
.wrap-top-content{display: flex;justify-content: center;flex-direction: column;align-items: center;}
.first img{margin:.8rem 0 .3rem 0;}
.first h1{font-size: .18rem;color: #fff;}
button{height: .4rem;width: 1.5rem;border:none;display: flex;justify-content: center;align-items: center;
background:#fff;margin-top: .7rem;
-webkit-transition: background .3s ease-out;
-moz-transition: background .3s ease-out;
-o-transition: background .3s ease-out;}
button:hover{background:transparent;box-shadow: 0 0 10px rgba(0,0,0,0.1);color: #fff;border:1px solid rgb(255,233,195);}
/*second*/
.second ul{display: flex;}
.second ul li{display: flex;flex:1;justify-content: center;align-items: center;height: .6rem;color: #bababa;
-webkit-transition:color 0.2s ease-out;
-moz-transition:color 0.2s ease-out;
-o-transition:color 0.2s ease-out;}
.second ul li:first-child{color:#545454;}
.second ul li:hover{color:#545454;}
/*third*/
.third{width: 100%;height: 4rem;display: flex;flex-direction: column;align-items: center;}
.third h1{margin:1rem 0 .3rem 0;font-size: .2rem;color: #545454;}
.third article{width: 50%;}
/*fourth*/
.fourth{width: 100%;height: .7rem;display: flex;justify-content: space-between;align-items: center;
background:rgb(244,244,244);padding:0 .5rem 0 .5rem;}
.fourth p{font-size:.18rem;}写回答
2回答
-
你好，这里是因为你设置了宽度100%，然后又设置了左右的内边距，导致占据的总宽度超过100%，所以出现了滚动条，建议：可以添加box-sizing: border-box;例：
border-box指为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
若能解决你的疑问，望采纳。
祝学习愉快~
0 -
这个头像是黑豹
提问者
2018-08-09
0
相似问题
老师，这样为什么不能实现响应式啊？
回答 3
老师，关于轮播我有两个地方不是很明白
回答 2