A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

感觉盒子模式有点模糊,就是不知道怎么用,求指点

评分

参与人数 1黑马币 +3 收起 理由
乔兵 + 3

查看全部评分

1 个回复

正序浏览
本帖最后由 第一印象 于 2013-9-29 14:26 编辑

盒子模型就是把所有内容封装到div中,把每一个div当作一个盒子,比如说将"你好中国"放到一个层里,这里我将它的id属性设置为id1,将id1这个层放到另外一个层中,这个层我设置它的id属性为id2,这时候我们就得到两个层了,id2里面有一个id1,id1里面有内容"你好中国",这个id1就是内层,内层我们可以把它看作一个小盒子,外层id2我们可以把它看作一个大盒子,如果这时候我们想要对id1这个内层设置样式,那么id1这个小盒子的边框到id2这个大盒子的边框的距离我们把它叫做外边距,可以用margin属性来调整它与外面盒子的间距,内容"你好中国"到id1的边框的距离叫做内边距,我们可以用padding来调整,这就是盒子模型,以下是适合id1的盒子模型图:


这儿可能就又有一个疑问了,假如我的id2是放在body中的,这时候就出现三个盒子嵌套了,这又是个什么情况呢?这时候如果相对于id2这个层来说(也就是说如果要给id2这个层设置样式),那么body就是外面的大盒子,
id2就是小盒子了,id2这个层的边框到body的距离可以用margin属性来设置,而id2这个层里面的所有东西可以当作id2的内容来处理,它的内容到id2的边框的距离我们可以用padding属性来设置

补充:如果需要单个设置上下左右的内边距的话,可以用padding-top,padding-bottom,padding-left,padding-right来设置
          如果需要单个设置上下左右的外边距的话,可以用margin-top,margin-bottom,margin-left,margin-right来设置
详细对应关系如图所示

评分

参与人数 1技术分 +1 收起 理由
乔兵 + 1

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马