web前端开发面试题（未完待续）

Posted 2020-09-29

一、html与XHTML的不同：1）XHTML元素必须被正确地嵌套

                                             2）元素必须被关闭   如：<h1>……</h1>关闭

                                             3）标签名必须用小写字母

                                             4）XHTML文档必须有根元素

二、盒子模型：CSS框模型（BOX Model）规定了元素框处理元素内容、内边距、边框、和外边距的方式，俗称盒子模型。

三、多列布局分为：圣杯布局和双飞翼布局

          双飞翼布局（常用）和圣杯布局的相同点和不同点：

          相同点：1）中间栏放最前面（最先加载）

                              2）每一部分都要浮动（float）

                              3）左边：margin-left：-100%

                                    右边：margin-left：负的右边栏的定宽   如右边栏宽度为200px，则margin-left值为-200px

          不同点：解决中间栏不被遮挡的思路不一样

                             1.圣杯布局是通过padding的方式让出空间，再通过相对定位position:relative;将其推到两边。

                             2.双飞翼布局是通过创建一个子的div方式，在中间栏设置margin-left 和 margin-right 留出位置。

         附：    1、圣杯布局：多列布局的变种，边栏定宽，主体在一定范围内可自适应，并且优先加载

                                          实现思路：1）设置主容器div的padding（根据边栏位置设置left、right）和overflow（hidden）。

                                                            2）在主容器中先添加主体，再添加边栏。

                                                            3）设置主体width为100%（可适应浏览器窗口大小变化），

                                                                  float 为left（为边栏定位做准备）。

                                                             4）设置边栏，position采用relative ，左边栏需设置margin-left为-100%使其移动到主体前面

                                                                      以及left属性；右边栏设置margin-left为负的右边栏定宽以及right属性。