CSS-JS面试题
第二篇慕课JS面试题，链接
慕课前端售1299元的面试题
1. CSS面试题【第一阶段】
1. 合模型宽度计算
width 和 height
宽度：
- offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，
不包括外边距）- clientWidth 返回元素的宽度（包括元素宽度、内边距，
不包括边框和外边距）- style.width 返回元素的宽度（包括元素宽度，
不包括内边距、边框和外边距）- scrollWidth 返回元素的宽度（包括元素宽度、内边距和溢出尺寸，
不包括边框和外边距），无溢出的情况，与clientWidth相同
高度：
- offsetHeight 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
- clientHeight 返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
- style.height 返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
- scrollHeigh 返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
top 和 left
top：
- offsetTop 返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。
- scrollTop 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离
返回值是一个整数，单位是像素。此属性是可读写的。
left:
- offsetLeft 此属性和offsetTop的原理是一样的
- scrollLeft 此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离
- 当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）
clientX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 不随滚动条滚动而改变；
clientY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 不随滚动条滚动而改变；
pageX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 随滚动条滚动而改变；
pageY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 随滚动条滚动而改变；
screenX 鼠标相对于显示器屏幕左上角x轴的坐标；
screenY 鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX 鼠标相对于事件源左上角X轴的坐标
offsetY 鼠标相对于事件源左上角Y轴的坐标
答案
box-sizing:border-box;
- box-sizing:border-box; 是CSS中的一个属性，用于设置盒子模型的计算方式。
- 当设置为border-box时，盒子的宽度和高度包括了边框和内边距的大小，而不是只包括内容的大小。
- 这样可以更方便地控制盒子的大小和位置，避免因为边框和内边距的大小而导致布局出现问题。
2. marigin 纵向重叠问题
答案
3. 对margin 的top left right bottom 设置负值，有何效果？
答案
4. BFC的理解与应用
答案
案例
5. 圣杯布局和双飞翼布局
自己找去吧，代码太多，有点麻烦
6. 使用flex布局，花三点骰子
7. absolute和relative分别依据什么定位 ?
8. line-height 如何继承
答案
10. rem是什么?
chrome控制台检测，切换手机型号，自行测试有无生效
11. CSS-响应式-vw-vh
12. 清除浮动方法
- 额外标签法（隔墙法），是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
1. 额外标签法
额外标签法也称隔墙法，是W3C推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签。如 <div class="clear"></div>
<div class="box">
<div class="damao">大猫</div>
<div class="sanmao">隔墙法</div>
<-- 在这里放一个空的 div -->
<div class="clear"></div>
</div>
.clear{
clear:both; }
在浮动的最后加上div，然后去style里面加给最后的div加上clear：both；
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素，不能是行内元素，可以<br/>
2. 父级添加overflow
可以给父级添加overflow属性，将其属性值设置为：hidden，auto或scroll
.box{
overflow:hidden; }
- 优点：代码简洁
- 缺点：无法显示溢出的部分
3. :after伪元素法
在CSS里面复制如下代码，然后在HTML里面给需要消除浮动的父元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6,IE7专有 */
*zoom: 1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
4. 双伪元素清除浮动
在CSS里面复制如下代码，然后在HTML里面给需要消除浮动的父元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
2.xx公司，css机试题
1. HTML中 block inline inline-block元素？
- block元素：
div：用于组合其他HTML元素的容器。
p：用于表示段落。
h1-h6：用于表示标题，h1为最高级别的标题，h6为最低级别的标题。
ul和ol：分别用于表示无序列表和有序列表。
li：用于表示列表中的每一项。
dl、dt和dd：分别用于表示定义列表、定义项目和定义描述。
table：用于表示表格。
tr：用于表示表格中的行。
td和th：分别用于表示表格中的单元格和表头单元格。
form：用于表示表单。
header：用于表示页面或章节的标题。
nav：用于表示页面中的导航链接。
section：用于表示页面中的章节。
article：用于表示页面中的文章或独立内容块。
aside：用于表示页面中的侧边栏或次要内容块。
footer：用于表示页面或章节的页脚。
main：用于表示页面主要内容。
- inline元素：
span：用于分组HTML元素，通常用于通过CSS进行样式控制。
a：用于表示链接。
img：用于表示图片。
strong和em：分别用于表示加粗和斜体的文本。
input：用于表示用户输入框，如文本框、单选框等。
button：用于表示按钮。
label：用于表示表单标签。
select：用于表示下拉菜单。
option：用于表示下拉菜单的选项。
textarea：用于表示多行文本输入框。
bdo：用于表示文字方向。
code：用于表示计算机代码。
time：用于表示时间或日期。
small：用于表示小号文本。
sub和sup：分别用于表示下标和上标。
- inline-block元素：
input：用于表示用户输入框，如文本框、单选框等。
button：用于表示按钮。
textarea：用于表示多行文本输入框。
select：用于表示下拉菜单。
img：用于表示图片。
label：用于表示表单标签。
progress：用于表示进度条。
meter：用于表示度量值的范围和比例。
video：用于表示视频文件。
audio：用于表示音频文件。
iframe：用于表示内嵌框架。
details和summary：分别用于表示可展开的详细信息和概要。
figure和figcaption：分别用于表示媒体对象和它们的标题。
output：用于表示计算结果。
2. CSS 盒子模型
上图答案:
width是220px = width200px + padding10px + border10px
heigth是130px = height100px + padding20px + border10px
- 如果将这个盒子宽度变为200px怎样实现：
答案：box-sizing:border-box; - 如果将盒子width改为100%，浏览器会出现滚动条吗：
答案: 会 - 如果让盒子撑满100%，不出现滚动条怎么办？
- 答案：
/* widht:100%; */直接去掉，什么也不写。 CSS流式布局，div 会自动横向撑满屏幕
3. CSS 水平垂直居中？几种方式
#container {
width: 500px;
height: 500px;
background-color: palevioletred;
}
#box {
width: 300px;
height: 200px;
background-color: red;
}
/* 第1种：定位 + translate*/
#container {
position: relative;
}
#box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 第2种：定位 + margin:auto; */
#container {
position: relative;
}
#box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 第3种：使用flex */
#container {
display: flex;
justify-content: center;
align-items: center;
}
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
4. CSS 选择器优先级
( x , y , z ) x：id 选择器的数量，y：类、伪类、属性的数量，z：元素、伪元素的数量。
1，0，1
1，0，1 \ 逗号分隔的重新计算权重1 , 0 ,1
1，1，1
0，1，2
0，0，2
** 答案 ：黄 红 蓝 **
5. 机试-实现CSS 抽屉
#drawer-container {
width: 0;
height: 100%;
position: fixed;
right: 0;
top: 0;
transition: width .3s;
}
<body>
<p>css 抽屉</p>
<div id="drawer-container" style="background-color:#ccc;">
抽屉
</div>
<script>
setTimeout(() => {
const drawerContainer = document.getElementById('drawer-container')
drawerContainer.style.width = '300px'
}, 1000)
setTimeout(() => {
const drawerContainer = document.getElementById('drawer-container')
drawerContainer.style.width = '0'
}, 3000)
</script>
</body>
6. 用CSS 实现 “合院”
/* 不加会出现滚动条 */
html * {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
#header {
height: 50px;
background-color: red;
}
#container {
flex: 1;
display: flex;
}
#left-container {
width: 100px;
background-color: green;
}
#main-container {
flex: 1;
background-color: yellow;
}
#right-container {
width: 100px;
background-color: cornsilk;
}
#footer {
height: 50px;
background-color: blue;
}
<body>
<!-- HTML 标签 语义化 -->
<header id="header">
header
</header>
<section id="container">
<aside id="left-container">left</aside>
<section id="main-container">main</section> <!-- 或者用 article , 看用途 -->
<aside id="left-container">right</aside> <!-- 或者用 section , 看用途 -->
</section>
<footer id="footer">
footer
</footer>
</body>