元素width:100%;设置padding出现横向滚动条的问题

当我们给块元素设置宽度为100%,然后再设置padding值想让里面的内容有一定的内边距时,会发现此时内边距的效果达到了,但是却出现了横向滚动条,

创新互联公司是一家集网站建设,乌翠企业网站建设,乌翠品牌网站建设,网站定制,乌翠网站建设报价,网络营销,网络优化,乌翠网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

原因:padding 是边框和里面内容之间的间隙,如果你设置了padding,padding的值是不变的,当内容+padding大于容器时,它会以容器的左上角为中心,保持padding的距离向外扩展,因此出现了滚动条,正常解决办法是,将元素宽度减去padding值的2倍,但是现在元素宽度值并不是具体的px值,而是百分数,

这种情况下解决办法有两种:
1.最简单的办法是去掉元素宽度值设置,width:100%,块级元素默认就是100%宽度,设置padding后,padding会被计算为宽,实际效果的宽度会自适应的调整为100%。
2.利用css3新特性给父级设置box-sizing:border-box; 此时元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,元素设定的宽度和高度会自动减去边框和内边距得到内容的宽度和高度。


文章名称:元素width:100%;设置padding出现横向滚动条的问题
本文地址:http://myzitong.com/article/jsscei.html