02 CSS行内元素和块元素在 HTML 中，元素可以分为行内元素和块元素两大类，它们在页面布局和样式应用上有不同的表

行内元素和块元素

在 HTML 中，元素可以分为行内元素和块元素两大类，它们在页面布局和样式应用上有不同的表现。

行内元素（Inline Elements）：

行内元素不会独占一行，多个行内元素可以在同一行内排列。
行内元素的宽度和高度由其内容决定，不能通过 width 和 height 属性设置。
行内元素常用于包裹文本或其他行内元素。
常见的行内元素包括：<a>、<span>、<img>、<strong>、<em>、<input> 等。

块元素（Block Elements）：

块元素会独占一行，多个块元素会在垂直方向上排列。
块元素的宽度默认填满其父容器的宽度，可以通过 width 和 height 属性设置其宽高。
块元素可以包含其他块元素或行内元素。
常见的块元素包括：<div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>、<table>、<section>、<article> 等。

转换行内元素和块元素：

可以通过 CSS 的 display 属性将行内元素转换为块元素，或将块元素转换为行内元素。
- 将行内元素转换为块元素：display: block;
- 将块元素转换为行内元素：display: inline;
- 还可以使用 display: inline-block; 使元素具有行内元素的排列特性，同时可以设置宽高。

了解行内元素和块元素的区别，有助于更好地进行网页布局和样式设计。

什么是 BFC

答：BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子的布局方式，并且与这个区域外部毫不相干。

什么会形成 BFC？它的作用是什么？

根元素 <html>。
浮动元素（元素的 float 不是 none）。
绝对定位元素（元素的 position 为 absolute 或 fixed）。
行内块元素（元素的 display 为 inline-block）。
表格单元格（元素的 display 为 table-cell，包括 table、table-row、table-cell 等）。
弹性盒子（元素的 display 为 flex 或 inline-flex）。
具有 overflow 属性且值不是 visible 的块元素（如 overflow: hidden、overflow: auto、overflow: scroll）。

作用：

阻止元素与浮动元素重叠。
包含浮动元素的高度。
防止外边距折叠。

CSS选择器及权重

CSS 选择器用于选择 HTML 元素并应用样式。不同的选择器有不同的权重，权重决定了当多个规则应用于同一个元素时，哪一个规则会生效。

常见选择器及其权重：

元素选择器（如 div、p、h1 等）：权重为 1。
类选择器（如 .class）：权重为 10。
属性选择器（如 [type="text"]）和伪类选择器（如 :hover、:nth-child）：权重为 10。
ID 选择器（如 #id）：权重为 100。
内联样式（如 style="..."）：权重为 1000。
通配符选择器（如 *）、
组合选择器（如 div p）和后代选择器（如 div > p）：权重为 0。

权重计算规则：

权重是由四个部分组成的数字：a, b, c, d。
- a：如果有内联样式，则为 1，否则为 0。
- b：ID 选择器的数量。
- c：类选择器、属性选择器和伪类选择器的数量。
- d：元素选择器和伪元素选择器的数量。

组合选择器（如 div p）和后代选择器（如 div > p）的权重计算：组合选择器和后代选择器的权重是由其组成部分的权重相加得出的。例如，div p 的权重是两个元素选择器的权重相加，即 1 + 1 = 2；div > p 的权重也是两个元素选择器的权重相加，即 1 + 1 = 2。

权重冲突解决：

当多个选择器的权重相同时，最后定义的样式会生效。
使用 !important 可以覆盖所有权重，但6869
应谨慎使用，避免难以维护的代码。

了解 CSS 选择器及其权重，有助于更好地控制样式的应用顺序和优先级。

css3 新特性

CSS3 引入了许多新特性，使得网页设计和开发更加灵活和强大。以下是一些主要的新特性：

选择器：

:nth-child()：选择特定顺序的子元素。
:not()：排除特定元素。
属性选择器：如 [attribute^="value"]、[attribute$="value"]、[attribute*="value"]。

盒模型：

box-sizing：控制盒模型的计算方式，如 content-box、border-box。

背景和边框：

多重背景：可以为一个元素设置多个背景图像。
border-radius：创建圆角边框。
box-shadow：添加盒子阴影效果。

文本效果：

text-shadow：添加文本阴影。
word-wrap：控制长单词的换行方式。

颜色：

RGBA 和 HSLA 颜色模式：支持透明度设置。

渐变：

线性渐变：linear-gradient。
径向渐变：radial-gradient。

变换：

transform：支持旋转、缩放、倾斜和平移，如 rotate、scale、skew、translate。

过渡：

transition：定义元素状态变化时的过渡效果。

动画：

@keyframes：定义动画关键帧。
animation：应用动画效果。

布局：

Flexbox 布局：display: flex，用于创建复杂的布局。
Grid 布局：display: grid，用于二维布局。

这些新特性大大增强了 CSS 的功能，使得开发者可以更轻松地实现复杂的设计效果。

详细介绍一下flex 布局

Flexbox（Flexible Box）布局是 CSS3 中的一种布局模式，旨在提供一种更加高效、简便的方式来排列和对齐容器中的子元素。它主要解决了在传统布局方式中，垂直居中、等高列、分布对齐等问题。

基本概念：

容器和项目：

容器（flex container）：使用 display: flex 或 display: inline-flex 定义的元素。
项目（flex item）：容器内部的直接子元素。

主轴和交叉轴：

主轴（main axis）：容器内项目的排列方向，可以是水平（默认）或垂直。
交叉轴（cross axis）：与主轴垂直的方向。

常用属性：

容器属性：

