CSS面试题启蒙

问题目录

盒子模型的宽度如何计算？
margin纵向重叠的问题

margin负值的问题
BFC理解和应用

float布局的问题，以及clearfix
flex布局的问题

问题列表

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

<!-- 如下代码，请问 div1 的 offsetWidth 是多大？ -->
<style>
    #div1 {
        width: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
</style>

<div id="div1">
</div>

概念：offsetWidth = （内容宽度+内边距+边框），无外边距

答案：122px

如果添加 box-sizing:border-box; 请问结果？

答案：100px

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>

答案：

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠

答案：15px，p和p之间互相重叠，得到最后结果；
扩散：如果换成H1呢？H1自带上下距离是0.67em单位，font-soze:2em;

margin负值的问题

对 margin 的 top left right bottom 设置负值，有何效果？
概念：

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

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

理解：

margin控制的是自身的边界，为零的时候，边界就是0，我不多占也不少占，当为负值的时候，就允许对方进入到国界内部，有点类似国家边界被侵入的意思，界碑位置不变，变的是对方的可活动范围；
强国对外活动，弱国对内活动（即：被活动）

BFC理解和应用

什么是BFC？如何应用？
概念：

Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

float不是none
position是absolute或fixed

overflow不是visible
display是flex、inline-block等

常用需求：BFC清除浮动

clear:both;专为清除浮动而生

float布局的问题，以及clearfix

如何实现圣杯布局和双飞翼布局

圣杯布局使用padding为主，往中间挤压
双飞翼布局使用margin为主，往外排除，类似翅膀展开一样

手写 clearfix
概念：

圣杯布局和双飞翼布局的目的：

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

一般用于PC网页

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

使用float布局
两侧使用margin负值，以便和中间内容横向重叠

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

圣杯布局

感受：其实就是margin-left、margin-right、left、right
感悟：

需要了解margin-left和margin-right在当前BFC里面具有横向流动性（之所以会换行，只是因为被挤下来，实际依然属于同一行）
而position:relation;的left和right，是相对当前位置的，和当前BFC没有任何关系

因此：

只能通过margin-left让left aside移动到最左侧，无法通过margin-right移动到最左侧
可以理解为margin-left是移动自身，而margin-right是移动后面的同学

所以理论上的四种办法，其实只有两种；这两种办法也只是left和right的简单运用而已

<template>
    <div id="app">
        <div class="box">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
</template>

