前端面试题系列之-CSS及页面布局篇

Posted 2023-05-08

参考技术A

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：

设置到项目上的属性：

(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

上述方法都可以创建BFC，但是会带来一些负面影响：

::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好

更准确的说法

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；　　　　
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；　　　　
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；　　　　
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

常规方法

不需要使用transform属性时

webkit内核

参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能

@import规则一定要先于除了@charset的其他任何CSS规则。

不推荐使用@import:

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

伪元素和伪类的区别总结

css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

相关链接：
CSS 继承，哪些属性能继承，哪些不能

z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块

设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

1英寸（inch）=2.54厘米（cm）

手机对角线的长度换算成英寸

屏幕横向和纵向的像素点

1px即代表一个物理像素点/像素块

PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）

1px与多少厘米之间是不能直接划等号的，需要看分辨率。

一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。

参考链接：
画一条0.5px的线

在继承性上：

一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。

前端面试题--CSS篇

• 浏览器盒模型

分为行盒和块盒
行盒：display为inline的元素
块盒：display为block的元素

行盒在页面中不独占一行，块盒在页面中独占一行
无论是行盒还是块盒他们都是由以下组成的
内容区 content - -》填充（内边距）padding- -》 边框 border - - 》外边距 margin

• 清除浮动方式

IE10以下不兼容flex定位
方法一 ：子元素浮动父元素高度坍塌 给父元素添加一个overflow:hidden;
方法二：给浮动的元素本身添加一个clear：both；
方法三：给浮动元素的容器添加一个clearfix的类

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

• CSS选择器有哪些；那些属性可以继承

一、 选择器
>1、选择器（#id名）
>2、类选择器（.class名字）
>3、标签选择器（div li span）
>4、相邻选择器（span+p）
>5、子代选择器（div > p）
>6、后代选择器（li  span）
>7、*通配符选择器（*）
>8、属性选择器（a[rel = "external"]）
>9、伪类选择器（a:hover a:link）
>10、伪元素选择器（p:first-letter p:first-line）
/*
特别说明一下伪类选择器和伪元素选择器的区别
伪类选择器：是可以创建一个元素
伪元素选择器：只能去改变某些元素的一些特性
*/

可以继承的元素那些（不是全部没写全）
所有元素可继承的：
visibility和cursor
终极块级元素可继承的：
text-indent和text-align
内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image

• ::after/:after与::before/:before的区别

首先他们都是伪元素选择器与:hover/:active不同
二、:before和:after是css2中提出来的；所以兼容性只能到IE8
三、::before与::after都是CSS3中提出来 :before与::before的用法是一样的 但是兼容性:after/:before比::after/::before好 不过在h5中::after/::before要比:after/:before要好

• CSS样式优先级计算方法

!important                  Infinity
行间样式                      1000
id                            100
class|属性选择器|伪类选择器     10
标签选择器|伪元素选择器          1
通配符选择器                     0

• CSS3新特性与伪类有哪些？

							新特性
1、过度 tansition
2、动画 animation
3、形状转换 tansform
4、选择器
5、阴影 box-shadow
6、边框 border-image
7、背景 background-clip
8、反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
9、文字 换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word;  超出省略号   text-overflow:clip|ellipsis|string                                                                                                 文字阴影   语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
10、颜色 rgba
11、 渐变
12、 Filter（滤镜）黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
13、 弹性布局flex
14、 栅格布局 grid
15、 盒模型定义 ：box-sizing:border-box的时候，边框和padding包含在元素的宽高之内；
               box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内
16、媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环
转载：https://www.jianshu.com/p/56b7302d7f7f

• less的优势？

1、less 是一个CSS预处理器
2、支持跨浏览器兼容
3、由于使用less嵌套，使css更简短 更干净并以特定的方式组织
4、由于less使用变量，可以更快的实现维护
5、less提供了一些列运算符，使编码更快更省时
6、less提供了@inport规则，这样我们就可以轻松地处理外部文件。
 注：导入是必需的，因为许多人将样式表分割为多个文件，而不是将其放入一个文件中。
7、less提供了合并属性；Less最令人兴奋的特征是接受多个值，
		如transform，transition和box-shadow
8、less是javascript编写的，他可以比任何css其他预处理器更快的编译

• display有哪些值；并说明他们的作用
  

常用的
none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。

• 解释以下CSS3的flexbox弹性盒布局，以及应用场景？

弹性盒模型是c3规范的新的布局方式，该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。在传统的布局中，block布局是把块级元素在垂直方向从上向下一次排列的，而inline布局则是在水平方向来排列。弹性盒布局没有这样的内在限制，操作比较自由。
应用场景： 适用于移动端，在Android和iOS上也支持。

• CSS打造三角形

设置一个容器的宽高为0 只设置他三条边框宽度

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

• 满屏字品布局？

CSS代码

      body {
            width: 100%;
           }
        
        div {
            width: 45%;
            height: 300px;
            border: 5px solid red;
        }
        
        .div1 {
            margin: 0 auto;
        }
        
        .main {
            width: 100%;
            position: relative;
            border: none;
        }
        
        .div2 {
            position: absolute;
            left: 0;
            width: 48%;
        }
        
        .div3 {
            position: absolute;
            right: 0;
            width: 48%;
        }

HTML代码

<div class="div1"></div>
    <div class="main">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

• li与li之间看不见的间隙是什么原因引起来的？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，
换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

• 为什么要初始化CSS样式？

1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多

• CSS里的visibility属性的collapse属性是干嘛的？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
但遗憾的是，各种浏览器对collapse值的处理方式不一样。

• 外边距合并是什么意思？

CSS外边距合并是指当两个垂直外边距相遇时，他们将形成一个外边距，并且合并后外边距的高度等于发生合并的外边距的高度中较大者；但是只有普通文档流中块框的垂直外边距才会发生外边距合并，而行内边框，浮动框或绝对定位之间的外边距不会合并

• 移动端布局用过媒体称查询吗？

<head>里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS : @media only screen and (max-device-width:480px) {/css样式/}
本文来源：码农网
本文链接：https://www.codercto.com/a/63017.html

• 响应式页面？

响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。这里所说的终端主要包括PC端和移动端，它们的分辨率以及屏幕大小都是不同的。在网站开发时，只须加入响应式设计就可以兼容这些终端，就不必单独制作移动端页面了。响应式开发主要是为了解决移动互联网浏览的问题，通过响应式设计能使网站在手机和平板电脑上有更好的浏览、阅读体验。