HTML+CSS（知识点总结）

置顶刘泽宇Developer

已于 2024-04-25 15:38:10 修改

阅读量424

点赞数 3

分类专栏：面试题文章标签： css html 前端

于 2021-10-20 15:32:00 首次发布

本文链接：https://blog.csdn.net/JavaOnner/article/details/120867062

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

<!-- 自带的取色器 -->
<input type="color" />

<!-- a标签的download属性 -->
<a href="fileDownloadLocation.png" download="fileName.png">点击下载</a>

<!-- 触发浏览器的翻译功能 -->
<p translate="yes">这是需要翻译的文本。</p>

<!-- 输入文字时，浏览器会检查拼写并提示错误 -->
<input spellcheck="true" />
<textarea spellcheck="true"></textarea>

自定义列表

<dl> （description list）

<dt>名词1</dt>(description term)

<dd>名词1解释1</dd> (description description)

在这里插入图片描述

HTML5新特性

(不支持 ie8 及 ie8 以下版本的浏览器)

语义标签：HTML5 引入了一些新的语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，使页面结构更加清晰明了，提高了可读性和可访问性。
增强型表单：HTML5 提供了一些新的表单元素和属性，如 <input type="email">、<input type="url">、<input type="date"> 等，以及一些新的表单属性和方法，如 required、placeholder、pattern 等，使表单的验证和交互更加方便和强大。
视频和音频：HTML5 提供了 <video> 和 <audio> 标签，可以在网页中直接嵌入视频和音频文件，不再需要依赖第三方插件（如 Flash）。
Canvas绘图：HTML5 中的 <canvas> 标签允许使用 JavaScript 进行动态绘制图形，包括图形、动画等，为 Web 开发提供了更多的可能性。
SVG绘图：HTML5 支持使用 SVG（可缩放矢量图形）进行图形绘制，SVG 是一种基于 XML 的矢量图形格式，可以实现高质量的图形显示，并且可以通过 CSS 和 JavaScript 进行控制和交互。
地理定位：HTML5 中的地理定位 API 允许网页获取用户的地理位置信息，可以用于实现基于位置的服务和应用，如地图应用、位置提醒等。
拖放API：HTML5 引入了拖放 API，可以通过 JavaScript 实现网页元素的拖拽和放置，为用户提供了更加直观和灵活的交互方式。
WebWorker：HTML5 中的 Web Worker 允许在后台运行 JavaScript 脚本，可以提高网页的性能和响应速度，同时还可以避免阻塞主线程。
WebStorage：HTML5 引入了 Web Storage API，包括 sessionStorage 和 localStorage，用于在客户端存储数据，比传统的 Cookie 更加高效和方便。
WebSocket：HTML5 中的 WebSocket API 允许在客户端和服务器之间建立持久的双向通信连接，可以实现实时的数据传输，适用于实时聊天、在线游戏等场景。

锚点跳转

当前页面a.html: <a href="b.html#aaa">跳转到b页面aaa处</a>

另一页面b.html: <a name="aaa" id="aaa">aaa</a>

CSS

/* 当选中文本的样式 */
*::selection{
 background-color: #ffa500; /* 橙色背景 */
 color: #fff; /* 白色文本 */
}

/* 清除默认样式 */
all:unset;

/* 内容决定宽度 */
width: fit-content;

/* 清除默认样式 */
inset：0;

选择器种类

相邻选择器（h1 + p）、【子】选择器（ul > li）、【后代】选择器（li a）

选择器优先级

!important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="xxx"]{}) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器（*{}） > 继承父元素 > 浏览器默认

样式继承

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式： width height 、margin border padding ;

将超出的文本内容替换成省略号

CSS3 新特性

