robbiemie/keep-learning

面试题1(day2)

Opened this issue · 0 comments

robbiemie commented

1. img 标签有哪些属性？如果图片加载失败会怎么样

  • src: 图片路径
  • alt: 文本描述，若图片加载失败，页面会显示alt内的备用文案
  • height、width
<script>
function handleError(event) {
    let el = event.srcElement
    img.src = "normal.png"
    img.onerror=null
}
</script>

<img src="notfound.png" onerror="handleError" />

讲讲盒模型

在Web开发中，盒模型（Box Model）是CSS布局的基础，它描述了如何根据元素的边框、边距、填充和实际内容来计算元素的总大小和空间占用。每个显示在页面上的元素都可以看作是一个盒子，这个盒子包含了上述几个层次。理解盒模型对于精确控制元素的布局和对齐非常重要。

盒模型的组成部分

盒模型主要由以下四个部分组成：

  • 内容（Content）：元素的实际内容区域，如文本、图片或其他媒体内容。通过CSS的width和height属性可以直接控制内容区域的大小。
  • 内边距（Padding）：内容区域周围的空白区域，位于内容和边框之间。内边距是透明的，可以通过CSS的padding属性来设置。
  • 边框（Border）：紧随内边距之后的围绕元素的线框，可以通过CSS的border属性来设置其样式、宽度和颜色。
  • 外边距（Margin）：元素外围的空白区域，用于将元素与其他元素分隔开。外边距是透明的，不会被背景色或背景图片覆盖，可以通过CSS的margin属性来设置。

盒模型的类型

CSS提供了两种盒模型：

  1. 标准盒模型（Content Box）：在这个模型中，元素的总宽度和总高度是通过将内容的width和height、padding、border和margin加在一起计算得出的。标准模式下，设置的width和height仅仅包括了内容区域的大小。
  2. IE盒模型（Border Box）：在这个模型中，元素的width和height不仅包括内容区域，还包括了padding和border，但不包括margin。这意味着，元素的实际可视区域大小直接由width和height确定。

CSS3中的box-sizing属性

通过CSS3的box-sizing属性，可以控制元素采用哪种盒模型：

  • content-box：应用标准盒模型，width和height仅包括内容区域。
  • border-box：应用IE盒模型，width和height包括内容、内边距和边框。

BFC

BFC（Block Formatting Context）即块级格式化上下文，是Web页面的可视CSS渲染的一部分，用于决定块级盒子的布局及浮动元素如何与周围元素互相影响和相互关系。

原理

在BFC中，盒子会在垂直方向上一个接一个地放置，盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

在BFC中，每个盒子的左外边缘接触到包含块（容器）的左边缘（对于从右到左的格式，接触到右边缘）。即使存在浮动也是如此（这就是BFC可以用来清除浮动的原因）。

BFC是页面上的一个隔离的容器，容器里面的元素不会影响到外面的元素，反之亦然。

如何形成BFC

  • 根元素或其他包含它的元素
  • 浮动元素（float不是none）
  • 绝对定位元素（position为absolute或fixed）
  • 行内块元素（display: inline-block）
  • 表格单元格（display: table-cell，HTML表格单元格默认值）
  • 表格标题（display: table-caption，HTML表格标题默认值）
  • 匿名表格单元格元素（display: table, table-row, table-row-group, table-header-group, table-footer-group等）
  • overflow值不是visible的块元素
  • display: flex 或 inline-flex 元素的直接子元素
  • display: grid 或 inline-grid 元素的直接子元素
  • column-span: all 的元素

BFC的用途

  1. 防止margin重叠：在同一个BFC中的块级元素垂直排列时，上下margin会合并。通过将元素放在不同的BFC中可以防止这种情况。

  2. 清除浮动：在浮动元素后创建BFC可以包含浮动元素，从而清除浮动带来的影响。

<div class="container">
  <div class="float-box">浮动内容</div>
  <div class="clear"></div>
</div>

<style>
.float-box {
  float: left;
}
.clear {
  clear: both;
}
//  使用伪元素清除浮动（推荐）
.container::after {
  content: "";
  display: table;
  clear: both;
}

</style>
  1. 防止文字环绕：在浮动元素旁边创建BFC可以防止周围的文字环绕浮动元素。
<div class="float-box">浮动盒子</div>
<div class="text-box">
  <p>这段文字不会环绕旁边的浮动元素，因为它被包含在一个新的BFC中。</p>
</div>

<style>
.float-box {
  float: left; /* 使盒子浮动 */
  width: 100px;
  height: 100px;
  background-color: lightblue; /* 仅为了视觉上的区分 */
  margin-right: 20px; /* 添加一些右边距 */
}

.text-box {
  overflow: hidden; /* 创建一个新的BFC */
  background-color: lightcoral; /* 仅为了视觉上的区分 */
}

</style>
  1. 自适应两栏布局：利用BFC可以实现两栏（一栏浮动，一栏自适应）的布局。
<div class="container">
  <div class="sidebar">固定宽度栏</div>
  <div class="main-content">自适应栏</div>
</div>


<style>
.container {
  overflow: hidden; /* 创建一个新的BFC */
}

.sidebar {
  float: left; /* 使sidebar浮动 */
  width: 200px; /* 固定宽度 */
  background-color: lightblue; /* 仅为了视觉上的区分 */
}

.main-content {
  overflow: hidden; /* 通过创建新的BFC防止环绕在浮动元素旁边 */
  background-color: lightcoral; /* 仅为了视觉上的区分 */
}

</style>