黑马程序员技术交流社区

标题: 今天看了下HTML,盒子模式有点乱,谁能讲下它到底怎么用啊 [打印本页]

---

作者: 周志龙    时间: 2013-9-29 11:59
标题: 今天看了下HTML,盒子模式有点乱,谁能讲下它到底怎么用啊
感觉盒子模式有点模糊,就是不知道怎么用,求指点

---

作者: 第一印象    时间: 2013-9-29 14:17


盒子模型就是把所有内容封装到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来设置
详细对应关系如图所示

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2