前端八股文自救指南——HTML&CSS

歪瓜
268 阅读13分钟

HTML

src和href

src和href都是用来加载外部资源，但有所不同。

浏览器解析到src时，会暂停对其他资源的处理，直到src加载完成。 将资源内容嵌入到标签所在的位置，将其指向的资源下载应用到文档内，如js脚本等。

href指向外部资源所在的位置，与当前元素位置建立链接，浏览器解析到它指向的位置并下载时候不会阻止其他资源的加载解析。

H5新特性

  • 语义化标签，如：head、footer、nav...

  • 表单类型属性，email、number、color颜色拾取器、placeholder、autofocus自动获取焦点、时间控件...

  • 音视频标签，video、audio

  • canvas动画、websocket、拖拽...

  • 浏览器本地存储：localStorage、sessionStorage

<!DOCTYPE html> 的作用

<!DOCTYPE html> 即文档类型声明，它是 HTML 文档的第一行代码，位于 <html> 标签之前，用于告知浏览器当前 HTML 文档使用的 HTML 版本规范。

  • 触发浏览器的标准（严格）渲染模式。

  • 浏览器在解析 HTML 文档时，存在两种渲染模式，即标准模式（也称为严格模式）和怪异模式（也称为混杂模式）。标准模式下，浏览器会按照 W3C 制定的标准规范来解析和渲染页面；而怪异模式则是为了兼容旧版本的 HTML 页面，采用一些非标准的渲染方式。

  • 帮助浏览器正确解析页面,浏览器通过 <!DOCTYPE html> 声明知道当前页面遵循 HTML5 规范，从而按照 HTML5 的语法规则、元素定义和特性来解析页面。例如，浏览器会正确识别和处理 HTML5 新增的语义化元素（如 <header>、<nav>、<article>、<section>、<footer> 等）以及新的表单输入类型（如 email、tel、date 等）。

iframe

<iframe> 是 HTML5中新引入的元素，用于在当前 HTML 页面中嵌入另一个 HTML 页面。<iframe> 即内联框架（Inline Frame），它可以将另一个网页嵌入到当前网页的指定位置，就好像在当前页面中开辟了一个小窗口，专门用来显示其他网页的内容。（注意：iframe会阻塞onLoad加载）

基本使用
<iframe src="URL" width="宽度" height="高度"></iframe>
  • src：必需属性，指定要嵌入的网页的 URL。
  • width 和 height可选，用于指定内嵌页面宽高。

Canvas 和 SVG

  • Canvas 是 HTML5 新增的一个元素<canvas>，它就像一块空白的画布，通过 JavaScript 代码在这个画布上绘制2D图像，逐像素渲染。

  • SVG 即可缩放矢量图形，可以无损地进行缩放，是一种基于 XML 语法的图像格式。SVG 图形由一系列的图形元素（如 <rect>、<circle>、<path> 等）组成，通过操作元素来定义图形，而非像素。

<script></script>中defer和async

无属性
  • 没有 defer 或 async 属性时，浏览器会按照文档的顺序依次解析 HTML 内容，当遇到 <script> 标签时，会立即停止解析，开始下载脚本文件，下载完成后立即执行脚本，执行完毕后才会继续解析剩余内容。这可能会导致页面渲染被阻塞，尤其是当脚本文件较大时，用户会明显感觉到页面加载缓慢。
defer属性

  • 加载：具有 defer 属性的 <script> 标签会在 HTML 解析过程中异步下载脚本文件，不会阻塞 HTML 文档的解析。

  • 执行：脚本会在 HTML 文档解析完成后、DOMContentLoaded 事件触发之前按照脚本在文档中出现的顺序依次执行。也就是说，defer 脚本的执行顺序是有保证的，并且会等待 HTML 结构完全构建好之后再执行。

async 属性

  • 加载：具有 async 属性的 <script> 标签同样会在 HTML 解析过程中异步下载脚本文件，不会阻塞 HTML 文档的解析。

  • 执行：脚本下载完成后会立即执行，执行顺序不确定，取决于脚本文件的下载完成时间。也就是说，async 脚本不会按照它们在文档中出现的顺序执行，可能会打乱脚本之间的依赖关系。

