盒子模型

网页上的每一个标签都是一个盒子，接下来我们学习下这个东西


盒子都有四个属性.png

每一个盒子都有四个属性

  • content：内容

    • 盒子里面装的东西
    • 网页中通常指文字和图片

  • padding：内边距

    • 怕盒子里面装的(贵重的)东西损坏。而添加的泡沫或者其他抗震的辅料

  • border：边框(也可以理解为盒子本身)

  • margin：外边距，把盒子之间分开

    • 盒子摆放的时候不能全部堆放在一起，盒子之间的要留一定的空隙保持通风，同时也是为了方便取出。

  • 标准盒子模型

标准盒子模型.png

  • IE盒子模型

IE盒子模型.png

盒子都有四个属性

  • 1、内容（content）- 属性
content属性.png
  • 2、填充（padding，内边距）- 属性
padding属性.png

padding写法.png
  • 3、边框（border）- 属性
border属性.png
  • 4、边界（margin，外边距）- 属性
margin属性.png

margin用法.png

练习： 关键：搞清楚四个属性分别对应什么即可

QQ截图20160906140206.png

QQ截图20160906140333.png

QQ截图20160906140424.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS入门笔记 － 认识盒子模型
    引言 这次给大家带来了CSS－盒子模型部分的笔记，大家一同交流😊 认识盒子模型之前，先来了解一下CSS元素的分类吧...
    zhaolion阅读 4,338评论 9赞 85
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1赞 92
  • 从CSS盒子模型说起
    前言 总括： 对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结 原文地址：从CSS盒子模型说起 知乎专栏...
    秦至阅读 792评论 0赞 3
  • (第十天)CSS样式之盒子模型
    盒子模型简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CS...
    IOLG阅读 1,222评论 0赞 0
  • 与你同在
    ‌半夜12.28分，我辗转反侧，下铺因喝多了酒，而呼呼大睡，感觉别人似乎也没入睡，今天是个什么日子，让人如此不安分...
    MR2_IQNA阅读 269评论 0赞 1