文章目录专栏
- 关于JavaScript
- 前端面试题
- JavaScript算法题解
- NodeJS知识点
- 关于Three.js知识点
- 关于webpack知识点
- 关于Typescript知识点
- 关于Vue知识点
- 关于React知识点
一、CSS布局
1.盒模型的宽度如何计算? 什么是盒模型?
在html中任何一个元素都可以看作盒子模型，主要就是用来规定元素与元素之间显示的一个相互关系
// 如下代码div1的offsetWidth是多大?
<style>
#div {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1"></div>
解: offsetWidth = 内容宽度 + 内边距 + 边框, 没有外边距
width: 122px;
那么如何让offsetWidth=100px,怎么做?
解: box-sizing: border-box;
盒模型的作用：规定了网页元素如何显示以及元素间的相互关系
盒模型的概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
2.margin纵向重叠的问题?
// XXX,YYY 之间的距离是多少?
<style>
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<body>
<p>XXX</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>YYY</p>
</body>
解: 相邻元素的margin-top 和 margin-bottom会发生重叠
空白内容的p标签也会重叠
相距: 15px
3.margin负值的问题?
// 对margin的 top left right bottom 设置负值有何效果?
解: margin-left: -10px; // 向左移动
margin-top: -10px; // 向上移动
margin-right: -10px; // 右侧元素向左移, 自身不受影响
margin-bottom: -10px; // 下面元素向上移, 自身不受影响
4.EFC的理解应用?
Block format context,块级格式化上下文,简称BFC
1.一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
1.float不是none,就是对元素进行设置float
2.position 是 absolute 或 fixed
3.overflow不是visible
4.display是 flex / inline-block
BFC的常见应用
1.清除浮动
5.floar布局问题,以及clearfix?
如何实现圣杯布局和双飞翼布局(PC)?
目的:
1.三栏布局,中间一栏最先加载和渲染(内容比较重要)
2.两侧内容固定,中间内容随着宽度自适应
3.一般用于PC网页
特点:
1.使用float布局
2.两侧使用margin赋值,以便和中间内容横向重叠
3.防止中间内容被两侧覆盖,一个用padding(圣杯)一个用margin(双飞翼)
圣杯布局:
<style>
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellowgreen;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -100%;
}
#footer {
clear: both;
text-align: center;
background-color: #f1f1f1;
}
.clearfix:after {
content: '';
display: table/block;
clear: both;
*zoom: 1; // 兼容IE低版本 但是现在好像没有必要了
}
</style>
<body>
<div id="header">Header</div>
<div id="container" class="clearfix">
<div id="center" class="column">Center</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
</div>
<div id="footer">Footer</div>
</body>
双飞翼布局:
<style>
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #CCC;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
margin-left: -100%;
width: 190px;
height: 200px;
background-color: #0000FF;
}
#right {
margin-left: -190px;
width: 190px;
height: 200px;
background-color: #FF0000;
}
</style>
// 手写clearfix
<style>
.clearfix:after {
content: '';
display: table/block;
clear: both;
*zoom: 1; // 兼容IE低版本 但是现在好像没有必要了
}
</style>
6.flex布局问题?
flex实现一个三点的骰子
<style>
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.item:nth-child(2) {
align-self: center; // 设置子元素的属性
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
二、CSS定位
1.absolute和relative分别依据什么定位？
relative 依据自身定位
absolute 依据最近一层的定位元素,如果最近的都没有,它会依赖body定位
2.居中对齐有哪些实现方式？(代码略)
水平居中
inline元素: test-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;
三、图文样式
1.line-height的继承问题?
// p 标签的行高将会是多少?
<style>
body {
font-size: 20px;
line-height: 200%; // 200%*20px = 40px body的font-size*200% 会直接继承
line-height: 30px; // line-height=30px 直接继承
line-height: 1.5; // 1.5*16px = 24px
}
p {
font-size: 16px;
}
</style>
<body>
<p>AAA</p>
</body>
解: 1. 写具体数值, 比如30px,则继承该值
2. 写比例,如2/1.5,则继承该比例
3. 写百分比,如200%,则继承计算出来的值(考点)
四、响应式
1.常见长度单位
1.rem是什么?
相对长度单位,相对于根元素(html),响应式布局常用
2.px?
绝对长度单位(最常用的)
3.em?
相对长度单位,相对于父元素,不常用 (偶尔用来缩进字符可能会比较舒服一点)
2.如何实现响应式?
1.media-query(媒体查询), 根据不同的屏幕宽度设置根元素font-size (补充说一下,出来工作好像没用过)
@media only screen and (max-width: 374px) {
/* 苹果5 或者更小的尺寸,以苹果5的宽度(320px)比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) {
/* 苹果678 和 x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* 苹果6p 或者更大的,以6p宽度(414px)为例 */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div {
width: 1rem;
background-color: #ccc;
}
<div id="div">
媒体查询
</div>
2.rem,基于根元素的相对单位
a. rem的弊端
阶梯性--超过374px就会进入下一个阶梯
@media only screen and (max-width: 374px) {
/* 苹果5 或者更小的尺寸,以苹果5的宽度(320px)比例设置 font-size */
html {
font-size: 86px;
}
}
b. 网页视口尺寸
window.screen.height // 屏幕高度 // 整个屏幕的高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body高度 随着你的内容来变化
c. 网页vw/vh
vh网页视口高度的1/100
vw网页视口宽度的1/100
vmax 取俩者最大值;vmin取俩者最小值
window.innerHeight === 100vh
window.innerWidth === 100vw
五、关于HTML的一点小问题
1.如何理解HTML语义化?
a. 让人更容易读懂(增加代码的可读性)
b. 让搜索引擎更容易读懂(有利于SEO)---但是现在一般都是砸钱,做排名及关键词的也越来越少了
1.没有被语义化的
<div>标题</div>
<div>
<div>一段文字</div>
<div>
<div>列表1</div>
<div>列表2</div>
</div>
</div>
2.被语义化的
<h1>标题</h1>
<div>
<p>一段文字</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>
2.默认情况下,哪些HTML标签是块级元素、哪些是内联元素?
// display: block/table 块状元素
div, h1-h6, table, ul, ol, p
// display: inline-block/inline 内联元素
span img input button
面试中几乎不会把太多时间浪费到html、css中,除非公司所做的项目动画效果多一点,后面有更好的还会持续更新