HTML各类元素

行内元素：

<a>（锚点）、<img>（图像）、<input>（输入框）、<label>（表单标签）、<select>（下拉列表）、<textarea>（文本域）、<span>（通用行内容器）、<br>（换行符）、<i>（斜体）、<em>（强调）、<strong>（重要）...

块级元素：

<div>（通用块级容器）、<p>（段落）、<h1> - <h6>（标题）、<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）、<pre>（预格式化文本）、<blockquote>（块引用）、<form>（表单）...

空（void）：

<img>（图像）、<input>（输入框）、<br>（换行符）、<hr>（水平线）、<meta>（元数据）、<link>（外部资源链接）、<area>（图像映射区域）、<base>（页面基准 URL）...

增添、删除、移动、复制、创建、查找DOM节点

增添
  • document.appendChild(dom)
  • dom.insertBefore(newDom,prevDom)
删除
  • parentDom.removeChild(childDom)
移动
  • document.appendChild(targetDom)(其实是先删除节点再增添节点到其他位置)
复制
  • dom.cloneNode(true)(true表示复制子节点)
创建
  • document.createElement(dom)
  • document.createTextNode(dom)（表示创建文本节点）
查找:
  • document.getElementById("elementId")
  • document.getElementsByClassName("className")
  • document.getElementsByTagName("tagName")
  • document.querySelector("CSS-selector")
  • document.querySelectorAll("CSS-selector")

CSS

CSS3新特性

选择器增强
  • 可以更灵活地根据元素的属性及其值来选择元素。例如，[attribute^=value] 选择属性值以指定值开头的元素，[attribute$=value] 选择属性值以指定值结尾的元素，[attribute*=value] 选择属性值包含指定值的元素。
伪类选择器增多
  • 新增了 :nth-child()、:nth-of-type()、:last-child、:only-child 等伪类。
背景和边框属性增强

  • 支持多背景图片，通过逗号分隔多个背景图像的 URL。还可以使用 background-size 属性设置背景图片的大小，使用 background-origin 属性指定背景图像的定位区域。

  • 可以使用 border-radius 属性创建圆角边框，使用 box-shadow 属性添加盒阴影，使用 border-image 属性将图像应用为边框。

文本效果增强
  • text-shadow属性：用于为文本添加阴影效果，可以指定阴影的偏移量、模糊半径和颜色。
  • word-wrap和word-break属性：word-wrap（现推荐使用 overflow-wrap）允许长单词或 URL 地址换行到下一行，word-break 可以控制单词如何换行。
弹性布局（Flexbox）和网格布局（Grid）

  • FlexBox：一种一维布局模型，用于为盒状模型提供最大的灵活性。通过 display: flex 或 display: inline-flex 将元素设置为弹性容器，然后使用 flex-direction、justify-content、align-items 等属性来控制子元素的布局。

  • Grid：一种二维布局模型，可以更方便地创建复杂的网格布局。通过 display: grid 将元素设置为网格容器，使用 grid-template-columns、grid-template-rows 等属性定义网格的列和行。

动画效果
  • @keyframes和animation（关键帧动画）：@keyframes 规则用于定义动画的关键帧，animation 属性用于应用动画。可以控制动画的名称、持续时间、播放次数、播放方向等。

盒模型

标准盒模型和IE盒模型都是由四个部分组成，即margin、border、padding和content。但是区别在于设置width和height时，对应的范围不同。

  • 标准盒模型的width、height只包含了content
  • IE盒模型的的width、height除了content本身，还包含了border、padding

可以通过修改元素的box-sizing属性来改变元素的盒模型

  • box-sizeing: content-box表示标准盒模型（默认值）
  • box-sizeing: border-box表示IE盒模型（IE盒模型)

CSS选择器以及它们的优先级

