首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

第十四讲:margin和padding(二)

margin:0 auto;盒子居中

只有标准流的盒子,才能使用margin:0 auto; 居中盒子(不是文本)必须要有明确的width。也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;如:

【案例】

CSS

*{

margin: 0;

padding: 0;

}

.box1{

width: 300px;

height: 100px;

background-color: pink;

margin: 0 auto;

}

.box2{

width: 200px;

height: 200px;

background-color: skyblue;

float: left;

margin: 0 auto;

}

HTML

box1

box2

【运行结果】

【分析】

box1是标准流盒子,box2是浮动盒子,都有明确的width,都设置了margin:0 auto; 居中盒子。很显然box1盒子居中了,box2盒子没有居中。

【文本居中】

文本的居中:text-align:center;

margin和padding特点

特点1

善于使用父亲的padding,而不是儿子的margin。margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。

【案例】

CSS

*{

margin: 0;

padding: 0;

}

div{

width: 500px;

height: 300px;

/*border: 1px solid orange;*/

background-color: skyblue;

}

p{

margin-top: 20px;

width: 100px;

height: 200px;

background-color: pink;

}

HTML

段落

【运行结果】

【分析】

给p设置一个margin-top的值,此时div和p一起向下移动,而我们的本意是让p与div有一定的距离。虽然可以给div加一个border:1px solid orange;来解决,但是最好不要用这个marign表达父子之间的距离。

案例中的css去掉注释border:1px solid orange;后浏览器运行结果如下所示:

特点2

继承的宽度 padding不会被挤开,行内元素尽量不用上下的padding和margin。如:

【案例】

CSS

*{

margin: 0;

padding: 0;

}

.box1{

width: 200px;

height: 200px;

background-color: skyblue;

padding: 20px;

}

.box2{

background-color: pink;

padding-left: 20px;

padding-right: 20px;

}

HTML

box2

【运行结果】

【分析】

box2继承box1的宽度,box2没有因为增加 padding而导致宽度增加,如图所示:

当去掉box2的padding时,浏览器运行结果如下:

因此无论是给box2加左右padding还是不加左右padding,都不会影响box2的宽度大小。

打赏规则

为了避免对于打赏模式产生误解,说明一下几点内容:

1.打赏纯粹自愿,金额不限;

2.打赏不能作为解答前端技术疑问的理由;

3.打赏不能作为催促更新文章的理由;

4.打赏不能帮你做毕业设计或论文;

5.打赏不能帮你做工作中的项目;

6.总之:打赏就是这不能那不能,只是单纯打赏而已。

声明

* 公众号(QD前端基地)内转载文章全部用于学习交流,如有涉及版权问题请与我联系,我会删除相关文章。给您带来不便敬请谅解,谢谢!

* 公众号(QD前端基地)内原创文章如内容不符合事实或涉及其他方面的问题,请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载,如有雷同纯属巧合。

* 转载公众号(QD前端基地)内的文章,请先与本文作者联系经过同意后方可转载,并注明相关出处和作者信息且留下原文链接地址,这是对文章作者的尊重,也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】:xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号,提供Web前端开发教程,是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下,也许你就成为牛逼的前端高手呢~

微信公众号:qdbase

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190117G0E7KR00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券