前端面试题之HTML及CSS相关

寒拾Ciao
950 阅读9分钟

前言

个人感觉此系列文章适合于纯新手及初中级前端工程师，部分知识可能略微有些超纲或者难以理解。请见谅。

其他篇幅有：

盒模型：标准盒和怪异盒

盒模型是什么

盒模型是CSS的基础，同时它也是我们在设计布局时，可能遇到难题的点。

打开F12开发者工具，选择任何一个HTML标签都可以看得出来，它们都是一个个不同大小的矩形结构。而页面布局，其实简单的来说就是对这些矩形进行组装。

开发者工具在你选中某个HTML标签时，会告诉你这个盒子的内容区(content即width和height)、内边距(padding)、边框(border)、外边距(margin)分别是多少大小。

盒模型正是由上述四个部分组成，而盒模型的大小却不同。

标准盒 & 怪异盒

盒子模型分两种，可通过box-sizing切换，值为content-box标准盒和border-box怪异盒。

上面提到了盒模型的大小并非由简单的四个不同区域组成。而这两种盒模型正是影响因素。

标准盒content-box

盒模型的大小由content+border+padding组成。三值相加等于元素真实的宽高

怪异盒border-box

盒模型的大小由content组成。或者说换个描述：width和height已经将padding和border计算在内；而标准盒模型恰恰相反。

原因呢，是因为历史遗留问题，IE8以下的浏览器只支持IE盒模型，且不允许切换。所以也叫作怪E盒模型。（笑）

笔者个人是更倾向于使用怪异盒模型的，可能是因为第一家公司项目就是全局使用怪异盒模型的缘故。而且使用怪异盒模型，在对比设计图时，可以省略很多计算大小的过程。

margin合并与margin塌陷

margin合并

HTML

<body>
  <div class='box1'></div>
  <div class='box2'></div>
  <hr>
  <div class='box3'>
    <div class='box4'></div>
  </div>
</body>

CSS

<style>
    .box1, .box2, .box3 {
        width: 200px;
        height: 200px;
    }

    .box1 {
        background-color: #bfa;
        margin-bottom: 10px;
    }

    .box2 {
        background-color: orange;
        margin-top: 100px;
    }

    .box3 {
        background-color: #bfa;
    }

    .box4 {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
    }
</style>

效果如图 image.png

总结

相邻的垂直方向的外边距会发生重叠

  • 相邻的垂直方向外边距会发生重叠现象
    • 兄弟元素
      • 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
      • 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的
    • 父子元素
      • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
      • 父子外边距的折叠会影响到页面的布局，必须要进行处理

margin塌陷

稍微有些基础的同学都知道，当float设置不为none的时候，该元素会脱离文档流漂浮起来。如果此时该元素下方有其他元素存在时，会默认上移。且刚好被漂浮起来的元素覆盖。

image.png 如图，绿色的方块就是因浮动，所以导致页面布局发生错位。

<style>
  .outer {
    border: 10px red solid;
  }
  .inner {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    float: left;
  }
  .yellow{
    width: 200px;
    height: 200px;
    background-color: yellow;
  }
</style>

<body>
  <div class='outer'>
    <div class='inner'></div>
  </div>
  <div class='yellow'></div>
</body>

解决方案—clear

  • 作用：清除浮动元素对当前元素所产生的影响
  • 可选值：
    • left 清除左侧浮动元素对当前元素的影响
    • right 清除右侧浮动元素对当前元素的影响
    • both 清除两侧中最大影响的那侧

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

以上例子的具体实现

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

设为块级元素的原因是为了让他能拥有垂直方向的外边距。

替代方案也可以直接在inner下面再加一个div

<div class='outer'>
  <div class='inner'></div>
  <div style='clear:both'></div>
</div>

image.png

引申出BFC的需要

除了clear外，还有一个名叫BFC的东西可以解决margin塌陷的问题。不光如此，它还能解决父子组件margin重叠的问题。

块格式化上下文（Block Formatting Context，BFC）

简单的来说就是：BFC是一个完全独立的布局空间，内部元素不会影响到BFC外部的布局(父子margin重叠影响)，同时在计算BFC高度的时候，会将浮动元素也计算在内。

如何开启BFC

  • 浮动元素（float值不为 none）
  • 绝对定位元素（position值为absolute或fixed）
  • 行内块元素（display值为inline-block、table-caption、table-cell、table、table-row、 table-row-group、table-header-group、table-footer-group、inline-table）
  • overflow值不为 visible、clip的块元素
  • display值为 flex 或 inline-flex 元素的直接子元素，如果它们本身既不是 flex、grid也不是table容器
  • 网格元素（display值为grid或inline-grid元素的直接子元素），如果它们本身既不是 flex、grid也不是table容器
  • overflow的值不是visible

需要注意的是，开启BFC，无论是以什么方式开启，或多或少都会有一些副作用。所以需要视情况来决定是否开启以及是用什么方式开启。

行内元素、块级元素、 空元素有哪些？

块级元素 block

