在学完css和HTML章节的课程后,发现自己的基础知识有很多不足,决定对学过的知识进行总结,加深印象,更好的应对面试。
HTML面试题
1. 如何理解 HTML语义化?
定义
语义化简单理解就是让机器可以读懂内容,Html语义化是指使用语义恰当的标签,使页面有良好的结构,让页面元素有含义。
作用
- 去掉样式后页面呈现清晰的结构,让人比较容易阅读和理解(增加代码可读性)
- 利于浏览器搜索引擎收录(SEO)
- 便于团队项目的可持续运作及维护,让开发人员读懂结构。
举例子说明
下面右边代码即HTML语义化,相对于左边而言更易阅读和理解
2. 默认情况下,哪些HTML标签是块级元素,哪些是内联元素?
- display:block/table,有div,h1,h2,table,ul,ol,p等,特定要独占一行显示
- display:inline/inline-block;有span img input button等,特点不在一行显示
CSS-布局
1. 盒子模型的宽度如何计算?
定义: CSS 的盒子模型有两种:IE 盒子模型、标准的 W3C 盒子模型 IE 的 content 部分包含了 border 和padding;
举例说明:
请问以下div1的offsetWidth是多大?
<style>
#div1{
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1">
this is div1
</div>
offsetWidth =(内容宽度 + 内边距 + 边框),无外边框,因此答案是122px
补充: 如果让offsetWidth 等于 100px,该如何做?
在样式表里面加box-sizing:border-box,然后100px就会包括padding和border
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>
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的
<p></p>
标签也会重叠
3. margin负值的问题
具体问题:对margin的top,left,right,bottom设置负值,有何效果?
- margin-top和margin-left负值,元素向上,向左移动
- margin-right负值,右侧元素左移,自身不受影响
- margin-bottom负值,下方元素上移动,自身不受影响
<style>
body{
margin: 20px;
}
.float-left{
float: left;
}
.clearfix:after{
content:'';
display: table;
clear: both;
}
.container{
border: 1px solid #ccc;
padding: 10px;
}
.container .item{
width: 100px;
height: 100px;
}
.container .border-blue{
border: 1px solid blue;
}
.container .border-red{
border: 1px solid red;
}
</style>
<p>用于测试margin top bottom 的负数情况</p>
<div class="container">
<div class="item border-blue">this is item 1</div>
<div class="item border-red">this is item 2</div>
</div>
<p>用于测试margin left right 的负数情况</p>
<div class="container clearfix">
<div class="item border-blue float-left">this is item 3</div>
<div class="item border-red float-left">this is item 4</div>
</div>
以上是代码演示,可通过设置margin-top,margin-bottom,margin-right,margin-left测试实际item盒子的变化
4. BFC的理解和应用
什么是BFC?如何应用?
- block format context,块级格式化上下文
- 一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
- 形成BFC的常见条件:float不是none,position是absolute或fixed,overflow不是visible,display是flex inline-block等
- BFC常见应用:清除浮动
- 代码演示
<div class="container bfc">
<img src="webp.webp.jpg" alt="" class="left" >
<p class="bfc">这是一段文字</p>
</div>
<style>
.container{background-color: #ccc;border: 1px solid red;}
.left{float: left;}
img{margin-right: 10px;}
.bfc{overflow: hidden;}
</style>
以上示例中添加的bfc类用于渲染一个独立区域,只影响内部元素,不影响区域外元素
5. float布局的问题,以及clearfix
如何实现圣杯布局和双飞翼布局
目的:
- 三栏布局,中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般用于pc网页
技术总结
- 使用float布局
- 两侧使用margin负值,以便和中间内容横向重叠
- 防止中间内容被两侧覆盖,一个用padding,一个用margin
<style>
body{min-width: 550px;}
header{background-color: #f1f1f1;text-align: center;}
#left{background-color: red;width: 200px;margin-left: -100%;position: relative;right: 200px;}
#center{background-color: yellow;width: 100%;}
#right{background-color: green;width: 100px;margin-right: -100px;}
footer{background-color: #f1f1f1;text-align: center;clear: both;}
.container{padding-left: 200px;padding-right: 100px;}
.container .column{float: left;}
</style>
<header>this is head</header>
<div class="container">
<div id="center" class="column">中间</div>
<div id="left" class="column">左边</div>
<div id="right" class="column">右边</div>
</div>
<footer>this is foot</footer>
以上是圣杯布局的示例,一定要理解左边和右边元素样式布局的问题
<title>双飞翼布局</title>
<style>
body{min-width: 550px;}
#main{background-color: #ccc;width: 100%;height: 190px;}
#left{background-color: red;width: 200px;height: 190px;margin-left: -100%;}
#right{background-color: green;width: 200px;height: 190px;margin-left: -200px;}
.main-wrap{margin: 0 200px 0 200px;}
.col{float: left;}
</style>
<div id="main" class="col">
<div class="main-wrap">中间</div>
</div>
<div id="left" class="col">左边</div>
<div id="right" class="col">右边</div>
以上代码是双飞翼布局示例,注意左边元素和右边元素是如何布局的
两者的区别:
- 双飞翼使用margin给左右留白,圣杯布局使用padding给左右留白
- 双飞更简洁易懂,圣杯相对负责些
手写clearfix(10s之内写出来)
/* 手写 clearfix */
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1} /*兼容IE低版本 */
6. flex画色子
flex实现一个三点的骰子
常用语法回顾:flex-direction,justify-content,align-items,flex-wrap,align-self(子元素)必须掌握,其他可以查文档
<style>
/* 用flex画一个骰子 */
.container{
width: 200px;
height: 200px;
border: 2px solid red;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item{
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 50%;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
css-定位
absolute和relative分别依据什么定位?
- relative依据自身定位
- absolute依据最近一层的定位元素定位
- 定位元素:absolute,fixed
- 代码示例:
居中对齐有哪些实现方式?
水平居中(例子对应3-11 定位-解题-2)
- inline元素:text-align:center
- block元素:margin:auto
- abolute元素: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-图文样式
line-height的继承问题
代码问题:
- 写具体数值,如30px,则继承该值(比较好理解)
- 写比例,如2/1.5,则继承该比例(比较好理解)
- 写百分比,如200%,则继承计算出来的值(考点)
- 代码演示:
css-响应式
rem是什么?
- rem是一个长度单位
- px,绝对长度单位,最常用
- em,相对长度单位,相对于父元素,不常用
- rem,相对长度单位,相对于根元素,常用于响应式布局
- 代码演示:
如何实现响应式?
响应式布局的常见方案?
- media-query,根据不同的屏幕宽度设置根元素font-size
- rem,基于根元素的相对单位
- 代码演示:要理解media的用法,不一定会写
vw/vh
rem的弊端:‘阶梯’性
网页视口尺寸
- window.screen.height // 屏幕高度(宽度同理)
- window.innerHeight // 网页视口高度(除开浏览器的头部和尾部)
- document.body.clientHeight // body 高度
- 例子演示:
- 以上截图示例中667是screen.height,553是innerHeight ,左边红色方块是document.body.clientHeight
- vw/vh
- vh 网页视口高度的1/100
- vw网页视口宽度的1/100
- vmax取两者最大值;vmin取两者最小值
- 代码演示