css面试题（一）

一，盒子水平居中垂直居中的五大方案；https://www.cnblogs.com/fsg6/p/12707898.html

二，圣杯布局（左右固定，中间自适应）；https://www.cnblogs.com/fsg6/p/14530741.html

 

 三，标准盒模型和怪异盒模型（ie盒子模型）和flex弹性模型

2-1 content-box
标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
标准盒模型下盒子的大小  = content + border + padding + margin

2-2 border-box(怪异盒模型,ie模型)
怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin
（一般用怪异盒模型，只要给width,自动会计算，不用调padding ）

2-3。flex弹性盒布局，一般在移动端用的多，开启flex容器，可以对子项的主轴和侧轴进行排列，兼容性不好
    justify-content属性定义了项目在主轴上的对齐方式。
    align-items属性定义项目在交叉轴上如何对齐。

CSS Grid 网格布局教程：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

延伸问题

js如何获取和模型对应的宽和高
（1）dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
（2）dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高
（3）window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。通用性强
（4）dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。通用性强
（5）dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

高度塌陷以及边距重叠问题；https://www.cnblogs.com/fsg6/p/12715048.html

 

4.说说样式权重的优先级;

!important > 行内样式 > id > class > tag

样式权重可以叠加, 比如 id>class