颜色：新增了 RGBA（红绿蓝透明度）和 HSLA（色相饱和度亮度透明度）颜色表示方法，使得颜色的描述更加灵活和方便。
文字阴影：通过 text-shadow 属性可以为文字添加阴影效果，增强了文字的视觉效果。
边框圆角：通过 border-radius 属性可以实现边框圆角效果，使得元素的边框更加美观和柔和。同时，box-shadow 属性可以为元素添加阴影效果，增强了元素的立体感。
盒子模型：通过 box-sizing 属性可以控制元素的盒子模型，包括默认的 content-box 和 border-box，使得盒子模型的计算更加灵活。
背景：新增了 background-size、background-origin、background-clip 等属性，用于控制背景图片的尺寸、原点和裁剪区域，以及实现多背景效果，用于实现更加复杂的背景布局。
渐变：通过 linear-gradient 和 radial-gradient 可以实现线性渐变和径向渐变效果，为背景和元素的填充提供了更多样化的选择。
过渡：通过 transition 属性可以实现元素样式的过渡动画效果，使得页面的交互更加流畅和自然。
自定义动画：可以使用 @keyframes 规则和 animation 属性来创建自定义动画效果，提供了更多的动画控制选项。
伪元素：CSS3 引入了 ::selection 伪元素，用于设置用户选择文本的样式。
多媒体查询、多栏布局：通过多媒体查询（Media Queries）可以根据设备特性设置不同的样式，实现响应式布局。多栏布局通过 column-count 和 column-gap 等属性可以实现多列文本布局效果。
border-image：通过 border-image 属性可以为边框添加图片样式，使得边框更加丰富和多样化。
2D、3D转换：通过 transform 属性可以实现元素的 2D 和 3D 转换效果，包括平移、旋转、缩放等，增强了页面的交互和视觉效果。

`display: none`、`visibility: hidden`和`opacity: 0`

CSS Display Comparison

	`display: none ≈ v-if`	`visibility: hidden ≈ v-show`	`opacity: 0;`
是否存在	×	√
是否重绘	√		×
是否重排	√	×
能否复原子元素	×	√	×
是否支持transition	×	√
能否触发自身绑定事件	×		√
是否影响被遮挡元素触发事件	×		√

盒子模型

box-sizing: content-box; /**W3C标准盒子模型 */
box-sizing: border-box; /*IE怪异盒子模型*/

`clientHeight`,`scrollHeight`,`offsetHeight`,以及`scrollTop`, `offsetTop`,`clientTop`

clientWidth【可视宽度=content+padding】 <= offsetWidth【整体宽度=content+滚动条宽度+padding+border】 <= scrollWidth 【总宽度=content+滚动条宽度+padding+border+(因溢出而隐藏的宽度)】

在这里插入图片描述
当有滚动条的时候，content-width会被分成【可视宽度】+【滚动条宽度】,其中滚动条的默认宽度是15px，可随屏幕大小比例变化；

滚动条自动置底

var div = document.getElementById('div');
div.scrollTop = div.scrollHeight;

BFC

Block Fromatting Context 块级格式化上下文

它是一个完全独立的空间(布局环境)，让空间里的子元素不会影响到外面的布局

特性:

垂直方向的距离由 margin 决定：BFC 中，垂直方向上相邻元素的外边距会发生重叠，但是不同 BFC 中的元素不会发生外边距重叠。
计算 BFC 的高度时，浮动元素也参与计算：在 BFC 中，浮动元素的高度会被计算在内，不会造成高度塌陷问题。

触发 BFC 的方式：

<body>
float: 除 none 以外的值;
position: absolute / fixed;
display: inline-block / table-cells / flex;
overflow: 除 visible 以外的值（hidden、auto、scroll）;

Less / Sass

scope的使用

@scope(.component) to (.a){
	div{
		/* 限定了 .component 类下的 div 元素的样式，但排除了其中的类名为 .a 的 div 元素 */
	}
}

HTML + CSS

form的`readonly`和`disable`

	`readonly`	`disable`
能否编辑	×	×
能否选择、复制	√	×
能否传递到后台	√	×

readonly只能读取但不能修改表单元素的值，而 disabled 完全禁用表单元素，既不能读取也不能修改其值。

布局

在网页中使用偶数的字体

偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏

三栏布局

绝对定位
左右浮动
table-cell
圣杯布局
双飞翼布局
Flex布局
Grid布局

清除浮动

在最后一个浮动标签后新增一个标签（不推荐）
缺点：添加无意义标签，语义化差

clear：both;

隐藏父元素溢出内容（不推荐）
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