特点——仅在默认情况下，特殊处理后可能部分特点丢失或有变更

  1. 每个块级元素都独占一行
  2. 内容区(content)、内边距(padding)、外边距(margin)都可以控制
  3. 宽度不设置时，默认为父元素的宽度；此特点是由于块级元素margin-left + padding-left + width + padding-right + margin-right = 父元素width这一设定决定的。再细说就是，当此等式不成立时，浏览器将自动修改margin-right来保证等式成立。当width、margin-left/margin-right同为auto时，调整width为最大；当margin-left/margin-right为auto时，同时存在则二者相等，单一存在则该值最大
  4. 块级元素排列顺序，自上而下

常见块级元素

 <div>     // 定义文档中的分区或节 
 <form>  // 创建 HTML 表单 
 <h1>-<h6>    // 定义最大的标题
 <hr>     // 创建一条水平线
 <ol>     // 定义有序列表
 <ul>    // 定义无序列表
 <li>     // 标签定义列表项目
 <p>     // 标签定义段落
 <pre>     // 定义预格式化的文本
 <table>     // 标签定义 HTML 表格
 <tbody>     // 标签表格主体（正文）
 <th>    // 定义表头单元格
 <td>    // 表格中的标准单元格
 <tr>     // 定义表格中的行

行内元素 inline

特点——仅在默认情况下，特殊处理后可能部分特点丢失或有变更

  1. 不会独占一行，会与其他行内或行内块级元素同处一行，超过一行时自动换行
  2. width、height设置无效，垂直方向上的内外边距无效；水平方向无影响
  3. 设置行高有效、宽度随内容变化而变化。
  4. 行内元素内部不可放置块级元素、a标签内部不可再放置a标签
  5. 行内元素排列顺序，自左往右

常见行内元素

 <a>     // 标签可定义锚 
 <b>     // 字体加粗 
 <big>     // 大号字体加粗 
 <br>     // 换行 
 <code>    // 定义计算机代码文本
 <em>     // 定义为强调的内容
 <i>     // 斜体文本效果
 <label>     // 标签为 input 元素定义标注（标记）
 <small>     // 呈现小号字体效果
 <span>     // 组合文档中的行内元素
 <strong> // 加粗

行内块级元素 inline-block

特点——仅在默认情况下，特殊处理后可能部分特点丢失或有变更

  1. 不会独占一行，会与其他行内或行内块级元素同处一行，超过一行时自动换行
  2. 内容区(content)、内边距(padding)、外边距(margin)都可以控制
  3. 宽度随内容变化而变化。
  4. 行内块级元素之间会有间隙，设置父级元素的font-size为0才会消失(可以理解为行内块级元素是字，这个间隙为字间距，hhhh)
  5. 行内块级元素排列顺序，自左往右

常见行内块级元素

<button> //按钮
<input> // 输入框
<select> // 下拉框
<img> // 图片

转换方式

CSS样式display修改inline-block,block,inline

CSS选择器

css选择器总结 - 掘金 (juejin.cn)

上述文章少说了!important的优先级，此优先级为最高，可覆盖内联样式。

But下面这个写法，就是大罗金仙来了，也没办法让你再修改了。

<div class="app" style="color:#fff!important">666</div>

.app {
    color: #000!important;
}

所以说做好样式隔离以及规范CSS样式是不可缺少的一件事情。

display、position都有哪些属性

关于前端position属性和display属性，这篇文章已足够 - 掘金 (juejin.cn)

CSS单位

CSS 单位 | 菜鸟教程 (runoob.com)

水平垂直居中

CSS实现水平垂直居中的10种方式 - 掘金 (juejin.cn)

flex布局

flex布局是一种布局方式，由两条轴组成，一条叫主轴，另一条叫交叉轴。默认情况下，主轴是横向、从左向右的方向；交叉轴是纵向、从上往下的方向。

flex布局由display:flex开启，其中包含多个相关CSS样式。

  • flex-direction 设置主轴方向
    • row(default) 横向
    • row-reverse 横向，子元素倒置
    • column 纵向
    • column-reverse 纵向，子元素倒置
  • flex-wrap 设置主轴换行
    • nowrap(default)
    • wrap 换行
    • wrap-reverse 换行，但会向上换行
  • flex-flow 上面两个属性的集合体，由两个值组成，前者为flex-direction 后者为flex-wrap
  • justify-content 主轴对齐方式
    • flex-start(default) 左对齐
    • flex-end 右对齐
    • center 居中
    • space-between 两端对齐，中间间隔相同
    • space-around 每个成员两侧的间隔相等
    • space-evenly 均匀分布，两侧靠边间隔与元素之间间隔也相同
  • align-items 交叉轴对齐方式
    • flex-start 交叉轴起点对齐
    • flex-end 交叉轴终点对齐
    • center 居中
    • baseline 文字基线对齐
    • stretch(default) 若未设置高度，则默认占满整个交叉轴

overflow的值

  • visible 正常渲染，但有可能会超出盒子区域显示内容
  • scroll 提供滚动条
  • hidden 不提供滚动条，也不支持用户滚动，多于内容会被裁剪，但可以通过脚本控制滚动
  • clip 和hidden类似，但不允许通过脚本滚动，也不会生成BFC
  • auto 溢出显示滚动条，不溢出则不显示，生成BFC
  • overlay 行为与auto相同，但滚动条绘制在内容之上，不占据空间

待补充

  • 静态布局、自适应布局、响应式布局、流式布局
avatar
文章
阅读
粉丝