h5阶段面试题

小着

已于 2023-08-07 14:00:26 修改

阅读量102

点赞数 2

文章标签： html5

于 2023-08-04 14:03:36 首次发布

本文链接：https://blog.youkuaiyun.com/m0_71185989/article/details/132096129

版权

1、css层叠样式表有什么优势

内容与表现相分离
网页的表现统一，容易修改
丰富的样式，使页面布局更灵活
减少网页的代码量，增加网页的浏览速度，节省网络宽带
独立于页面的css，有利于网页被搜索引擎收录

2、边框重合边框塌陷

父元素加边框
父元素加 overflow:hidden; 触发bfc机制。什么是bfc机制【面试题】，block format content 格式化上下文内容，让元素独立

3、谈一谈盒子模型

盒子模型是网页布局的计算元素实际所在位置的布局模式

正常模式：盒子实际宽高=边框+内边距+内容宽高
怪异模式（box-sizing:border-box;）

实际所占宽高=给元素本身设置的宽高

元素内容所占的宽高=设置的宽高-设置的边框-内边

两种模式盒子在页面实际占位都需要加上盒子的外边距margin

4、谷歌浏览器页面展示的最小字体是多少？

12px 问：如何在谷歌浏览器上展示6px的字体

借助：zoom属性，或者scale 缩放属性

zoom:0.5;

zoom没有0和负值；0-1缩小用，>1是放大；zoom缩放中心点为左上角；改变了元素占据的空间大小；
transform: translate(-50%,-50%) scale(.5);

scale缩放后需要调整字体位置，因为scale默认为中心点但可以通过transform-origin进行改变；缩放占据的原始尺寸不变，页面布局不会发生变化

5、清除浮动的四种方法

给浮动元素的父元素添加一个固定的高
使用空div 设置clear:both

首先在浮动的元素下面建一个空div（一般类名为clearfix）

然后给空的div设置一个属性：clear：both;
overflow：hidden 触发bfc机制

给浮动元素的父元素设置overflow:hidden

overflow:hidden; 超出部分隐藏

overflow:scroll; 超出部分滚动
使用伪类语法

在浮动元素的父元素上，添加after伪类语法 clearFix 类名

. clearFix ::after {
content: '';
display: block;
clear: both;
}

6、水平垂直居中

1. 先定位（子绝父相）定位父元素的一半

再位移移动子元素宽高的50%

.a {
width: 400px;
height: 400px;

background-color: skyblue;
position: relative;
}
.b {
width: 50px;
height: 50px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
/* 借助2D位移可以实现水平垂直居中 */
transform: translate(-50%, -50%);
}

2.文本垂直居中

line-height的值等于本身的高时，文本垂直居中

7、元素隐藏方法

1.	hidden	直接写在标签内	整体都隐藏	不占实际位置
2.	display:none;		整体都隐藏	不占实际位置
3.	transform:scale(0); scale:0;	scale后面如果跟负值，根据数字进行缩放但内容会反向显示	整体都隐藏	占实际位置
4.	opacity:0；	0-1,值越小，透明度越高，整体变透明。数值小于0，依然是隐藏。数值大于1，按照1生效	整体都隐藏	占实际位置
5.	visibility:hidden;		整体都隐藏	占实际位置