前端最全最广基础知识大厂CSS面试题

前端一面基础知识 ①——CSS面试题
1.如何理解语义化

①让人更容易读懂（增加代码可读性）②让搜索引擎更容易读懂（SEO问题，让搜索排名靠前“钱”）③正确的标签做正确的事情④页面内容结构化
2.哪些标签是块级元素？哪些标签是内联（行内）元素？

块级（display：block/table）：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table等内联（display：inline/inline-block）：span、img、button、input、b、q、i、a、em、label等
3.盒子模型的宽度（offsetWidth）如何计算？
#div1{
width: 100px
padding: 10px
border: 1px solid #ccc
margin: 10px
}
复制代码
    首先要知道offsetWidth的概念是什么？
    其实 offsetWidth = （ 内容宽度 + 内边距 + 边框 ）如下图

所以这道题的答案也就是100px + 20px + 2px = 122px
    那如果要让这里的offsetWidth = 100px要怎么做呢？
    我们可以设置box-sizing ： border-box，这样设置之后，offsetWidth就会变成100px了，这里之后的内容宽度就会被减小，而内边距和边框的宽度是不变的，也就是此时的offsetWidth = 78px + 20px + 2px
4.CSS3新增了哪些属性？
    只罗列部分常见、常用的属性

动画属性

@keyframesanimation
边框属性

border-imageborder-radiusbox-shadow
颜色属性

opacity
「弹性盒子模型（Flexible Box）」

flexalign-contentalign-itemsalign-selfjustify-contentorder
网格（Grid） 属性

grid-columnsgrid-rows
超链接(Hyperlink) 属性

target
2D/3D 转换属性

transformtranslate，可以控制元素的水平或垂直移动scale，可以控制元素的放大缩小，以1为界限界定放大还是缩小rotate，可以控制元素的旋转，按角度旋转设置translate3d，可以控制Z轴skew，对元素进行倾斜
过渡（Transition） 属性

transition

5.margin上下左右分别设置负值，有何效果？

top、left：设置负值，该元素会向上向左移动right：设置负值，右侧元素左移，自身不动bottom：设置负值，下方元素上移，自身不受影响
6.BFC理解和应用
是什么？

Block format content，块级格式化上下文是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
应用

清除浮动作用：解决父元素高度塌陷问题；解决外边距重叠问题；清除内部元素浮动
BFC如何产生？

根元素

float属性【不为】none;

display属性【为】:line-block,table-cell,line-flex,flex

position属性【不为】:static,relative;

overflow属性【不为】:visible;

7.float布局问题，手写clearfix
圣杯布局、双飞翼布局

需求：三栏布局，左中右，中间一栏最先加载和渲染，两侧内容固定，中间内容随着宽度自适应，一般用于pc网页大体关键步骤：

①使用float布局②两侧使用margin负值，以便和中间内容横向重叠③防止中间内容被两侧覆盖，一个用padding、一个用margin

详情建议参考文章 css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
手写clearfix
clearfix:after{
content: ’ ’
display: table
clear: both
}
复制代码
8.flex画色子

主要考察对flex的应用，直接上代码了

复制代码
9.absolute和relative分别依据什么定位？

absolute：相对于父级定位设置为relative的元素偏移，会一层层往上寻找，直至找到根元素，相当于浏览器页面定位。它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离relative：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离
10.居中对齐有哪些实现方式？
水平居中：

inline元素：text-align：centerblock元素：margin：0 auto直接absolute：（ left：50% + margin-left：负值）translateXflex：（ display: flex;     justify-content: center;）
垂直居中：

inline元素：height = line-heightabsolute：（ top：50% + margin-top：负值 ）translateYflex：（display: flex;     flex-direction: column;     justify-content: center;）
11.line-height的继承问题

①具体数值、直接继承②比例，继承该比例③百分比，如200%，先计算出来，再继承该值
12.rem是什么？响应式的常见方案有哪些？
    rem：相对于根元素，是相对长度单位，常用于响应式布局
    响应式的常见方案有哪些？

媒体查询flex 布局grid 布局（兼容性较差）百分比布局
13.网页视图尺寸是什么？

vh、vw，网页视口高度、宽度的1%

作者：EvenyYlzz
链接：https://juejin.im/post/6865946058795515918
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。