梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > 【CSS3框模型】外边距(margin)属性和内边距(padding)属性学习心得与知识总结

【CSS3框模型】外边距(margin)属性和内边距(padding)属性学习心得与知识总结

时间:2018-07-30 02:04 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

【CSS3框模型】外边距(margin)属性和内边距(padding)属性学习心得与知识总结

【CSS3框模型】外边距(margin)属性和内边距(padding)属性学习心得与知识总结

 

1、框模型
 

框:盒子(box)
页面元素皆为框
框模型:(box-model)定义了元素处理内容,内边距,外边距,边框的一种方式
 
元素的 width和height属性 指定了内容区域的宽度和高度
 
元素的边框是绘制于元素外围的一条线,会扩大元素的占地尺寸
 
内边距和外边距 也会增加元素的占地尺寸,但不会影响元素的内容区域
 
元素的实际宽度=左右外边距+左右边框+左右内边距+width
 
元素的实际高度=上下外边距+上下边框+上下内边距+height

2、外边距

1、什么是外边距?
围绕在元素边框周围的空白区域
作用:
1、控制元素与元素之间的距离
2、移动元素位置
2、属性
margin:四个方向的外边距
margin-方向:单边设置
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
 
取值:
1、px 像素
2、%
3、auto(自动)
4、负值
3、取值-auto
左右方向设置为 auto 时,允许元素在其父元素中水平居中对齐,前提,必须设置该元素的宽度
4、取值-负值
移动元素,向着反方向移动
margin-left:-10px;向左移动10px
margin-top:-10px;向上移动10px
5、margin 属性的取值数量
margin:value;四个方向外边距
margin:v1 v2;上下  左右
margin:v1 v2 v3;上  左右  下
margin:v1 v2 v3 v4;上右下左
ex:
margin:0 auto;水平居中标准写法
6、页面中具备默认外边距的元素
h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
通过 CSS Reset 的方式 重写默认外边距
7、特殊效果
1、外边距合并
当两个垂直外边距相遇时,它们将形成一个外边距
合并后的外边距的高度等于两个发生合并外边距高度重的较大者
2、外边距的溢出
在某种特殊场合下,给子元素设置外边距时,效果却作用在父元素的外边距效果上了。
特殊场合:父元素不设置边框时,为父元素中的第一个子元素设置上外边距时,或为最后一个子元素设置下外边距时
解决方案:
1、为父元素添加边框
有瑕疵,父元素高度会发生改变
2、为父元素添加内边距来取代子元素外边距
有瑕疵,影响元素的尺寸
3、块级元素,行内元素,行内块元素的上下外边距
上下外边距对行内元素 无效
上下外边距对行内块元素的影响是,整行元素都会受到影响

3、内边距

1、什么是内边距
内容区域与边框之间的空间
会扩大元素边框所占用的区域
2、属性
padding:四个方向内边距
padding-top:
padding-bottom:
padding-right:
padding-left:
取值:
1、px
2、%
取值数量:
padding:value;四个方向内边距
padding:v1 v2;上下  左右
padding:v1 v2 v3;上  左右  下
padding:v1 v2 v3 v4;上右下左
3、特殊影响
为行内元素设置上下内边距时,只会影响元素自身,并不会影响到其他元素
4、属性-box-sizing
1、作用
指定边框,内边距,内容区域的计算模式
默认:width和height只负责定义内容区域的尺寸,border,padding额外添加到元素上的
2、属性 & 值
属性:box-sizing
取值:
1、content-box
默认值,在元素的width和height之外绘制边框和内边距
2、border-box
边框和内边距会包含在width和height之中
本文标签:

版权声明:本文:【CSS3框模型】外边距(margin)属性和内边距(padding)属性学习心得与知识总结 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部