面试题记录

记录一下自己实际遇到的面试题。和其他文章内容可能有重复。
1.盒子模型是什么
盒子模型包括了content、padding、border、margin

2.css获取的元素width是哪个部分的宽度
这和box-sizing属性有关。box-sizing可以设置的分别是content-box（默认值），padding-box，border-box三种。
分别对应的width是content、padding、border内的宽度。
3.position有几种属性值
static（默认）、absolute、relative、fixed、sticky、inherit
4.清除浮动的方式
浮动让元素脱离文档流，使浮动元素在文档流里不占位置，即后边的元素（准确地说是块级元素）忽视浮动元素的存在
1.额外标签法
在最后一个浮动元素后添加一个空标签。设置clear:both
闭合浮动后，父元素自动检测子盒子最高的高度，然后与其同高。
原理：当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性规定元素的哪一侧都不允许其他元素浮动），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它

2.父级添加overflow:hidden
触发BFC，给父元素添加overflow:hidden;
BFC是一个独立的渲染区域，只有块级Box参与，规定了内部的块级Box如何布局，里面的子元素不会在布局上影响外面的元素，即是浮动元素与其他元素的交互限定区域。

3.使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
.clearfix{
        *zoom: 1;
}

https://blog.csdn.net/qq_35220554/article/details/79982256
http://www.iyunlu.com/view/css-xhtml/55.html