overflow:hidden/auto; // 父元素
*zoom: 1; // IE6 中需要触发 hasLayout,只有IE6-IE7执行

使用:after伪元素清除浮动（推荐）

.父元素:after {
	content: "";
	display: block;
	clear: both;
}

.父元素 {
	*zoom: 1;
}

使用before和after双伪元素（最推荐）

.父元素:before {
	content: "";
	display: block;
}

.父元素:after {
	content: "";
	display: block;
	clear: both;
}

.父元素 {
	*zoom: 1;
}

水平垂直居中

块级元素

margin: 0 auto;

行内元素

text-align: center；

单行

line-height = height；

多行

display:table-cell;
vertical-align: middle;

使用 flex 布局

display:flex;
justify-content: center;
align-items: center;

使用grid布局

display:grid;
place-items:center;

使用绝对定位

position:absolute;

left:50%;
top:50%;
transform:translate(-50%,-50%);

margin:auto;
top:0; 
right:0; 
bottom:0; 
left:0;

实现两栏布局，左侧固定宽，右侧自适应

<div class="box">
    <div class="left" style="100px">左侧定宽</div>
    <div class="right">右侧自适应</div>
</div>

calc()：.right{width:calc(100% - 100px);}
浮动+margin：.left{float:left;} .right{margin-left:100px}
flex：.box{display:flex;} .left{0 1 100px;} .right{1}

Flex布局

flex:1

flex-grow: 1、flex-shrink: 1、flex-basis: 0的简写，代表了自动分配空间

Grid布局

fr=fraction/ˈfrækʃn/等分、碎片
在这里插入图片描述

Grid布局水平垂直居中

display: grid;
place-items: center;

display: grid;      
justify-content: center;
align-items: center;

瀑布流

基本思路：

确定列数：首先，你需要确定要创建多少列。这通常取决于设备的屏幕宽度和项目的宽度。你可以通过计算屏幕宽度并将其除以项目宽度来确定列数。
创建列容器：为每一列创建一个容器，通常是一个 <div> 元素，并设置它们的样式以确定列的宽度和间距。
加载项目：从数据源加载要显示的项目，例如图片、文本或其他内容。
确定项目位置：将每个项目添加到最短的列中，以确保列高度尽量保持一致。你可以使用 JavaScript 来计算每列的高度，并将项目添加到高度最小的列。
调整布局：当新项目添加到列中时，可能会导致某些列高度超过其他列。在这种情况下，你需要调整布局，确保各列的高度相对均匀。
实现滚动加载：如果有大量项目，你可能希望实现滚动加载，以便在用户滚动页面时动态加载更多项目。
响应式设计：瀑布流布局通常需要在不同设备上具有不同的列数和布局。因此，你需要考虑实现响应式设计，以确保在各种屏幕尺寸下都能正常显示。
性能优化：由于瀑布流中可能包含大量项目，因此性能可能是一个问题。你可以使用懒加载、图片压缩和其他性能优化技术来改善用户体验。
浏览器兼容性：最后，确保你的瀑布流布局在不同的浏览器中都能正常工作。可能需要一些额外的 CSS 或 JavaScript 代码来处理浏览器差异。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: 10px;
    }

    .grid-item {
      background-color: #f0f0f0;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">项目1</div>
    <div class="grid-item">项目2</div>
    <div class="grid-item">项目3</div>
    <!-- 更多项目 -->
  </div>
  <script>// 模拟异步加载数据
    function loadData() {
      const data = ['项目4', '项目5', '项目6']; // 模拟加载的数据
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(data);
        }, 1000); // 模拟延迟加载
      });
    }

    // 添加项目到瀑布流
    async function addItemsToGrid() {
      const gridContainer = document.querySelector('.grid-container');
      const newData = await loadData(); // 异步加载数据

      newData.forEach(item => {
        const gridItem = document.createElement('div');
        gridItem.classList.add('grid-item');
        gridItem.textContent = item;
        gridContainer.appendChild(gridItem);
      });
    }

    // 滚动到底部时加载更多项目
    window.addEventListener('scroll', () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        addItemsToGrid();
      }
    });

    // 初始加载项目
    addItemsToGrid();
  </script>
</body>

</html>