• 2.CSS面试题


    布局

    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.如何实现响应式?
    1. media-query,根据不同的屏幕宽度设置根元素font-size

    2. rem,基于根元素的相对单位

  • 相关阅读:
    使用CSS3实现超炫的Loading(加载)动画效果
    三种简洁的经典高效的DIV+CSS制作的Tab导航简析
    Span和Div的区别
    [总结]Jquery api 快速参考
    25个可遇不可求的jQuery插件
    基于单个 div 的 CSS 绘图
    一款基于jQuery的图片场景标注提示弹窗特效
    HTML5手机开发——滚动和惯性缓动
    发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
    CSS框架BluePrint
  • 原文地址:https://www.cnblogs.com/manhuai/p/14260141.html
Copyright © 2020-2023  润新知