前端面试干货——CSS面经总结

两列布局实现

• float + margin 属性实现；
• float + overflow 属性实现；
• display 属性的 table 相关值实现；
• 使用绝对定位实现；
• 使用 flex 实现；
• 使用 Grid 实现；

三列布局

1. 左右绝对定位，中间加左右的padding
2. 左右浮动，中间会顶上去
3. flex实现
   先去除所有margin padding
   总体加flex，左右加宽
   中间加 flex:1
   设置以下order值定义排列顺序

CSS优先级

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
• 作为style属性写在元素内的样式
• id选择器
• 类选择器
• 标签选择器
• 通配符选择器
• 浏览器自定义或继承

H5和CSS3的新特性

1. HTML5
   • 新增语义化标签：<header> <nav> <section> <footer>
   • 新增多媒体标签：<audio> <video>
   • 新增Input类型：<input type= >
   • 新增表单属性
2. CSS3
   • 属性选择器：input[type]{}
   • 结构伪类选择器：:frist-child :nth-child(4) :last-child
   • 伪元素选择器：::before ::after
   • 新增盒子模型

     box-sizing：content-box
     盒子所占位置大小为width+padding+border（默认的）
     box-sizing：border-box
     盒子所占位置大小为width，padding和border就不会撑大盒子了

   • 新增过渡属性：transition

img标签

img标签是行内快元素，属于可替换元素（<input> <select>），这些元素往往没有实际的内容
img是特殊的可替换元素，同时具有行内元素、行内块、块级元素的特性