flex-direction：定义主轴方向（项目的排列方向）。值包括 row、row-reverse、column、column-reverse。
flex-wrap：定义项目是否换行。值包括 nowrap、wrap、wrap-reverse。
flex-flow：flex-direction 和 flex-wrap 的简写形式。
justify-content：定义项目在主轴上的对齐方式。值包括 flex-start、flex-end、center、space-between、space-around、space-evenly。
align-items：定义项目在交叉轴上的对齐方式。值包括 flex-start、flex-end、center、baseline、stretch。
align-content：定义多根轴线的对齐方式。值包括 flex-start、flex-end、center、space-between、space-around、stretch。

项目属性：

order：定义项目的排列顺序，数值越小，排列越靠前，默认为 0。
flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink：定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis：定义项目在分配多余空间之前，占据的主轴空间，默认为 auto。
flex：flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。值包括 auto、flex-start、flex-end、center、baseline、stretch。

优缺点：

优点：
- 简单易用，解决了很多传统布局方式难以处理的问题。
- 灵活性强，适用于各种复杂布局。
- 支持响应式设计，能够很好地适应不同屏幕尺寸。
缺点：
- 不能兼容 IE8 及以下浏览器。
- 对于非常复杂的布局，可能需要结合其他布局方式（如 Grid 布局）使用。

Flexbox 布局极大地简化了网页布局的实现，使得开发者能够更加高效地创建复杂的布局效果。

flex:1的效果

flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，等同于 flex: 1 1 0%。它的效果是使元素在父容器中尽可能地分配剩余空间。

flex-grow: 1：元素可以根据剩余空间进行放大。
flex-shrink: 1：元素可以根据需要进行缩小。
flex-basis: 0%：元素的初始主轴尺寸为 0。

使用 flex: 1 的元素会在父容器中均匀分配剩余空间，适用于需要自适应布局的场景。

flex:200px的效果

flex: 200px 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，等同于 flex: 0 1 200px。它的效果是使元素的主轴尺寸固定为 200px，并且允许元素在需要时缩小。

flex-grow: 0：元素不会放大以填充剩余空间。
flex-shrink: 1：元素可以根据需要进行缩小。
flex-basis: 200px：元素的初始主轴尺寸为 200px。

使用 flex: 200px 的元素会在父容器中保持 200px 的宽度，但在空间不足时可以缩小。

响应式布局

答：响应式布局是一种网页设计方法，使网页能够在不同设备和屏幕尺寸上良好显示。常用的技术包括：

媒体查询：使用 CSS 的 @media 规则，根据设备的特性（如宽度、高度、分辨率）应用不同的样式。
弹性网格布局：使用 CSS 的 flexbox 或 grid 布局，创建灵活的网格系统，自动调整元素的大小和位置。
流式布局：使用百分比宽度和高度，使元素根据父容器的尺寸自动调整。
视口单位：使用 vw、vh 等视口单位，根据视口的尺寸调整元素的大小。
图片响应：使用 srcset 和 sizes 属性，根据设备的分辨率加载不同尺寸的图片。

请使用至少两种方式实现纯CSS左栏定宽，右栏自适应布局，并简述不同方式的优缺点

（1）浮动布局实现方式：左栏设置左浮动，定宽200px; 右栏不设置浮动和宽度，设置 overflow:hidden，即可宽度自适应缺点：浮动元素脱离文档流，需要清除浮动，如果处理不好，会导致很多问题（影响前后标签、父级标签的位置以及 width height 属性）。优点：比较简单，兼容性较好。只需要清除浮动做得好，是没有什么问题的。（2）绝对定位布局实现方式：父元素设置相对定位，左栏设置绝对定位 left: 0; width: 200px; 右栏设置绝对定位 left: 200px; right: 0; 缺点：脱离文档流，之后的元素也要脱离文档流。有效性、可使用性比较差。优点：方便快捷，配合JS使用方便。（3）表格布局实现方式：父元素设置 display: table; 左栏、右栏分别设置 display: table-cell; 左栏定宽 200px 缺点：有些历史诟病，只适用部分场景；某个内容撑开了，其他内容也会跟着撑开，有时候这种效果不是我们想要的。优点：实现简单，兼容性好（IE8），在flex布局不兼容的时候，可以考虑表格布局（4）flex布局实现方式：父元素 display: flex, 左栏定宽 200px, 右栏 flex: 1 (flex-grow: 1; flex-shrink: 1; flex-basis: 0%;) 缺点：不能兼容IE8及以下浏览器。优点：移动端已经大量使用，是css3为了解决上面方案的缺点而出现，是相对比较完美的方案。

移动端如何适配不同屏幕

移动端适配不同屏幕是前端开发中的一个重要问题，以下是几种常用的方法：

媒体查询：使用 CSS 的 @media 规则，根据设备的特性（如宽度、高度、分辨率）应用不同的样式。

@media (max-width: 600px) {
  .container {
   width: 100%;
  }
}

弹性布局：使用 CSS 的 flexbox 或 grid 布局，创建灵活的网格系统，自动调整元素的大小和位置。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 auto;
}

流式布局：使用百分比宽度和高度，使元素根据父容器的尺寸自动调整。

.container {
  width: 100%;
}
.item {
  width: 50%;
}

视口单位：使用 vw、vh 等视口单位，根据视口的尺寸调整元素的大小。

.container {
  width: 100vw;
  height: 100vh;
}

响应式图片：使用 srcset 和 sizes 属性，根据设备的分辨率加载不同尺寸的图片。

<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px"
    src="image-800w.jpg" alt="Responsive Image">