码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2021-05-24 07:03:34      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:页面   属性   otto   border   思想   通过   pad   复合   一个   

盒子模型
1.盒子模型由四部分组成,内容(content)(内容就是宽高的大小),内边距(padding),边框(content)外边框(margin)。
2.盒子大小由三部分组成,内容(content),内边距(padding),边框(border)。
3.什么是盒子模型?
盒子模型是css中重要的指导思想
盒子模型是网页布局的基石(标签)
它认为页面中所有的元素都可以看作为一个盒子。
它认为可以通过盒子的属性,而改变原素(盒子)在页面中的表现效果
它认为盒子间是相互影响的
margin:设置盒子间的距离,属性值为像素值
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
 
margin-right:右外边距
复合形式:margin
margin:值(上下左右相同的边距相同)
margin:值1(上下)值2(左右)
margin:值1(上) 值2(左右) 值3(下)
margin:值1(上)值2(下)值3(左)值4(右)
上下两个盒子外边距,取最大值
padding:设置的内容距离边框的距离,属性值为像素值
padding-top:上内边距(内容距离上边框距离)
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
复合形式:padding
padding:值(上下左右相同的边距相同)
padding:值1(上下)值2(左右)
padding:值1(上) 值2(左右) 值3(下)
padding:值1(上)值2(下)值3(左)值4(右)

盒子模型

标签:页面   属性   otto   border   思想   通过   pad   复合   一个   

原文地址:https://www.cnblogs.com/6-2-1/p/14760208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!