基础知识补充（2022）

cdwhy

已于 2022-11-15 21:08:42 修改

阅读量365

点赞数 1

分类专栏： CSS 文章标签： css javascript 前端

于 2022-07-30 23:03:54 首次发布

本文链接：https://blog.csdn.net/literarygirl/article/details/126077122

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

注意：

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>标签之前。
<!DOCTYPE> 不是一个HTML 标签，它就是文档类型声明标签。

二、lang 语言种类

en定义语言为英语
zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）还是有作用的。

三、字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8" />

charset 常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的 “UTF-8”，不要写成"utf8"或"UTF8"。

四、快速生成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;

vscode编辑器一个快捷键记录 ctrl + 回车可以直接换到下一行

五、元素的显示模式

定义：元素的显示模式就是元素（标签）以什么方式进行显示，比如自己独占一行，比如一行可以放多个。
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素的显示模式的分类

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>其中 <div>标签是最典型的块元素。

块元素的特点：

① 比较霸道，自己独占一行。
② 高度，宽度，外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素（文字类元素就是指<p>和<h1>~<h6>标签）
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置时无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他的行内元素。

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签,行内替换元素——<img/>、<input/>、<button/>,<td>,它们同时具有块元素和行内元素的特点。有些资料（非官方）称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高，外边距以及内边距都可以控制（块元素特点）。

补充：伪元素属于行内级元素

六、圆角边框

在这里插入图片描述

七、清除浮动

清除浮动方法

额外标签法也称为隔墙法，是W3C推荐的做法。
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

清除浮动 —— 额外标签法

额外标签法也称隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>,或者其他标签（如<br>等）。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

总结：

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;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度，淘宝网，网易等

清除浮动 —— 双伪元素清除浮动

也是给父元素添加

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear：both;
}
.clearfix{
	*zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米，腾讯等

八、CSS属性书写顺序

在这里插入图片描述

九、定位介绍

定位 = 定位模式 + 边偏移

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

语法：

 选择器 { 
     position: static; 
 }

静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

相对定位(relative)

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。、

语法：

  选择器 { 
 		position: relative; 
 	}

相对定位的特点：（务必记住）

 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
 
 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

   因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

绝对定位(absolute)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

  选择器 { 
  	position: absolute; 
  }

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点总结：（务必记住）

 1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
 
 2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
 
 3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

固定定位(fixed)

固定定位是元素固定于浏览器可视区的位置。（认死理型）主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

 选择器 {   	
		position: fixed; 
  }

固定定位的特点：（务必记住）：

 1.以浏览器的可视窗口为参照点移动元素。
 
 跟父元素没有任何关系
 不随滚动条滚动。
 2.固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

 完全脱标—— 完全不占位置；
 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
 跟父元素没有任何关系；单独使用的
 不随滚动条滚动。

十、浏览器

浏览器是网页显示，运行的平台。常用的浏览器有 IE，火狐（Firefox），谷歌(Chrome)，Safari和欧鹏（opera）等。平时称为五大浏览器。
在这里插入图片描述

浏览器内核（渲染引擎）

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
- 目前国内一般浏览器都会采用Webkit/Blink内核，如360，UC，QQ，搜狗等。

十一、VSCode工具安装（提高开发效率）

在这里插入图片描述

十二、元素隐藏方法

方法一：display设置为none

元素不显示出来，并且也不占据位置，不占据任何空间（和不存在一样）；

方法二：visibility设置为hidden

设置为hidden，虽然元素不可见，但是会占据元素应该占据的空间；
默认为visible，元素是可见的；

方法三：rgba设置颜色，将a的值设置为0

raba的a设置的是alpha值，可以设置透明度，不影响子元素；

方法四：opacity设置透明度，设置为0

设置整个元素的透明度，会影响所有的子元素；

cdwhy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基础知识补充（2022）

1、清除浮动本质是？清除浮动的本质是清除浮动元素脱离标准流造成的影响。2、清除浮动的策略是？闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。3、额外标签法？隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。实际工作可能会遇到，但是不常用。......
复制链接

扫一扫

专栏目录