前端面试准备-------CSS（二）

最新推荐文章于 2022-05-03 18:03:06 发布

fj1247565817

最新推荐文章于 2022-05-03 18:03:06 发布

阅读量147

点赞数

分类专栏：问题面试代码文章标签：前端面试

本文链接：https://blog.csdn.net/fj1247565817/article/details/99609907

版权

问题同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

代码

10 篇文章 0 订阅

订阅专栏

面试

8 篇文章 0 订阅

订阅专栏

~~本文是根据知乎~~爱前端不爱恋爱 ~~提供的目录整理供大家学习，后将持续更新~~

十一、相邻的两个inline-block节点为什么会出现间隔，如何解决

这个问题的原因可以上述到SGML(标准通用标记语言)和TeX(排版工具)，它实际上是一个行内（inline）的问题，它由空格、换行或回车所产生空白符所致
解决方法：
1、改变代码书写方式。
2、改变字符大小。
3、改变元素间距。（font-size，letter-size，word-size）
inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。

十二、meta viewport 移动端适配

viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

响应式 Web 设计 - Viewport

十三、CSS实现宽度自适应100%，宽高16:9比例的矩形

我们通过设置宽度为百分比，根据宽高16:9比例，计算出高度值为56.25%，设置下内边距为高度的数值，最后用绝对定位把矩形或图片百分百填充到我们设置的区域里面

<style>
.box {
  width: 50%;
}

.content{
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}

.img {
  width: 100%;
  height: 100%;
  background-color: red;
  position: absolute;
}
</style>
<div class="box">
  <div class="content">
  	<!-- 矩形 -->
    <!-- <div class="img"></div> -->
    
    <!-- 图片 -->
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565800500976&di=3f23622354072bee6f6837c3db19c602&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fa08b87d6277f9e2f5756eefb1e30e924b999f3e6.jpg" class="img"/>
  </div>
</div>

十四、rem布局的优缺点

rem：相对于html根元素文本的字体尺寸，与中间层字体尺寸无关。也就是说 1rem=1*html元素的font-size。

优点：rem就相当于是一个全局缩放因子，改变它一个就可以缩放所有以它为单位的元素，只要将它与屏幕分辨率关联起来，就可以完成屏幕自适应展现。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。
缺点：ie不支持，用户体验上来看，可能有的图片或文字不应该放大或缩小
用rem实现WebApp自适应的优劣分析

十五、画三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{background: red;}
			.box{
				height: 0px;
				width: 0px; 
				border: 100px solid;
				border-bottom-color: transparent;
				border-right-color: blue;
				border-left-color: transparent;
				border-top-color: blue;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			1
		</div>
	</body>
</html>