前端面试题CSS

会有一股神秘感。 提交于 2020-04-02 06:13:28

文章目录

  1. 万能居中
  2. BFC优化
  3. 盒模型哪两种模式?什么区别?如何设置
  4. 常用清除浮动的方法,如不清除浮动会怎样?
  5. 删格化的原理
  6. 纯css实现三角形
  7. 高度不定,宽100%,内一p高不确定,如何实现垂直居中?
  8. 至少两种方式实现自适应搜索
  9. 设置一段文字的大小为6px
  10. css菊花图
  11. 关于em
  12. 关于vh, vw
  13. Flex布局
  14. overflow原理
  15. 实现自适应的正方形:
  16. 标准模式和怪异模式
  17. CSS3实现环形进度条
  18. css优先级
  19. 万能居中
    1.margin: 0 auto;水平
    2.text-align: center;水平
    3.行高,垂直
    4.表格,center,middle;水平垂直
    5.display:table-cell;模拟表格,
    6.绝对定位,50%减自身宽高
    7.绝对定位,上下左右全0,margin:auto
    8.绝对定位加相对定位。不需要知道宽高
    9.IE6,IE7:给父元素设一个font-size:高度/1.14,vertical-align:middle

  20. BFC优化
    块格式化上下文, 特性:

使 BFC 内部浮动元素不会到处乱跑;
和浮动元素产生边界。

  1. 盒模型哪两种模式?什么区别?如何设置
    标准模式: box-sizing: content-box; 宽高不包括内边距和边框
    怪异模式: box-sizing: border-box

  2. 常用清除浮动的方法,如不清除浮动会怎样?
    当父元素不给高度的时候,内部元素不浮动时会撑开, 而浮动的时候,父元素变成一条线, 造成塌陷.

额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
父元素添加overflow:hidden; (触发BFC)
使用after伪元素清除浮动(推荐使用)
使用before和after双伪元素清除浮动

  1. 删格化的原理
    比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式

  2. 纯css实现三角形
    // 通过设置border
    .box
    {
    width:0px;
    height:0px;

        border-top:50px solid rgba(0,0,0,0);
        border-right:50px solid  rgba(0,0,0,0);
        border-bottom:50px solid green;
        border-left:50px solid  rgba(0,0,0,0);
        }
  3. 高度不定,宽100%,内一p高不确定,如何实现垂直居中?
    Swift代码 http://www.gendan5.com/swiftcode.html
    verticle-align: middle;
    绝对定位50%加translateY(-50%)
    绝对定位,上下左右全0,margin:auto
  4. 至少两种方式实现自适应搜索
    rem, em
    百分比
    媒体查询
    bs, antd等的栅格布局
  5. 设置一段文字的大小为6px
    谷歌最小12px, 其他浏览器可以更小
    通过transform: scale实现
  6. css菊花图
    四个小圆点一直旋转

// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s

  1. 关于em
    <p style="font-size: 20px">
    123
    <p style="font-size: 2em;width: 2em">456</p>
    </p>
    // 此时子元素的font-size为40px, 宽度为80px(还要乘以子元素font-size的系数)
    1
    2
    3
    4
    5
  2. 关于vh, vw
    vw:viewpoint width,视窗宽度,1vw等于- 视窗宽度的1%。
    vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
    vmin:vw和vh中较小的那个。
    vmax:vw和vh中较大的那个。
  3. Flex布局
    flex-direction控制主副轴
    flex-wrap控制换行(默认不换行)
    flex-flow是上两个的结合
    justify-content主轴对齐方式
    align-items交叉轴对齐方式
  4. overflow原理
    overflow: hidden 能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动
    创建BFC条件(满足一个):
    float的值不为none;
    overflow的值不为visible;
    position的值为fixed / absolute;
    display的值为table-cell / table-caption / inline-block / flex / inline-flex。

  5. 实现自适应的正方形:
    使用vw, vh
    width百分比, height: 0, padding-top(bottom): 50%

  6. 标准模式和怪异模式
    document.compatMode属性可以判断是否是标准模式,当 document.compatMode为“CSS1Compat”,是标准模式,“BackCompat”是怪异模式。
    怪异模式是为了兼容旧版本的浏览器, 因为IE低版本document.documentElement.clientWidth获取不到
    怪异模式盒模型: box-sizing: border-box; 标准模式: box-sizing: content-box

  7. CSS3实现环形进度条
    两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转

  8. css优先级
    选择器的特殊性值表述为4个部分,其权重用0,1,10,100,1000,10000表示。

ID选择器的特殊性值,权重100。
类选择器、属性选择器或伪类,权重10。
元素和伪元素,权重1。
通配选择器*对特殊性没有贡献,权重0。
最后比较特殊的一个标志!important(权- 重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性 权重10000。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!