.container{padding:0300px0200px;/*焦点*/}.main,.left,.right{最小高度:130px;向左飘浮;位置：相对；}.main{背景颜色：蓝色；宽度：100%；}.left{背景色：浅绿色；宽度：200px；左边距：-100%；*焦点*/}.right{返回底色：海蓝宝石；宽度：300px；右边距：-300px；/*重点*/}一、HTML面试题1、如何理解语义？我的回答：语义化就是实现同样的功能，尽量使用section，main，这些html中的常规结构来写dom结构。这很容易理解。优化后答案：主体结构用main、section、footer、title、h2、h3写，列表用ul、li，正文用p标签。通过遵循相同的规则，使彼此能够理解对方的意思，这也是语言的功能，所以称为语义。总的来说，它很容易理解，对于搜索引擎SEO来说也很容易。2、默认情况下，哪些元素是块级元素，哪些是行内标签？我的回答：div、p、ul、ol等占单行，内联元素spanimg按钮输入不会占单行。二、CSS面试题1、盒模型的计算offsetWidth=width+innermargin+border，无outermargin；如下图使用border-box：2.margin垂直重叠相邻元素的margin-top和margin-bottom重叠空白内容的也会重叠答：15px3.margin设置负值对于margin-top和margin-left负值，元素向上和向左移动。如果margin-right为负数，则右边的元素向左移动，元素本身不受影响。如果margin-bottom为负数，下面的元素会上移，元素本身不受影响。4.BfC的理解和应用？块格式上下文，块级格式化上下文。一个独立的渲染区域，内部元素的渲染不会影响边界外的元素。最常见的应用：clearfloat；构成BFC的常见条件：float不是noneposition，是absolute或fixedoverflow，不是visibledisplay，是flexinline-block等。设计的目的是必须能够容纳其内部元素，并且里面的分子不要乱跑伤害别人。不要脱离文档流。就像吞噬一切的黏液。推荐使用伪元素clearfix:after.clearfix{content:'';（这破名字是谁起的）HolyGrail布局——使用float布局——两边使用负边距值，以便与中间内容横向重叠——防止中间内容被两边遮住，一个使用padding，另一个使用margin圣杯布局.container{padding:0300px0200px;/*焦点*/}.main,.left,.right{最小高度:130px;向左飘浮;位置：相对；}.main{背景颜色：蓝色；宽度：100%；}.left{背景色：浅绿色；宽度：200px；左边距：-100%；*焦点*/}.right{返回底色：海蓝宝石；宽度：300px；右边距：-300px；/*重点*/} main
