web前端面试题「一」-HTML/CSS篇

HTML

---

1.如何理解HTML语义化？

增加代码可读性；
让搜索引擎更容易读懂（SEO）

2.默认情况下，哪些是块级元素，哪些是内联元素？

块元素：display:block/table; 独占一行
div h1 h2 table ul ol li p等.
内联元素：display:inline/inline-block;
span img input button

CSS

---

【布局】

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

let div1=document.getElementById('div1')
console.log(div1.offsetWidth)//122

offsetWidth=(内容宽度+内边距+边框)，无外边距.

如果让offsetWidth等于100px该怎么做？

box-sizing:border-box 让width包括(内容宽度+内边距+边框)

2. margin纵向重叠的问题

css和html代码分别如下，问AAA和BBB直接按的距离是多少？

//css
p{
    font-size: 16px;
    line-height: 1;
    margin-top:10px;
    margin-bottom: 15px;
}
//html
<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 Block format context 块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

浮动元素：float 除 none 以外的值
绝对定位元素：position是absolute或fixed
overflow 除了 visible 以外的值 (hidden、auto、scroll)
display 为 inline-block、table-cells、flex

BFC常见应用

清除浮动

5. float布局的问题(圣杯布局 双飞翼布局)

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

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

技术总结：

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

6. 手写clearfix

.clearfix:after{
    content:'';
    display: table;
    clear:both;
}
.clearfix{
    zoom:1
}

7. float画筛子

.box{
    width:180px;
    height: 180px;
    border: 2px solid #ccc;
    border-radius:10%;
    display: flex;
    justify-content: space-between;/* 两端对齐 */
    flex-wrap: wrap;
}
.item{
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color: pink;
    text-align: center;
}
.item:nth-child(2){
    align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
 <!-- flex画筛子 -->
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

【定位】

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

• relative 依据自身定位
• cabsolute 依据最近一层的定位元素定位
• 定位元素: absolute relative fixed,若找不到则定位到 body

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

水平居中

• inline元素：text-align:center.
• block元素：margin:auto.
• absolute元素：left:50% +margin-left负值.

垂直居中

• inline元素：line-height:height
• absolute元素：top:50% +margin-top负值
• absolute元素：transform(-50%,-50%)
• absolute元素：top,left,bottom,right=0 + margin：auto

CSS-元素居中显示的方法
)

【图文样式】

1. line-height的继承问题

• 写具体数值，如30px，则继承该值
• 写比例，如 2/1.5,则继承该比例
• 写百分比，如 200%，则继承计算出来的值（考点）

【响应式】

1. rem是什么？

• rem是长度单位
• px 绝对长度单位
• em 相对长度单位，相对于父元素
• rem 相对长度单位，相对于根元素，常用于响应式布局

2. 如何实现响应式？

• media-query(媒体查询)，根据不同的屏幕宽度设置根元素font-size
• 根据rem,基于根元素的相对单位进行计算

3. 响应式 vw/vh

网页的视口尺寸

• window.screen.height 屏幕高度
• window.innerHeight 网页视口高度
• document.body.clientHeight body高度

vw/vh

• vh 网页视口高度的 1/100
• vw 网页视口宽度的 1/100
• vmax 取两者最大值，
• vmin取两者最小值