2.CSS面试题

时间：2021-01-13 10:33:49 收藏：0 阅读：0

布局

1.盒子模型的宽度如何计算？

<!-- item 的 offsetWidth 是多大？ -->
<style>
    #item{
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
</style>

<div id="item">
    
</div>

<script>
    let itemOffSetWidth = document.getElementById(‘item‘).offsetWidth
    console.log("itemOffSetWidth",itemOffSetWidth)
</script>

offsetWidth = ( 内容宽度width + 内边距padding + 边框border) ，无外边距margin

offsetWidth = 122px；

如果让 offsetWidth 等于100px，不修改width、padding 、border等，应该怎么做？

使用box-sizing: border-box;

<style>
　　#item{
   　　　width: 100px;
   　　 padding: 10px;
   　　 border: 1px solid #ccc;
  　　  margin: 10px;
  　　  box-sizing: border-box;
　　}
</style>

2.margin纵向重叠的问题

<!-- AAA 到 BBB的距离是多少？ -->
<style>
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

答案：15px

相邻元素的 margin-top 和 margin-bottom 会发生重叠。

空白内容的<p></p>也会重叠。

3.margin负值的问题

margin-top 和 margin-left 负值，元素向上、向左移动。
margin-right负值，右侧元素左移，自身不受影响。
margin-bottom负值，下方元素上移，自身不受影响。

4.BFC理解和应用

BFC：一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素。

形成BFC的常见条件：

float 不是none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex inline-block 等

使用BFC清除浮动

<!-- 清除浮动前 -->
<style>
    .container {
        background-color: #F1F1F1;    
    }
    .left {
        float: left;
        margin-right: 10px;
    }
</style>

<div class="container">
    <img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left">
    <p>使用BFC清除浮动</p>
</div>

<!-- 清除浮动后 -->
<style>
    .container {
        background-color: #F1F1F1;    
    }
    .left {
        float: left;
        margin-right: 10px;
    }
    .bfc {
        overflow: hidden; /* 触发BFC */
    }
</style>

<div class="container bfc">
    <img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left">
    <p class="bfc">使用BFC清除浮动</p>
</div>

5.float布局的问题，以及clearfix

如何实现双飞翼布局

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100%;
        font: 20px/40px "microsoft yahei";
        color: white;
    }

    #container {
        width: 90%;
        margin: 0 auto;
        height: 100%;
    }

    #header,
    #footer {
        height: 12.5%;
        background: deepskyblue;
    }

    #main {
        height: 75%;
    }

    #center,
    #left,
    #right {
        height: 100%;
        float: left;
    }

    #center {
        width: 100%;
        background: lightgreen;
    }

    #right {
        background: lightblue;
        width: 20%;
        margin-left: -20%;
    }

    #left {
        background: lightcoral;
        width: 20%;
        margin-left: -100%;
    }

    #main-inner {
        padding-left: 20%;
    }
</style>

<body>
    <div id="container">
        <div id="header">
            header
        </div>
        <div id="main">
            <div id="center">
                <div id="main-inner">
                    center
                </div>
            </div>
            <div id="left">
                left
            </div>
            <div id="right">
                right
            </div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>

双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
允许任意列的高度最高；

双飞翼布局的技术总结

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

clearfix

<style type="text/css">
.clearfix:after{
    content: ‘‘;
    display: table;
    clear: both;
}
.clearfix{
    *zoom:1; /* 兼容IE */
}
</style>

6.flex画色子

<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        border: 2px solid #CCC;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }
    .item{
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2){
        align-self: center;
    }
    .item:nth-child(3){
        align-self: flex-end;
    }
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

定位

1.absolute 和 relative 分别依据什么定位？

absolute 依据最近一层的定位元素定位

relative 依据自身定位

2.居中对齐有哪些实现方式？

水平居中

inline 元素：text-align: center
block 元素：margin: 0 auto
absolute 元素：left: 50% + margin-left 负值
元素为行内元素，设置父元素 text-align:center
使用 flex-box 布局，指定 justify-content 属性为center

垂直居中

inline 元素：line-height 的值等于 height 值
absolute 元素：top: 50% + margin-top 负值
absolute 元素：transform(-50%,-50%)
absolute 元素：top,left,bottom,right = 0 + margin: auto
使用 flex 布局，设置为 align-item：center

图文样式

1.line-height的继承问题

<-- p标签的行高是多少? -->
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 20px;
        line-height: 200%;
    }
    p{
        font-size: 16px;
    }

</style>

<body>
    <p>AAA</p>
</body>

答案：40px = font-size * line-height。

line-height如何继承？

具体数值，如50px，继承该具体数值

比例，如果2/1.5，继承该比例

百分比，如200%，继承计算出来的值（font-size * line-height）

响应式

1.rem是什么？

rem是一个长度单位

px：绝对长度单位
em：相对于父元素的长度单位
rem：相对于根元素（根元素：没有父节点的 dom 节点，在HTML中，根元素是html元素）的长度单位

2.如何实现响应式？

media-query，根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位