css

盒子模型

盒子模型有两种

W3C标准盒子模型（标准模型）：它把 height/width 属性应用到内容区域，不包括 border 和 padding。
IE 盒子模型（怪异模型）：把 height/width 属性应用到内容区域加上 padding 和 border。

如何使一个块元素水平垂直居中

使用 Flexbox：将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性分别设置水平和垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用绝对定位和 transform：将父元素设置为相对定位，然后使用 top、left、bottom 和 right 属性将子元素定位到父元素中心，最后使用 transform 属性将子元素居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用表格布局：将父元素的 display 属性设置为 table，然后将子元素的 display 属性设置为 table-cell，最后使用 text-align 和 vertical-align 属性分别设置水平和垂直居中。

.parent {
  display: table;
}

.child {
  display: table-cell;
  text-align: center;  /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

其中表格布局不推荐使用，其语义性差，使得HTML代码难以维护和理解；复杂性高，代码会非常冗长和复杂；响应式设计困难，不太适合在不同屏幕尺寸下适应页面布局的需求；无法进行流式布局，对于不同屏幕分辨率的设备兼容性较差。

用CSS画一个三角形

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}

css布局方式

正常流布局（Normal Flow Layout）
浮动布局（Float Layout）
弹性盒子布局（Flexbox Layout）
栅格布局（Grid Layout）
定位布局（Positioning Layout）
多列布局（Multi-column Layout）

HTML5

HTML5的新特性

语义化标签：HTML5引入了一些新的语义化标签，如header、footer、article、section、nav、aside等，可以更好地描述页面结构。
多媒体支持：HTML5新增了video和audio标签，可以直接在网页中播放视频和音频。
画布(Canvas)：HTML5支持Canvas元素，可以使用JavaScript在网页上绘制图形和动画。
Web存储：HTML5支持localStorage和sessionStorage，可以在浏览器中本地存储数据。
地理位置API：HTML5提供了Geolocation API，可以获取用户的地理位置信息。
Web Workers：HTML5支持Web Workers，可以在后台执行JavaScript脚本，提高网页的性能。
WebSocket：HTML5引入了WebSocket协议，可以实现浏览器与服务器之间的实时数据交互。
增强的表单控件：HTML5新增了一些表单控件，如date、email、range、search等，可以使表单更加易于使用和验证。
CSS3支持：HTML5和CSS3一起使用，可以实现更加丰富的样式效果和布局设计。

HTML5结构语义化

HTML5结构语义化是指利用HTML5提供的具有语义意义的元素，HTML5提供了一些新的语义化标签，如<header>、<nav>、<article>、<section>、<footer>等，通过使用HTML5结构语义化，可以提高页面的可读性和可维护性，同时也可以为SEO优化和提高网站可访问性等方面带来好处。

cookies，sessionStorage 和 localStorage 的区别

Cookies：在客户端存储数据，可以存储小的文本信息（通常不超过4K），由服务器发送到客户端，客户端将其存储在本地文件中，并在每次请求时都将其发送回服务器。主要用于跟踪用户行为、用户认证、购物车等。但由于对安全和隐私的风险，现在越来越少被使用。
sessionStorage：本地存储技术，可以存储较大的文本信息（通常达到5-10MB），并且只在浏览器会话期间保持存在（也就是说，当用户关闭浏览器窗口或标签页时，该数据将被清除）。这意味着，sessionStorage 仅适用于在单个浏览器窗口或标签页中共享数据。
localStorage：类似于 sessionStorage，但其存储的数据可以在浏览器会话期间和之后保持存在（也就是说，即使用户关闭了浏览器窗口或标签页，该数据也将保留）。由于这个原因，localStorage 适用于可以跨多个浏览器窗口或标签页共享数据的情况。

重绘和回流

重绘（Repaint）指的是当页面中的部分内容需要更新，但是它的布局（位置和大小）并没有发生改变时，浏览器只需要重新绘制这部分内容，而不需要重新计算位置和大小，这样的操作叫做重绘。
回流（Reflow）指的是在页面布局发生改变的时候，浏览器需要计算整个页面元素的位置和大小，这种操作叫做回流。回流对于页面性能影响非常大，因为它会导致浏览器重新计算和布局整个页面元素，这个过程十分耗时，同时也会影响页面的流畅度和用户体验。

前端基础知识（面试版）--css、html

css