CSS常见面试题

2023-04-21 20:15:03html-css022

CSS常见面试题,第1张

1.position:absolute+transform:translate(-50%,-50%)

2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)

3.flex

4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中

5.display:table-cellvertical-align:middletext-align:center

6.calc函数计算实现

1. DOM结构：元素不会渲染

2. 事件监听：不能监听DOM事件

3. 继承：子元素不会继承

4. 性能：改变此属性会重排，性能较差

1. DOM结构：元素会渲染

2. 事件监听：能监听DOM事件

3. 继承：子元素会继承，可以通过visibility:visible来取消继承

4. 性能：改变此属性会重绘，性能较好

1. DOM结构：元素会渲染

2. 事件监听：能监听DOM事件

3. 继承：子元素会继承，而且不能通过opcity：1来取消隐藏

4. 性能：改变此属性会重绘，性能较好

window.divicePixelRatio=2(默认)

意思是：我们css中1px相当于实际移动端设备2px

1.border-width:0.5px

2.box-shadow内阴影模拟边框，

box-shadow:inset 0px -1px 1px 1px red

3.通过viewport设置rem的基准值，就可以直接写rem了，较好的解决方案

4.伪类+transform

通过:after或:before设置border，结合定位

两侧宽度固定，中间宽度自适应

所以我们要尽量少使用以上属性和方法

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为例，优雅降级的写法如下。

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

1）先画个正方形；

2）将 border 的值加大，并设为不同的颜色；

3）宽高均设为 0，剩下四个border，就变成。

4）想要哪个三角形，就保留哪个三角形的颜色，其他的都设置为透明。transparent 表示透明。将边框宽度设置为不同，就可以变换三角形的形状。

1）画圆角矩形；

2）画一个深色的三角形；

3）然后再画一个同样大小白色的三角形盖在它上面，两个三角形错位 2 个像素，这样深色三角形的边缘就刚好露出一个像素

a、normal：连续的空白符会被合并，换行符会被当作空白符来处理。

b、nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

c、pre：连续的空白符会被保留。在遇到换行符或者 <br>元素时才会换行。

d、pre-wrap：连续的空白符会被保留。在遇到换行符或者 <br>元素，或者需要为了填充「行框盒子( line boxes )」时才会换行。