选择器类型描述选择器权重
元素选择器（如 p、div、h1 等）通过元素的标签名来选择 HTML 元素。例如，p 选择器会选中页面中所有的 <p> 标签元素。权重值：1
类选择器（如 .classname）使用类名来选择具有特定 class 属性值的元素。在 HTML 中给元素添加 class 属性，在 CSS 里通过 . 加上类名来使用该选择器。比如 .highlight 会选中所有 class 属性为 highlight 的元素。权重值：10
ID 选择器（如 #idname）根据元素的 id 属性来选择特定元素，id 在一个 HTML 文档中必须是唯一的。像 #main-content 就会选中 id 为 main-content 的元素。权重值：100
属性选择器（如 [attribute]、[attribute=value] 等）依据元素的属性及其值来进行元素选择。例如 [type="text"] 会选中所有 type 属性值为 text 的元素。权重值：10
伪类选择器（如 :hover、:first-child、:nth-child() 等）用于选择处于特定状态或具有特定位置关系的元素。例如 a:hover 能选中鼠标悬停在上面的 <a> 标签元素；li:first-child 会选中每个 <ul> 或 <ol> 里的第一个 <li> 元素。权重值：10
伪元素选择器（如 ::before、::after、::first-letter 等）用来选择元素的特定部分。例如 p::first-letter 可选中 <p> 标签内的第一个字母。权重值：1
组合选择器
- 后代选择器（如 div p）选择第一个选择器元素的后代元素，即被嵌套在该元素内部的元素。例如 div p 会选中 <div> 标签内的所有 <p> 标签元素。各部分选择器权重相加，如 div p 权重为 1 + 1 = 2
- 子选择器（如 div > p）只选择第一个选择器元素的直接子元素。例如 div > p 仅选中 <div> 标签的直接子元素 <p> 标签元素。各部分选择器权重相加，如 div > p 权重为 1 + 1 = 2
- 相邻兄弟选择器（如 h2 + p）选择紧跟在第一个选择器元素之后的具有相同父元素的相邻元素。例如 h2 + p 会选中紧跟在 <h2> 标签之后的 <p> 标签元素。各部分选择器权重相加，如 h2 + p 权重为 1 + 1 = 2
- 通用兄弟选择器（如 h2 ~ p）选择在第一个选择器元素之后的具有相同父元素的所有兄弟元素。例如 h2 ~ p 会选中 <h2> 标签之后的所有 <p> 标签兄弟元素。各部分选择器权重相加，如 h2 ~ p 权重为 1 + 1 = 2
通用选择器（*）可以选择 HTML 文档中的所有元素。权重值：0
内联样式（如 <div style="color: red;">）直接写在 HTML 元素的 style 属性里的样式。权重值：1000
!important它不是选择器，但能覆盖其他任何样式声明。给样式属性加上 !important 后，该样式会优先应用。例如 color: red !important;。优先级最高，高于所有选择器权重
优先级
  • !important
  • 内联样式
  • ID选择器
  • 类选择器/伪类选择器/属性选择器
  • 标签选择器/伪元素选择器
  • 关系选择器/通配符选择器

隐藏元素的方式

  • display：none：元素完全脱离文档流，不存在于文档，不占据位置。
  • visibility： hidden：元素不可见，但未脱离文档流，仍然占据空间。
  • opacity：0：透明度为0。
  • z-index：负值（即置于所有元素下方）。
  • position：absolute：移动到浏览器视口之外。

文本溢出处理

单行文本溢出
  • overflow: hidden;溢出隐藏
  • text-overflow: ellipsis;溢出用省略号显示
  • whtie-space: nowrap;规定段落中的文本不进行换行
多行文本溢出
  • overflow:hidden text-overflow: ellipsis;溢出用省略号显示
  • display:-webkit-box;作为弹性伸缩盒子模型显示。
  • -webkit-box-orient:vertical;设置伸缩盒子的子元素排列方式：从上到下垂直排列
  • -webkit-line-clamp:3;显示的行数

Sass & Less

均为CSS预处理器，允许用户使用更加简洁高效的语法实现CSS样式控制。本身不可直接被浏览器使用，要通过编译生成浏览器可以识别的CSS代码。（可以使用诸如变量、函数、循环等语法，便于开发）

  • Sass是在服务端处理的，使用Dart-Sass或Node-Sass
  • Less是需要引入less.js来处理Less代码输出CSS到浏览器，或者在服务器将Less语法编译成css文件再使用。

像素单位

  • px：固定像素单位，不随其它元素的变化。
  • em：相对于父元素的单位，随着父元素的font-size属性值变化。
  • rem：相对于根元素html，随html元素的font-size属性值变化。

