如何理解盒模型及其content、padding、border、margin?

大家好~  我是一枚正直纯洁的苦逼程序员!!!!!

常见的盒模型元素有哪些?各有什么属性?

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。   网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。   这些属性可以把它转移到日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。   每个盒子都有:边界、边框、填充、内容四个属性;   每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。css盒子尺寸的计算: 我们通过给高宽赋值,来定义content(内容)的高度和宽度。如果没有做任何声明,那么高度和宽度的默认值将是自动(auto)。即在css中给一个块级元素的width和height属性赋值时比如div{width :200px; height: 200px}时,其中的width 和height只是对content部分设置的,即上图中content区域的长和宽。而不是内容,内边距,边框的总和(但在IE的早期版本包括IE6中,盒子模型的width和height却是内容+内边距+边框的总和,尽管符合人们思考的逻辑习惯,但是不符合规范,造成了很多兼容性问题。)

大家可看一下这篇博客https://www.cnblogs.com/WebShare-hilda/p/4684161.html

ppt

视频

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,523评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 望南山月, 浩然当空, 归雁与长虹。 人何在, 竹林泉岸, 对青山。
    终南山故事阅读 522评论 2 3