【CSS】CSS 面试知多少

1、盒模型的宽度计算

答案：122px。

因为 offsetWidth=（内容宽度+内边距+边框），无外边距
补充：如何让offsetWidth等于100px？

答案：设置 box-sizing: border-box;

2、margin 纵向重叠的问题

答案：15px。

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

空白内容标签的margin会被忽略。

3、margin 负值会怎么样

margin-top、margin-left 设置负值，元素会向上、向左移动。

margin-right 设置负值，右侧元素向左移动，自身不受影响。

margin-bottom 设置负值，下方元素上移，自身不受影响。

4、BFC理解与应用

1、定义：Block Format Context 是块级格式化上下文，是一个独立的渲染区域。

2、特性：一块独立渲染区域，内部元素的渲染不会影响边界以外的元素，也不受外部影响。

3、形成 BFC 的常见条件

float 不是 none

position 是 absolute 或 fixed

overflow 不是 visible

display 是 flex inline-block 等

5、考查 float 布局

1、圣杯布局和双飞翼布局的目的

（1）三栏布局，中间一栏最先加载和渲染（内容最重要）因为**浏览器解析 HTML 是从上到下执行的，**中间栏的 HTML 代码被放在了结构最前面，所以会被优先加载和渲染。

（2）两侧内容固定，中间内容随着宽度自适应。

（3）一般用于pc页面。

2、圣杯布局和双飞翼布局的技术总结

（1）使用float布局

（2）两侧使用 margin 负值，以便和中间内容横向重合。

（3）防止中间内容被两侧覆盖，一个用padding一个用margin。

html 复制代码

//圣杯布局
<style>
        .box{
            padding-left: 200px;
            padding-right: 300px;
        }
        .box-item{
            float: left;
            height: 100px;
        }
        .center{
            background: #000;
            width: 100%;
        }
        .left{
            background: #ccc;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            background: red;
            width: 300px;
            margin-right: -300px;
        }
        .footer{
            height: 100px;
            background: blue;
            clear: both;
        }
        .banner{
            height: 100px;
            background: green;
        }
    </style>

<body>
    <div class="banner"></div>
    <div class="box">
        <div class="box-item center">1</div>
        <div class="box-item left">2</div>
        <div class="box-item right">3</div>
    </div>
    <div class="footer"></div>
</body>

html 复制代码

//双飞翼布局
<style>
        .container {
            width: 100%;
            height: 200px;
            background-color: lightgray;
        }

        .box {
            float: left;
        }

        .main {
            margin: 0 180px 0 180px;
            background: orange;
            height: 200px;
        }

        .left-sidebar {
            width: 180px;
            height: 200px;
            background-color: lightblue;
            margin-left: -100%;
        }

        .right-sidebar {
            width: 180px;
            height: 200px;
            background-color: lightgreen;
            margin-left: -180px;
        }
    </style>

<body>
    <div class="container box">
        <div class="main"></div>
    </div>
    <div class="left-sidebar box"></div>
    <div class="right-sidebar box"></div>
</body>

6、手写clearfix

javascript 复制代码

.clearfix:after{
  content: '';
  dispaly: table;
  clear: both;
}
.clearfix{
  *zoom: 1; /*兼容低版本IE*/
}

7、flex 布局

常用语法：

flex容器：flex-direction justify-content align-items flex-warp gap

flex元素：flex-grow（放大比例）flex-shrink(收缩比例) flex-basis（基准尺寸） order（排列顺序） align-self（交叉轴对齐方式） flex：flex-grow flex-shrink flex-basis

html 复制代码

 <style>
        .box{
            width: 200px;
            padding: 20px;
            border: 1px solid #000;
            flex-direction: column;
            display: flex;
        }
        .box-item{
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            border-radius: 50%;
        }
        .box-item:nth-child(2){
            align-self: center;
        }
        .box-item:nth-child(3){
            align-self: flex-end;
        }
        
    </style>

<body>
    <div class="box">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
    </div>
</body>

8、css定位

1、absolute 依据最近一层定位元素定位，如果没有就依据body定位。

2、relation 依据自身定位。

3、定位元素 absolute relative fixed / body

html 复制代码

        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
        }
        .box-item{
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            position: absolute;
            top: 30px;
            left: 30px
        }

水平居中

1、行内元素：text-align：center

2、block：margin：auto、flex+justity-content

3、absolute元素：left：50%+margin-left 负值/translateX(-50%)

4、absolute元素：left right = 0 + margin：0 auto

垂直居中

1、行内元素：line-height=height

2、absolue元素：top: 50% + margin-top 负值/ translateY（-50%）

3、absolue元素：top left right bottom = 0 + margin：auto

4、block：flex+align-items

9、css 图文样式

line-height 继承

1、写具体数值，如 30px，则继承该值。

2、写比例，如 2 / 1.5，则继承该比例。

3、写百分比，如200%，则继承计算出来的值。

html 复制代码

body{
   font-size: 20px;
   /* line-height: 20px;  p标签继承父级行高为20px*/ 
   /* line-height: 1.5; p标签继承父级行高为24px*/
   /* line-height: 200%; p标签继承父级行高为40px*/（重点）
}
p{
   font-size: 16px;
}

10、css 响应式

px：绝对长度单位。

em：相对长度单位，相对于父元素。 text-indent:2em

rem：相对长度单位，相对于跟元素。
响应式布局的常用方案：media-query + rem

XML 复制代码

        @media only screen and (max-width: 374px) {
            body{
                font-size: 16px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            body{
                font-size: 16px;
            }
        }
        @media only screen and (min-width: 414px) and (max-width: 768px) {
            body{
                font-size: 16px;
            }
        }

11、vw/vh

1、rem 的弊端："阶梯"性。

2、网页视口尺寸

window.screen.height //屏幕高度

window.innerHeight //视口高度（浏览器去掉上下工具栏）

document.body.clientHeigh //页面内容高度

3、专用获取视觉视口（兼容 iOS 11+、Android 8+）

window.visualViweport.width //安全区域的宽度

4、vw/vh

1vw 网页视口宽度的 1/100 （window.innerWidth）

1vh 网页视口高度的1/100 (window.innerHeight)

vmax 取两者最大值

vmin 取两者最小值