前端面试遇到的CSS问题

头像
小葱
    阅读 4 分钟
    2

    一、 掌握盒子水平垂直居中的五大方案

    1 定位方式

            <div class="content"></div>
    </div>
    
    .container {
        position: relative;
    }
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transfrom: translate(-50%,-50%)
    }

    2 display:flex

    关于flex的所有知识点 ，可参考阮一峰老师的 关于flex的教程
    阮一峰——Flex布局教程

    .main {
    display: flex;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    width: 50px;
    height: 50px;
}

    3 display:table-cell

    display：table-cell 加上vertical-align：middle使高度不同的元素都垂直居中

    .container {
    display: table-cell;
    vertical-align: middle;
}

    二、关于css3中盒模型

    标准盒模型

    下载.png

    怪异盒模型（IE盒模型）

    下载 (1).png

    flex盒模型

    下载 (2).png

    多列布局

    三 掌握几大经典布局方案

    总共三列，两边宽度一定，中间自适应

    1 圣杯

    .container {
    height: 100%;
    padding: 0 200px;
}

.left,
.right {
    width: 200px;
    min-height: 200px;
    background: lightblue;
}

.center {
    width: 100%;
    min-height: 400px;
    background: lightsalmon;
}

.left,
.center,
.right {
    float: left;
}

.left {
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    margin-right: -200px;
}
</style>

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

    2 双飞翼

    <style>
html,
body {
    height: 100%;
    overflow: hidden;
}

.container,
.left,
.right {
    float: left;
}

.container {
    width: 100%;
}

.container .center {
    margin: 0 200px;
    min-height: 400px;
    background: lightsalmon
}

.left,
.right {
    width: 200px;
    min-height: 200px;
    background: lightblue;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -200px;
}

</style>

<body class="clearfix">
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

    3使用calc

    .center {
/\* 兼容到IE9 \*/
    width: calc(100% - 400px);
    min-height: 400px;
    background: #ffa07a;
}

    4 flex

      
.container {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.left,
.right {
    flex: 0 0 200px;
    height: 200px;
    background: lightblue;
}

.center {
    flex: 1;
    min-height: 400px;
    background: lightsalmon;
}

    5 定位

    <style>
html,
body {
    height: 100%;
    overflow: hidden;
}

.container {
    position: relative;
    height: 100%;
}

.left,
.right {
    position: absolute;
    top: 0;
    width: 200px;
    min-height: 200px;
    background: lightblue;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.center {
    margin: 0 200px;
    min-height: 400px;
    background: lightsalmon;
}

</style>

    四 使用css,让一个div消失在视野中

    1 visibility和display

    visibility:hidden
    display:none

    Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

    如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none。

    使用Visibility或者Display属性的注意事项
    display:none:
    1、JS读取元素属性值
    如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
    2、SEO优化时需要注意
    使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
    3、样式文件
    如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过直接在元素上进行的设置不会有这个问题
    4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
    visibility:hidden:
    如果想让某一段代码在前台不显示，最简单的方法是用css的display:none,这样，下边的内容就自动填补这个空隙。但是在一些特殊的情况下，我们只需要隐藏这个元素，但它的位置不能被占用了，那么，visibility:hidden就可以实现这个要求。

    2 position:relative 设置left或者right、top、bottom到一个很大的值

    3 z-index 该知识点在下面进行讲解

    4 opacity:0

    opacity 对低版本IE不兼容可以用 filter
    filter:alpha(50); /*IE6-IE7，数值是0-100的任意整数，0表示透明*/ filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8，数值是0-100的任意整数，0表示透明*/
    对于filter 可以解决那些问题，可是自己 查文章

    5 请说明z-index的工作原理，适用范围

    工作原理，文档流

    参考文档 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    适用范围

    1. 在设置了 position 为 absolute 或 relative 或其它任何除了 auto 属性上设置 z-index
    2. 元素上设置的 opacity 属性值小于1
    3. 在元素上使用 transform 或 will-change

    五. 不考虑其它因素，下面哪种的渲染性能比较高？

    .box a{
    ...
}

a{
    ...
}

    答案是第二个

    六 谈谈你对html5的理解

    开放型题目，讲下html5的新特性

     

    前端css
    小葱
    95 声望3 粉丝
    « 上一篇
    关于Babel7的介绍
    下一篇 »
    前端js: 从一道面试题引申若干知识点

    引用和评论

    推荐阅读
    头像
    前端的异步解决方案（面试常考）

    小葱阅读 1.8k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新