前端面试-html、css

标准盒模型和怪异盒模型？

答：默认是标准盒模型，设置的width和height不包含padding和border，设置padding和border会向外撑大盒子。设置box-sizing：border-box改成怪异盒模型，设置的width和height包含padding和border， 设置padding和border不会向外撑大盒子，会向内挤压盒子内容区域。

水平竖直居中方式？

答：子绝父相，子上下左右均0，然后margin:auto;
父设置flex，子margin：auto

双飞翼布局和圣杯布局？

答：圣杯：中间栏width100%，左右用padding给左右两栏留出位置，三栏全部浮动，左右两栏利用margin-left移动到对应位置，然后左右两栏使用相对定位到指定位置。缺点是中间栏width小于左右栏时会变形。
双飞翼：中间栏两层dom，内层设置左右外边距给左右两栏留出位置，三栏全部浮动，左右两栏利用margin-left移动到指定位置。不会变形，但是要多加一层dom

flex布局属性？

答：display:flex
justify-content: center、space-between、space-around、space-evenly、start、end
align-items：center、strech
flex-direction：row、column
flex-wrap：nowrap、wrap

BFC

答：块级格式化上下文、独立的布局容器、内部元素布局不会影响外部元素、浮动元素高度会计算、内部元素垂直外边距会折叠。开启方式：浮动、定位、overflow、flex、行内块、html根节点

响应式布局如何实现？

答：相对单位：rem、vw、vh
@meida screen （min-width：320px）{}
@meida screen （min-width：640px）{}

外边距塌陷和解决方式？

答：外边距塌陷指的是子元素设置上外边距会把父盒子带着一起下移。解决办法有把子元素上外边距改为padding、给子元素开启BFC、给父元素设置一个::before伪元素把父元素和子元素隔开

display有哪些值？

答：block、inline-block、inline、flex、none、inherit

重绘和重排？

答：重绘：改变元素的颜色、背景等样式
重排：改变元素大小、位置等样式，引起布局改变
避免重排可以使用transform替代定位

如何隐藏元素？

答：display:none,元素不可见，不再占据文档流位置，会触发重排，绑定的事件自然不会触发
visibility：hidden，元素不可见，还占据文档流位置，不会触发重排，绑定的事件不会触发
opactiy：0，元素不可见，还占据文档流位置，不会触发重排，绑定的事件还会触发

em和rem的区别？

答：em是本身元素的font-size大小，rem是html根节点的font-size大小

css的calc()函数只能计算加减嘛?

答：不是，乘除也可以计算

伪元素和普通标签引入icon的区别？

答：伪元素引入iconfont使用unicode模式，给伪元素添加font-family：iconfont，设置content为对应icon的unicode编码即可，不会出现在dom中；普通标签可以直接使用class模式，设置对应类名即可

伪元素的应用？

答：可以绘制线条，三角形等；还可以用于清除浮动和外边距塌陷

css选择器和优先级？

答：id、class、标签