-
CSS知识补充（2022）
1、文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE html>- 1
这句代码的意思是：当前页面采取的是HTML5版本来显示网页
注意：
声明位于文档中的最前面的位置，处于标签之前。不是一个HTML 标签，它就是文档类型声明标签。
2、lang 语言种类
- en定义语言为英语
- zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）还是有作用的。3、字符集
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。<meta charset="UTF-8" />- 1
charset 常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的 “UTF-8”，不要写成"utf8"或"UTF8"。
4、快速生成HTML结构语法
- 快速生成骨架标签，在html文件输入一个!号，然后tab键就可以了。
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的， 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
CSS 基本采取简写形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;5、元素的显示模式
定义：元素的显示模式就是元素（标签）以什么方式进行显示，比如自己独占一行，比如一行可以放多个。
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素的显示模式的分类
块元素
常见的块元素有
~、、、其中标签是最典型的块元素。块元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度，外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。注意：
- 文字类的元素内不能使用块级元素（文字类元素就是指
和~标签） 标签主要用于存放文字，因此里面不能放块级元素，特别是不能放- 同理，
~等都是文字类块级标签，里面也不能放其他块级元素行内元素
常见的行内元素有
,,,,,,,等，其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素。行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置时无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他的行内元素。注意：
行内块元素
在行内元素中有几个特殊的标签——
、,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。 行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高，外边距以及内边距都可以控制（块元素特点）。5、圆角边框
6、清楚浮动
清除浮动方法
- 额外标签法也称为隔墙法，是W3C推荐的做法。
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
清除浮动 —— 额外标签法
额外标签法也称隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如,或者其他标签（如- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素。
总结：
1、清除浮动本质是？
清除浮动的本质是清除浮动元素脱离标准流造成的影响。
2、清除浮动的策略是？
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
3、额外标签法？
隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。
实际工作可能会遇到，但是不常用清除浮动 —— 父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden，auto或scroll。
子不教，父之过，注意是给父元素添加代码- 优点：代码简洁
- 缺点：无法显示溢出的部分
清除浮动 —— :after 伪元素法
:after方式是额外标签法的升级版。也是给父元素添加.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{/*IE6、7专有*/ *zoom:1; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站：百度，淘宝网，网易等
清除浮动 —— 双伪元素清除浮动
也是给父元素添加
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear：both; } .clearfix{ *zoom:1; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米，腾讯等
7、CSS属性书写顺序
- 相关阅读:
创建开机自启的脚本
OLED透明屏控制：引领未来交互技术的创新突破
LINUX基础 第五次课 10月22日
在微信公众号怎么添加电子优惠券
重新认知发明，全网保姆级入门说明
说完 Java 的 Abstract 后再来说说接口 （interface ）
Linux系统编程_进程间通信第2天： 共享内存（全双工）、信号（类似半双工）、信号量
go基础详解2-go run & test
上半年住户存款增加10.33万亿元，平均每天约571亿存款涌向银行
毕业设计之基于node.js+Vue的企业员工信息管理系统 Elementui
- 原文地址：https://blog.csdn.net/literarygirl/article/details/126077122
- 最新文章
-
沪漂五周年了：我越来越迷茫了
Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
MySQL-Seconds_behind_master的精度误差
[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
Agent OS ：五种驯服不确定性的范式
PortSwigger SQL注入LAB11
数据库即时编译JIT
[Begin]AI Learn Data Day 0
深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU
- 同理，