前言2020年春季招聘启动。作为一个前端菜鸟，我也想在春招找个更好的实习，为秋招的自己助一臂之力。这篇文章是我面试前对cssboxmodel知识的总结。Feature1.基本概念CSS将页面上的所有元素设置成一个矩形框，每个框由以下部分组成：内容区域（content）：元素中的所有子元素和文本内容都排列在内容区域中,width和height是内容区域的一个属性padding：内容区域到边框的距离，会影响框的大小设置框的背景色时，颜色会延伸到padding，但是content只会显示在content中，border（边框）：框的边缘，border的内侧属于框的内侧，border的外侧属于框的外侧，会影响盒子的大小。设置边框，至少要设置三个样式：1.border-width：有默认值，一般为3px（视具体浏览器而定），可以分别指定不同方向的宽度2.border-color：默认为color3.border-style：默认为none，可能取值：dotted（虚线）、dashed（虚线）、double（双线）、solid（实线）可以分别指定样式不同方向的边界，可以同时指定三种样式，例如：border:1pxblacksolid（三种样式的先后顺序不分先后）Margin：不会影响框可见边框的大小，但它会影响框的位置和框实际占用的空间元素在页面上是按从左到右的方向排列的。默认情况下，设置左边距或上边距将移动自身，设置下边距或右边距将移动其他元素。也可以设置负值，这样盒子就会向相反的方向走。可见框的大小为content+padding+border2.标准框模型和IE框模型1.标准框模型2.IE框模型3.元素在水平方向水平布局，元素在其父元素中水平方向的位置由以下属性决定：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right必须满足等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区域的宽度如果等式不成立，则称为过渡约束，而equation会自动调整调整规则（只有margin（left和right）和width可以设置为auto）：如果七个值中没有auto，浏览器会自动调整margin-right；是最大的，margin自动调整为0。如果两个margin都是auto，width固定，元素居中，所以得到第一种水平居中方式：width:xxxpx;保证金：0自动；四、垂直布局默认父元素的高度被内容拉伸，子元素排列在父元素的内容区域。如果子元素的大小超过了父元素，就会溢出。这时候可以使用overflow属性来设置如何处理溢出元素。overflow属性可选值:visible：默认值，子元素会从父元素溢出，并在父元素之外显示hidden：溢出部分不显示scroll：生成两个滚动条，并使用scrollbar查看完整内容auto：根据需要生成滚动条指定某个方向单独处理：overflow-x：横向处理overflow-y：纵向处理5、内联元素的盒模型内联元素不支持修改宽高属性，即不支持手动修改内容区域大小，但可以设置（可能会被覆盖）margin：垂直边距不会影响页面布局（可能会被覆盖）设置内联元素的宽高：设置display属性，使其成为块级元素display属性可选值：inline：行内元素block：块状元素inline-block：行内块状元素（宽度和高度均可设置，不占一行）table：将元素设置为表格none：元素不显示在上面页面隐藏元素的两种方法：display:none隐藏元素vivibility:hidden隐藏元素，但元素仍然占据位置