二栏布局

浮动实现
  • 原理：利用 float 属性让元素向左或向右浮动，从而实现左右并列的布局。通过 float: left 让左右两栏元素浮动到同一行，设置不同的宽度来划分空间，使用 clearfix 类清除浮动，防止父元素高度塌陷。
* {
    margin: 0;
    padding: 0;
}

.left {
    float: left;
    width: 20%;
    background-color: lightblue;
}

.right {
    float: left;
    width: 80%;
    background-color: lightgreen;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
弹性布局（Flexbox）实现
  • 原理：使用 display: flex 将父元素设置为弹性容器，通过 flex 属性控制子元素的伸缩性。将父元素 container 设置为弹性容器，左侧子元素设置宽度，右侧子元素通过flex：1 属性占满剩余空间。
.container {
    height:150px;
    display: flex;
}

.left {
    width:200px;
    background-color: lightblue;
}

.right {
    flex: 1;
    background-color: lightgreen;
}
网格布局（Grid）实现
  • 原理：使用 display: grid 将父元素设置为网格容器，通过 grid-template-columns: 1fr 3fr 将容器分为两列，左栏占 1 份，右栏占 3 份。
.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.left {
    background-color: lightblue;
}

.right {
    background-color: lightgreen;
}

水平和垂直方向上的居中

  • 绝对定位法-1：
.parent { 
    position: relative; 
}
 .child {
    display:absolute;  
    top:50%;  
    left:50%;
    transform:translate(-50%,-50%);
 }
  • 绝对定位法-2：
.parent { 
    position: relative; 
} 
.child { 
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
}
  • flex布局法
.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

flex:1 的含义

flex: 1是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。它也表示flex： 1 1 auto。

  • flex-grow定义项目发大比例，默认为0，即存在剩余空间，也不放大。

  • flex-shrink定义项目收缩比例，默认为1，即空间不足，会进行缩小。

  • flex-basis属性决定了弹性元素在分配剩余空间之前的初始大小。可以把它看作是弹性元素的 “初始宽度”（当主轴为水平方向时）或 “初始高度”（当主轴为垂直方向时）。

BFC

BFC 即块级格式化上下文（Block Formatting Context），是一个独立的渲染区域，规定了内部的块级元素如何布局，并且与外部元素相互隔离。常用于清除浮动和防止margin重叠或创建两栏布局

形成条件

  • 浮动元素：元素的 float 属性值为 left 或 right。

  • 绝对定位元素：元素的 position 属性值为 absolute 或 fixed。

  • 行内块元素：元素的 display 属性值为 inline-block。

  • 表格单元格：元素的 display 属性值为 table-cell。

  • 弹性元素：元素的 display 属性值为 flex 或 inline-flex 的直接子元素。

  • 网格元素：元素的 display 属性值为 grid 或 inline-grid 的直接子元素。

  • 溢出不为 visible 的元素：元素的 overflow 属性值不为 visible，如 hidden、auto、scroll 等。

margin重叠 & 高度塌陷

margin重叠
产生原因
  • 相邻元素的垂直 margin 重叠：在文档流中，两个相邻的块级元素的垂直方向上的 margin 会发生重叠，取其中较大的值作为它们之间的间距。
  • 父子元素的 margin 重叠：当父元素没有上边框、上内边距，且子元素的上 margin 没有被阻挡时，子元素的上 margin 会与父元素的上 margin 重叠。
解决方法
  • 给父元素或子元素添加边框或内边距：给父元素添加 border-top 或 padding-top，或者给子元素添加 margin-top 以外的其他方向的 margin，可以阻止 margin 重叠。
  • 给父元素设置 overflow:hidden：触发 BFC 可以使父子元素的 margin 不再重叠。
  • 使用 flex 布局：将父元素设置为 display:flex，可以改变元素的布局方式，避免 margin 重叠。
  • 给元素添加 position:absolute 或 float:left/right：将元素设置为绝对定位或浮动，使其脱离文档流，这样 margin 就不会重叠，但这种方法可能会影响其他布局，需要谨慎使用。
avatar
文章
阅读
粉丝