<style>
body{background:green;}
.box{padding-left:200px;padding-right:150px;}
.box div{float:left;}
.center{background:red;color:#fff;width:100%;}
.left{background:blue;color:#fff;width:200px;}
.right{background:purple;color:#fff;width:150px;}

/* 第一种处理 */
/* .left{margin-left:-100%;position:relative;left:-200px;}
.right{margin-left:-150px;position:relative;left:150px;} */

/* 第二种处理 */
/* .left{margin-left:-100%;position:relative;right:200px;}
.right{margin-right:-150px;} */

/* 第三种组合：不成立 */
/* margin-right
margin-left */

/* 第四种组合：不成立 */
/* margin-right
margin-right */
</style>

双飞翼布局

感受：双飞翼布局没有那么多的组合结果，本质只有一种
感悟：

这种方式是用结构换样式，去除了定位（position），并且只是用margin-left；
简单，容易理解

<template>
    <div id="app">
        <div class="box">
            <div class="center">
                <div class="center_item">center-item</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
</template>

<style>
body{background:green;}
.box{}
.box div{float:left;}
.center{background:red;color:#fff;width:100%;}
.center_item{background:rgba(255,255,255,.6);color:#fff;}
.left{background:blue;color:#fff;width:200px;}
.right{background:purple;color:#fff;width:150px;}


.center_item{margin-left:200px;margin-right:150px;}
/* 第一种处理 */
.left{margin-left:-100%;}
.right{margin-left:-150px;}

/* 第二种组合：不成立 */
/* .left{margin-left:-100%;}
.right{margin-right:-150px;} */

/* 第三种组合：不成立 */
/* margin-right
margin-left */

/* 第四种组合：不成立 */
/* margin-right
margin-right */
</style>

手写clearfix（清除浮动）

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

flex布局的问题

flex实现一个三点的色子
常用语法回顾：

flex-content
justify-content

align-items
flex-wrap

align-self：在侧轴方向上的对齐方式

<template>
    <div id="test">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</template>

<style>
#test{border:solid 1px red;border-radius:20px;width:300px;height:300px;display: flex;justify-content: space-between;align-items: center;padding: 32px;box-sizing: border-box;}
.item{width:30px;height:30px;background:purple;border-radius:50%;}
.item:nth-child(1){align-self: flex-start;}
.item:nth-child(3){align-self: flex-end;}
</style>

CSS定位问题

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

absolute依据最近一层的定位元素定位，一直向上找，如果没有就相对body

定位元素：absolute、relative、fixed
兜底元素：body

relative依据自身定位

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

水平居中

inline元素：text-align:center
block元素：margin:auto

absolute元素：left:50% + margin-left:负值

margin-left需要知道当前元素的具体width
如果width不确定可以使用transform:translateX(-50%)

垂直居中

inline元素：line-height的值等于height值
absolute元素：top:50%+margin-top:负值

absolute元素：transform:translate(-50%, -50%);

低版本浏览器有问题

absolute元素：top, left, bottom, right = 0+margin:auto

全兼容无问题
position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;

CSS图文样式

line-height如何继承
问题：

<!--如下代码，P标签的行高将会是多少？-->
<style>
body {
  font-size: 20px;
  line-height: 200%;
}
p {
  font-size: 16px;
}
</style>

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

思考：

写具体数值，如30px，则继承该值（比较好理解）
写比例，如 2/1.5 ，则继承改比例（比较好理解）

写百分比，如200%，则继承计算出来的值（考点）

百分比是和父级的font-size计算完之后在继承，其余的都是直接继承不计算

<style>
/* 第一种：p标签的line-height结果为30px */
body {
  font-size: 20px;
  line-height: 30px;
}
p {
  font-size: 16px;
}
/* 第二种：p标签的line-height结果为32 */
body {
  font-size: 20px;
  line-height: 2;
}
p {
  font-size: 16px;
}
/* 第三种：p标签的line-height结果为40 */
body {
  font-size: 20px;
  line-height: 200%;
}
p {
  font-size: 16px;
}
</style>

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

CSS响应式

rem是什么？

rem是一个长度单位
类比：

px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用

rem，相对长度单位，相对于根元素（HTML元素），常用于响应式布局

这里测试的时候建议用整数，或者大于1的数，因为web page最小可见font-size是12px
所以如果使用小数会导致font-size触发最小值，从而导致测试结果误导，我就犯了这个错误

已经确定，是相对html元素，不是相对body元素

响应式布局的常见方案？

media-query，根据不同的屏幕宽度设置根元素font-size

@media screen and (max-width:1100px){}
@media screen and (max-width:1000px){}
@media screen and (max-width:920px){}
@media screen and (max-width:800px){}
@media screen and (max-width:720px){}
@media screen and (max-width:600px){}
@media screen and (max-width:500px){}
@media screen and (max-width:400px){}

CSS响应式-vw/vh

rem的弊端

当页面尺寸分的特别细的时候，也就是需要写一堆的media的时候，面对两个问题：

第一个：需要花多长时间写出来
第二个：维护成本怎么降低

个人感受：

流动布局：width:30%就是流动布局
其实只要流动布局设计的足够好，media用的不会太多

响应式布局设计：以流动布局为主，media调节为辅

网页视口尺寸

window.screen.height // 屏幕高度，由手机决定，下图1
window.innerHeight // 网页视口高度，由浏览器决定，下图2

document.body.clientHeight //body高度，由内容决定，下图3

vm/vh

vh：网页视口高度的1/100
vw：网页视口宽度的1/100

vmax取两者最大值，font-size:10vmax;
vmin去两者最小值

window.innerHeight === 100vh
window.innerWidth ===100vw

技巧

使用vue

# 安装
npm install -g @vue/cli-service-global
# 启动待个vue文件，并打开浏览器
vue serve index.vue -o

Http-server

# 安装
npm install -g http-server
# 运行并设置端口
http-server -p 9999

posted @ 2021-11-18 10:39 怪诞咖啡阅读(48) 评论(0) 编辑收藏举报

刷新页面返回顶部

怪诞咖啡

成功只不过是某一时刻的状态；成长才更重要，成长才是真正的刚需

CSS面试题启蒙

问题目录

问题列表

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

margin纵向重叠的问题

margin负值的问题

BFC理解和应用

float布局的问题，以及clearfix

圣杯布局

双飞翼布局

手写clearfix（清除浮动）

flex布局的问题

CSS定位问题

CSS图文样式

CSS响应式

CSS响应式-vw/vh

技巧

使用vue

Http-server

公告