HTML&CSS八股

谈一谈你对HTML语义化标签的理解

  • 可读性：语义化标签让HTML更易读懂，如用article,section,header等代替div。
  • 无障碍访问：对残疾用户，屏幕阅读器可以通过语义化加速理解
  • 搜索引擎优化：搜索引擎爬虫也依赖于标签来理解网页的结构和内容，语义化有助于提升搜索排名
  • 维护成本：语义化可以减少沟通成本，提高开发效率
  • 样式和行为的分离：有助于将内容的结构与样式和行为分离
1
2
3
4
5
6
7
8
9
10
<body>
┌─<header>        页头（logo + 主导航）
├─<nav>           主导航 / 面包屑
├─<main>          页面唯一核心内容区
│ ├─<article>     独立完整内容（新闻、博客、商品卡片）
│ ├─<section>     按主题分块（必须有标题）
│ ├─<aside>       侧边栏（与周围内容弱相关）
│ └─<figure>+<figcaption>  图表/代码块及其标题
├─<footer>        页脚（版权、备案、友链）
└─<time datetime> 机器可读日期

HTML5新特性有哪些

  • 新的语义化标签
  • 新表单控件：email，url，number等
  • 引入了canvas用来绘制图形，audio，video等音视频标签
  • Web存储：localStorage和sessionStorage
  • 通过应用程序缓存可以让应用离线运行
  • Web Workers允许js后台线程运行
  • 可以获取用户地理位置
  • 允许跨文档通信
  • 允许服务器向客户端推送实时消息
  • Web Components：自定义元素，影子DOM，HTML模板

行内元素与块级元素的区别

1.块级（ div，section，header）：

  • 以块形式显示，在页面上占据一整行
  • 高度和宽度可以通过CSS控制
  • 可以包含其他块级元素和行内元素
    2.行内（span，a，img）：
  • 不会独占一行，排成一行直到填满
  • 宽高通常是内容决定，也可以CSS
  • 内通常包含文本或其他行内元素
    区别：
  • 布局：块级元素会影响布局的流，而行内元素不会。
  • 宽度和高度：块级元素的宽度默认填满父元素，而行内元素的宽度默认是内容的宽度。
  • 换行：块级元素前后会换行，行内元素不会。

CSS选择器有哪些

  • 通用选择器：* 选择所有元素
  • 类型选择器：div，p，h1按照元素类型选择
  • 类选择器：.my-class
  • ID选择器：#my-id ,通过id属性选择页面唯一元素
  • 属性选择器：[type=”text”]
  • 伪类选择器：:hover, :focus, :nth-child(2), 为页面上的特定状态选择元素
  • 伪元素选择器：::before, ::after，允许在元素内容前后添加特殊内容
  • 关系选择器：1.子选择器：ul > li。2.相邻兄弟选择器：h1 + p选择紧跟h1后面的p。3.通用兄弟选择器：h1 ~ p选择h1后所有p
  • 组合器：div .my-class或input[type=”text”] :focus等

CSS选择器权重

  • 内联样式：权重最高
  • ID选择器：权重100
  • 类选择器，属性选择器和伪类选择器：权重10
  • 类型选择器和伪元素：权重1
  • 继承样式：没有权重
  • 通用选择器，否定伪类和关系选择器：没有权重

CSS3新增了哪些新特性

  • 增加了更多选择器，例如属性选择器，结构伪类（:nth-child），否定伪类(:not)
  • 对框盒模型进行了扩展，包括对box-sizing的支持
  • 增加了对背景和边框的控制
  • 2D/3D转换（transform）
  • 动画，transition平滑过渡,animation允许更复杂动画
  • 增加了线性渐变和径向渐变
  • 文字效果增加了文字阴影，换行，强制换行
  • 多媒体查询：允许根据不同设备进行适配
  • 提供了弹性盒模型Flexbox
  • 引入了网格布局CSS Grid
  • 新的单位vw,vh,em,rem

谈一谈对盒子模型的理解

CSS盒子模型是设计网页布局的基础，他包括几个关键部分：

  • 首先是内容这是盒子模型的核心，也就是网页上展示的文本图片等
  • 接着是内边距，就是内容和边框之间的空间
  • 然后是边框，围绕在内边距外面的线，可以设置样式
  • 边框外面的空间是外边距，用于控制元素间的距离
  • 盒子宽度和高度通常不包含内外边距和边框，除非设定box-sizing: border-box;
  • 再是盒子的类型，分为块级盒子和行内盒子，块级盒子通常会创建一个新的块
  • 最后有一点是刚刚说的box-sizing属性，他决定宽高是否包含内边距和边框

position定位有哪几种

  • static：默认，元素按正常文档流进行布局
  • relative：元素的位置相对于它在文档流中的原始位置进行偏移，但不会影响其他元素的布局
  • absolute：元素的位置相对于它的最近非static定位祖先元素进行偏移；元素脱落文档流，不占据空间
  • fixed：元素的位置相对于浏览器窗口进行定位；同样脱离文档流
  • sticky：元素会根据正常文档流进行定位，直到页面滚动到某个位置后会表现像fixed定位一样；relative和fixed之间一种折衷的定位方式

display : none和visibility : hidden区别

  • 占用空间：前者会完全消失，不占空间，后者仍然占据空间，只是看不到
  • 渲染：前者不会被浏览器渲染，后者元素会被渲染但不可见
  • 继承性：前者不会继承，后者可以被继承
  • 滚动问题：如果元素是一个滚动容器，前者不会有滚动条，后者滚动条仍然可见
  • 性能：前者通常性能更好，因为减少了页面的渲染

对Flex布局的理解

Flex布局或者说弹性布局是设计用于一维布局的一种现代CSS布局方式。它的作用是可以灵活分配容器空间，使子元素可以根据容器大小动态调整宽高，从而实现响应式设计。Flex布局的核心概念包括以下几点：

  • 容器和子元素：设置display: flex或display: inline-flex就可以将一个元素定义为Flex容器。Flex容器内的直接子元素会自动变成Flex项，并遵循Flex布局的规则。
  • 主轴和交叉轴：主轴是子元素排列的主要方向，而交叉轴是垂直于主轴的方向
  • 对齐和排序：可以轻松控制项在主轴和交叉轴上的对齐方式或排列顺序
  • 自动换行，支持嵌套