CSS+Html面试题（四）

文章目录

• 一、怎么解决2个行内块元素中间的空白？
• 二、iframe的优点和缺点？
• 三、子元素设置margin-top父元素也会跟着移动，是怎么回事？
• 四、简述什么是伪元素和伪类，并列举一些自己知道的伪元素和伪类？
• 五、实现一个左边固定宽度、右边自适应布局（flex）
• 六、移动端适配的方式有哪些？
• 七、响应式布局和弹性布局区别和应用
• [八、 随着屏幕缩放，图片能够自适应保持长宽等比为16:9或者1:1，图片不能压缩](#八、 随着屏幕缩放，图片能够自适应保持长宽等比为16:9或者1:1，图片不能压缩)

一、怎么解决2个行内块元素中间的空白？

空白主要是由回车换行生成的空白符导致的

解决办法:

手动去掉回车换行符

使用font-size:0

方案二：父元素设置font-size:0px（推荐）
 
<style type="text/css">
    *{margin: 0;padding: 0;}
    ul{
        list-style: none;
        font-size: 0;
    }
    ul li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        font-size: 18px;
    }
</style>
 
<ul>
    <li>1</li>
 
    <li>2</li>
 
    <li>3</li>
 
    <li>4</li>
 
</ul>
 
注意：如果子盒子有文本，需要单独设置font-size在这里插入代码片

二、iframe的优点和缺点？

infram用于嵌入另一个HTML文档或者其他外部资源（网页、视频、地图）

优点：简单:使用简单，只要提供需要嵌入的url即可

独立性： 内嵌的内容在 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。

缺点：一个页面中如果多次使用inframe，会导致性能问题

嵌入的网站有可能不安全

三、子元素设置margin-top父元素也会跟着移动，是怎么回事？

这是经典的垂直外边距重叠问题

原因：在文档流中两个盒子只要直接接触，就会发生两个外边距合并成一个外边距的问题

解决办法：触发BFC

四、简述什么是伪元素和伪类，并列举一些自己知道的伪元素和伪类？

伪元素：在DOM中创建一个不存在的元素，但是不会占据文档流空间

::before 在某元素前面创建一个元素

::after 在某元素后面创建一个元素

::first-lint 在选择元素的第一个行

::first-letter 在选择元素的第一个字母

伪类：选择元素的特定状态或特定行为的关键字，元素在文档流中真实存在

:hover 鼠标悬停在元素上会触发的样式

:active 元素和用户发生互动时会触发的样式

:focus 元素获得焦点时触发的样式

:nth-child(n) 选择呢元素的第n个孩子

五、实现一个左边固定宽度、右边自适应布局（flex）

<style type="text/css">
    *{margin: 0;padding: 0;}
    .container{
        display: flex;
        width: 100%;
        height: 100vh;
    }
    .left{
        width: 300px;
        background: red;
    }
    .right{
        flex: 1;
        background: blue;
    }
</style>
 
<div class='container'>
    <div class='left'>left</div>
    <div class='right'>right</div>
</div>

六、移动端适配的方式有哪些？

方法一、rem+html中的font-size方式，在不同的屏幕下实现不同的样式，可以只需要改html中的font-size

方法二、vw适配方案

七、响应式布局和弹性布局区别和应用

响应式布局可以在不同的屏幕或者设备下显示不同的样式；

弹性布局是让元素可以更好地等分空间，但是做不到在不同分辨率下显示不同的样式

八、 随着屏幕缩放，图片能够自适应保持长宽等比为16:9或者1:1，图片不能压缩

原理：让比如某div盒子具有16:9或者1:1的比例，然后通过object-fit的设置，让图片适应容器的高度与宽度

要实现在屏幕缩放时，图片能够自适应并保持长宽比为 16:9 或 1:1，同时又不能被压缩，可以通过 CSS 的 object-fit 属性和媒体查询来实现。object-fit 属性用于指定替换元素（如 标签）的内容应该如何适应其容器。

以下是一个示例代码，展示了如何实现图片自适应并保持长宽比为 16:9 或 1:1 的效果：

<style>
  .image-container {
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
    position: relative;
    overflow: hidden;
  }
 
  .image-container.square {
    padding-bottom: 100%; /* 1:1 比例 */
  }
 
  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 图片自适应并保持长宽比 */
  }
</style>
 
 
<div class="image-container">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>
 
<div class="image-container square">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>

在上面的代码中，通过设置 .image-container 元素的 padding-bottom 属性来实现容器的高度与宽度之比为 16:9 或 1:1。图片使用绝对定位填充整个容器，并通过 object-fit: contain; 实现图片自适应并保持长宽比的效果。

通过媒体查询可以根据屏幕宽度等条件来调整图片容器的大小，从而实现在不同屏幕尺寸下图片的自适应效果。这样，无论屏幕如何缩放，图片都能保持所需的长宽比，同时不会被压缩变形。

object-fit 属性部分说明：有兼容性
 
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
 
1. object-fit: contain
    图像的大小将被调整以适应其容器的长宽比。如果图像的长宽比与容器的长宽比不一致，它就会被"黑边化"。（即图像的长宽比不变）
    
2. object-fit: cover
    图像也将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，那么它将被剪切以适应。
 
3. object-fit: fill
    图像将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，它将被挤压或拉伸。
    
4. object-fit: none
    图像根本不会被调整大小，既不会被拉伸也不会被挤压。它的作用与cover类似，但它不依赖于其容器的长宽比。
...