内边距——padding
性质:
1.给一个盒子设置内边距会撑开盒子,需要精确的计算盒子的宽和高。可以考虑用css3标签
box-sizing:border-box不会因为设置内边距而撑开盒子。
2.如果盒子不指定width,或者不指定height就不会撑开盒子。
3.padding和text-indent相比更具有优越性,text-indent不能修改文字和盒子边框的距离。
外边距margin:
性质:
1.可以让块级盒子水平居中:
必须有宽度: width:1200px(一般网站的版心宽度)
必须有左右外边距为auto: margin:0 auto;(上下边距为0,左右边距为auto)
2.可以让行内元素和行内块元素水平居中:(不举例说明了,大家可以亲自动手试一试)
必须有宽度
左右外边距为auto
为父元素添加text-align:center;
3.如果给嵌套的元素都添加外边距会引起外边距塌陷的问题。
例如:只给父元素添加外边距,效果如图
给父元素和子元素同时添加外边距,导致塌陷,效果如图
4.清楚内外边距
因为电脑浏览器都会有自己自带的pc端的页面样式,在进行网站开发时为了比卖你浏览器的自带样式对网站带来的影响,提升网站的用户体验度,也为了便于前端人员代码编写
在pc端网站的搭建过程中,会有一个专门的初始化css样式,这个文件中就会有清楚内外边距的代码
* {
/* 把浏览器默认的内外边距清零 */
margin: 0;
padding: 0;
/* css3盒子属性 */
box-sizing: border-box;
}
如果没有初始化清楚内外边距,浏览器会自带一个内外边距
初始化清楚内外边距之后:
一起加油吧!!!努力一定会有收获!