面经总结-HTML+CSS

最新推荐文章于 2023-04-12 20:48:11 发布

MrQiuGH

最新推荐文章于 2023-04-12 20:48:11 发布

阅读量108

点赞数 1

分类专栏：面经总结 HTML和CSS 文章标签： html html5 css3 前端

本文链接：https://blog.csdn.net/xh17864388739/article/details/110526226

版权

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读，写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
像标题（H1~H6）、列表（li）、强调（strong em）
在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构；
有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
便于团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box。
content-box：让元素维持 W3C 的标准盒模型。元素的宽度 / 高度由 border + padding + content 的宽度 / 高度决定，设置 width/height 属性指的是 content 部分的宽 / 高。
border-box：让元素维持 IE 传统盒模型（IE6 以下版本和 IE6~7 的怪异模式）。设置 width/height 属性指的是 border + padding + content。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号 (…) 的元素模拟实现；（添加伪元素）
height 高度真好是 line-height 的整数倍；
结束的省略好用了半透明的 png 做了减淡的效果，或者设置背景颜色；

伪类可以理解为是一种状态，用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
first-child、last-child、nth-child、first-of-type(父元素第一个特定的子元素)、last-of-type、nth-of-type、lang、focus、lvha（a 标签四个）
伪元素则代表一些实实在在存在的元素, 可以创建一些文档语言无法创建的虚拟元素。
::after、::before、::first-letter（第一个字母）、::first-line（第一行）、::selection
区别：伪类的操作对象时文档树中已有的元素，而伪元素则创建一个文档树以外的元素。因此他们之间的区别在于：有没有创建一个文档树之外的元素。
CSS3 规范中要求使用双冒号 (::) 表示伪元素，单冒号 (:) 表示伪类

一个块级元素如果没有设置高度，其高度是由子元素撑开的。如果对子元素设置了浮动，那么子元素就会脱离文档流，也就是说父元素没有内容可以撑开其高度，这样父级元素的高度就会被忽略，这就是所谓的高度塌陷。
隐藏法，给父元素添加声明overflow:hidden;
在浮动元素下方添加空 div, 并给该元素添加声明：clear:both;height:0;overflow:hidden;
万能清除浮动法，给浮动元素的父元素清除浮动；
:after{content:”.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

关注