HTML

1.网页组成

网页是由HTML（文字，图片，输入框，按钮，视频，音频。。。）组成的

2.网页规范（W3C）

结构标准：制作网页必须按照HTML的标准结构去写网页（用于对网页元素进行整理和分类）
表现标准：用来美化网页css
行为标准：用来实现网页中的用户的一些动作处理 Javascript

3.主流浏览器（有自己的内核）

IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

内核（渲染引擎）

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的。

注意点：

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（*）

4.为什么要遵循WEB标准

因为不同浏览器渲染引擎不同，解析的效果会存在差异（渲染或者排版的模块就有些许差异）

导致用户在不同的浏览器看到同一个页面时不同的效果

三个构成：

结构（HTML），页面元素和内容
表现（CSS），网页元素的外观和位置等页面样式（如：颜色、大小等）
行为（Javascript），网页模型的定义与页面交互
Web标准要求页面实现：结构、表现、行为三层分离

5.HTML（Hyper Text Markup Language）超文本标记语言

主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

HTML骨架结构由哪些标签组成？
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体（主体）
- title标签：网页的标题

6.DOCTYPE的作用

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，HTML5的文档类型兼容很好(向下兼容的原则)。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

7.常见的标签

1.标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。

文字都有加粗
文字都有变大，并且从h1 → h6文字逐渐减小
独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.段落标签

用来表示文章段落或者一段文本。

代码：<p></p>
语义：段落
特点：
- 段落之间存在间隙
- 独占一行

3.换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。

场景：让文字强制换行显示
代码：<br>
语义：换行
特点：
- 单标签
- 让文字强制换行

4.水平线标签

场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：
- 单标签
- 在页面中显示一条水平线

5.文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果。

设置文字颜色或者设置文字大小:
<font></font>1. 改变文字颜色需要添加color属性
<font color="red">我是红颜色的文字</font>
2.  改变文字大小需要添加size属性
<font color="orange" size="7">我是红颜色的文字</font>设置文字是否加粗:
<strong> </strong> 或者 <b> </b>
设置文字斜体显示:
<em></em> 或者  <i> </i>
设置文字删除线效果:
<del></del>  或者  <s></s>
设置文字下划线效果:
<ins></ins>   或者  <u></u>

6.标签语义化

语义：突出重要性的强调语境.

实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签
- ……
好处：
- 对人：好理解，好记忆
- 对机器：有利于机器解析，对搜索引擎（SEO）有帮助

7.div span标签(*)

div span 是没有语义的是我们网页布局主要的2个盒子

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

8.媒体标签（img标签）

属性名：src，属性值：目标图片的路径，注意点：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）。

属性名：alt，属性值：替换文本，当图片加载失败时，才显示alt的文本，当图片加载成功时，不会显示alt的文本

属性名：title，属性值：提示文本，当鼠标悬停时，才显示的文本，注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

属性名：width和height，属性值：宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形），如果同时设置了width和height两个，若设置不当此时图片可能会变形

图片标签: <img>
属性:  src:设置要显示的图片路径     <img src="1.jpg">.width: 设置标签宽度.height: 设置标签高度.title:  鼠标悬停到图片上的文字提示.alt:   当图片无法正常显示时候的文字提示.

属性注意点：
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

9.路径（*）

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：
- 盘符开头：D:\images\1.jpg
- 完整的网络地址：www.baidu.com/img/1.jpg

相对路径：当前文件：当前的html网页，目标文件：要找到的图片。相对路径：从当前文件开始出发找目标文件的过程

绝对路径:1. 如果路径中包含具体的磁盘目录:   d:/img/1.jpg2. 如果路径中具有具体的网址:    www.baidu.com/img/1.jpg相对路径: 必须在同一个根目录下.1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称

10.超链接（*）

本质: 就是用来实现页面跳转。<a href="目标页面路径"></a>

属性:target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)
如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.

锚链接

本质: 在当前页面中跳转. 网页中的返回顶部效果<a href="#"></a>

"#": 返回当前页面开始位置

8.列表

无序列表(unordered-list)

<ul><li> 列表项    </li><li> 列表项    </li>
</ul>

ul列表必须直接包含的标签是li
在li标签中可以包含其他任何标签
在展示数据的时候没有先后顺序的要求

有序列表： (order-list)

<ol><li> </li>
</ol>

有序列表在展示数据的时候是按照一定的顺序显示的
有序列表在用法上与无序列表一样。

自定义列表(defined-list)

<dl><dt> </dt><dd> 列表项 </dd><dd> 列表项 </dd></dl>

一般在网页的结尾处会使用该列表

CSS

1.HTML的局限性

只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这儿有一个图片，<a> 表示此处有链接。虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐。

2.CSS 层叠样式表 ( Cascading Style Sheets )

CSS 样式表或级联样式表。

也是一种标记语言（css的学习其实就是学一堆的属性）
主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。
简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

HTML 主要做结构,显示元素内容；CSS 美化 HTML ,布局网页。CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。

3.css语法规范

选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

4.css的引入方式有哪些？

CSS有3种引入方式：

行内式：将样式写在元素(标签)的 style属性内。（配合javascript使用）-->当前标签中

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
语法：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
1.style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
2.可以控制当前的标签设置样式
3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
4.使用行内样式表设定 CSS，通常也被称为行内式引入

内嵌式:将样式写在 style元素内。（任意位置，通常写在head标签中）-->当前页面中

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
语法：<style>div {color: red;font-size: 12px;}</style>
1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰，但是并没有实现结构与样式完全分离
4.使用内部样式表设定 CSS，通常也被称为嵌入式引入。

外链式：通过link标签，引入CSS文件内的样式。（多个页面）-->.css文件中

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：<link rel="stylesheet"  href="css文件路径">

5.link和@ import的区别是什么？

1.加载资源的限制

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，如加载模板等；

@import属于CSS范畴，只能加载CSS。

2.加载方式

link引用CSS时，在页面载入时同时加载；（同步加载）

@import需要页面网页完全载入以后加载。（异步加载）

3.兼容性

link是XHTML标签，无兼容问题；

@import是在CSS2.1提出的，IE5以下低版本的浏览器不支持。

4.改变样式

link支持使用Javascript控制DOM和改变样式；（link标签是DOM元素）

@import不支持。（@import是方法）

6.给同一个标签设置了相同的样式，浏览器如何渲染？

样式会层叠，写在最下面的会生效。有单独和连写的属性（复合属性）并存时，单写属性在前，复合属性写在下面

7.CSS选择器

选择元素的一种方式。选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。即选择标签用的。

基本标签

是由单个选择器组成的。

1.标签选择器（div）

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

2.类选择器（ .className）

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。

2.1多类名选择器

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。即一个标签有多个名字.。

<div class="red font">zz</div>

在标签class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

3.id选择器（#id）（id属性值唯一）

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

注意：id 属性只能在每个 HTML 文档中出现一次。

3.1id选择器和类选择器的区别：

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

4.通配符选择器（*）

通配符选择器不需要调用，自动就给所有的元素使用样式。

5.并集选择器

选择器1，选择器2（box,main ：选择class名为box或main的元素）

6.交集选择器

选择器1选择器2 （div.box ：选择div中所有class值为"box"的元素）

7.伪类选择器

1.结构伪类选择器

根据元素在HTML中的结构关系查找元素，减少对HTML中类的依赖，保持代码整洁，常用于查找某父级选择器中的子元素。

E:first-child ：匹配父元素中第一个子元素,并且是E元素

E:last-child ：匹配父元素中最后一个子元素,并且是E元素

E:nth-child(n) ：匹配父元素中第n个子元素,并且是E元素

E:nth-last-child(n) ：匹配父元素中倒数n个子元素,并且是E元素

E:first-of-type ：只在父元素的同类型（E）子范围中的第一个

E:last--of-type ：只在父元素的同类型（E）子范围中的最后一个

E:nth--of-type(n) ：只在父元素的同类型（E）子范围中的第n个

nth-child()和nth-of-type()的区别

E:nth-child:

1.找到父元素下的第n个子元素

2.且这个子元素为E元素（如果第n个如果不是E元素，则找不到）。

E:nth-of-type:

1.找到父元素

2.找到它所有子元素下的所有指定类型（E）子元素的第n个

3.将所有E元素放在同一组，然后在里面找。

n常见公式：

偶：2n，even；奇：2n+1，2n-1，odd；找前5：-n+5；找从5往后：n+5

2.用户行为伪类

焦点选择器:focus

选中元素获取焦点时状态，常用于表单控件。

把光标点到input里，获得焦点；把光标从input里拿出来，失去焦点。

表单控件获取焦点时，默认会显示外部轮廓线。

链接伪类选择器

常用于选中超链接的不同状态

:link ：选中未访问过的状态

:hover ：选中鼠标悬停的状态

:active ：选中鼠标按下的状态

:visited ：选中访问之后的状态

8.伪元素选择器

1.::first-letter ：匹配元素的第一个字母。

2.::first-line ：匹配包含此伪元素的元素的第一行。

3.特别伪元素选择器

一般页面中的非主体内容。（伪元素：行内）

::before：在父元素内容的最前添加一个伪元素

::after：在父元素内容的最后添加一个伪元素

必设置content属性才生效，伪元素默认是行内元素（宽高不生效）content：在元素之前或之后放置生成的内容。可以插入文本、图像、引号，也可以结合计数器，为页面元素插入编号。

元素与伪元素区别：

元素：HTML设置的标签

伪类：当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

为了通过选择器获取那些不存在与DOM树中的信息以及获取不能被常规CSS选择器获取到的信息

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪元素：用于创建一些不在文档树中的元素，并为其添加样式。

由CSS模拟出的标签效果,是文档某个部分的表现（::before , ::after , ::first-letter , ::first-line , ::selecton ）

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。

伪类与伪元素的区别

是否创建了新的元素，（是否创建一个文档树之外的元素）即是否需要添加元素才能达到效果，如果不需要->伪类,需要->伪元素。

伪类：假类，添加类来达到效果

//1.想要给第一项添加样式，！！可以在为第一个添加一个类 class="pink"！！
.pink {color: pink;}
<ul><li class="pink">one</li><li>two</li>
</ul>//2.不用添加类的方法，通过给第一个的:first-child伪类来为其添加样式。这个时候，被修饰的元素依然处于文档树中。
li:first-child {color: pink;}
<ul><li>one</li><li>two</li>
</ul>

伪元素：假元素，添加元素才能达到效果

//1.给第一个字母添加样式，给第一个字母中包裹一个元素，！！并设置该span元素的样式！！
.pink {color: pink;}<ul><li><span class="pink">o</span> ne</li>
</ul>//2.不创建一个元素，通过设置的:first-letter伪元素来为其添加样式。li:first-letter {color: pink;}<ul><li>one</li></ul>

伪类基于普通DOM元素⽽产⽣的不同状态，是DOM元素的某⼀特征。

伪元素能够创建在DOM树中不存在的元素，并且这个元素是能够访问到的。

伪类与伪元素的相同点：

伪类和伪元素都是⽤来表示⽂档树以外的"元素"。伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。

在CSS3规范中，用于区分伪元素和伪类，伪类用单冒号":"，伪元素用双冒号"::"。

伪类和伪元素 - 学习 Web 开发 | MDN
伪类和伪元素的区别 · 王增辉的工作笔记 · 看云

9.属性选择器

通过元素上HTML选择元素，常用于选择input标签。

E[attr] 选择具有attr属性的E元素

E[attr="val"] 选择具有attr属性且属性值为val的E元素( input[type = "text"]，button[disabled="true"])

E[attr^="val"] 选择具有attr属性且属性值以val开头的E元素(li[class^="box"])

E[attr$="val"] 选择具有attr属性且属性值以val结尾的E元素(li[class$="box"])

E[attr*="val"] 选择具有attr属性且属性值中任意位置包含val的E元素(li[class*="box"])

E[attr~="val"]选择具有attr的属性且该元素的值中包含val单词（li[class~="a"]）

即要包含属性值“val”，存在多个属性值时，其中一个属性值为“val”。

[title~=value]{}<img src="tutu.jpg" title="one value" />

常用在多属性值当中，在一列中的好几个值，是用空格隔开的。

E[attr|="val"]选择具有attr的属性且属性值具有val或者以val-开头E元素

CSS选择器（5）——属性选择器

[attr|=val] - 选择指定值开头 - css3属性选择器

10.关系选择器

1.后代选择器：

选择器1 选择器2（div p ：选中div中的所有p元素）

2.子代选择器（只选儿子）

选择器1 > 选择器2（div>p ：选择div中的所有子代p元素）

3.邻接兄弟选择器

选择器1 + 选择器2

选择器中的两个元素有同一个父元素，而且第二个元素必须紧跟第一个元素。

eg.<h1>和<p>之间插入其他的某个元素，例如<h2>，段落不再与选择器匹配。

4.通用兄弟选择器

选择器1 ~ 选择器2

选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

eg.选中了所有的 <h1>之后的<p>元素，虽然中间还有个 <div>，但是其后的<p>还是被选中了。

8.字体相关属性

1.字体大小font-size

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

2.字体粗细font-weight

属性值normal：不加粗的（默认值）；bold：加粗的；100-900（数字后面不跟单位）：400normal；700bold。

让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

3.字体样式font-style

normal：显示标准的字体样式（默认值）；italic：斜体

4.字体font-family

实际工作中按照团队约定来写字体

font-family：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列

5.字体综合写法 font

body {   font: font-style  font-weight  font-size/line-height  font-family;
}

必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开，不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6.字体颜色color

开发中最常用的是十六进制

7.文本对齐text-align

用于设置元素内文本内容的水平对齐方式。

div {
text-align: center;
}left：左对齐（默认）
right：右对齐
center：居中对齐

text-align : center 能让哪些元素水平居中？

文本
span标签、a标签
input标签、img标签

如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素设置

8.修饰文本text-decoration

 div { text-decoration：underline；}none：没有装饰线（默认）
underline：下划线（a链接自带下划线）
overline：上划线
line-through：删除线

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

9.文本缩进

div { text-indent：20px；
}
div {text-indent：2em；
}
/*em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。*/

10.行高line-height

用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

行高的文本分为上间距文本高度下间距 = 行间距

让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题

font : style weight size/line-height family ;

11.标签水平居中方法总结 margin : 0 auto

如果需要让div、p、h（大盒子）水平居中？

可以通过margin : 0 auto ; 实现

注意点：

1. 如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

9.居中

 <div class="box"><div class="main">box </div></div>

1.垂直水平居中

已知宽高

/* 1.绝对定位+上下左右+margin : margin: auto;（垂直水平居中）*/.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;/* 文字居中，目前不管里面文字，只要pink居中即可 */text-align: center;line-height: 200px;}/* 2.元素设置宽高；margin为元素:-(宽高一半); */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;top: 50%;left: 50%;
/* 缺点：子盒子宽度变化后，需要重新改代码，高度同理 *//* 元素往上移到自身高度的一半。 */margin-top: -100px;margin-left: -100px;/* 文字居中 */text-align: center;line-height: 200px;}/* 3. position absolute + calc */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {width: 200px;height: 200px;background-color: pink;position: absolute;/* calc函数计算子级应当距离父级顶部的距离 */top: calc(50% - 100px);left: calc(50% - 100px);/* 文字居中 */text-align: center;line-height: 200px;}

CSS calc() 函数 | 菜鸟教程

未知宽高

/* 1.子绝父相 */
.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}
/*优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码，高度同理 */img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 2.Flex居中 */.box {display: flex;/* 子元素水平居中 */justify-content: center;/* 子元素垂直居中 */align-items: center;}/* 3.grid布局 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: grid;justify-items: center;align-items: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;text-align: center;vertical-align: middle;}.main {display: inline-block;}/* 5.margin+tranform */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;margin: 50% 50%;transform: translate(-50%, -50%);}/* 6.margin+flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;}.main {margin: auto;}

2.水平居中

 /* 1.margin + text-align*/.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);}.main {width: 200px;height: 200px;background-color: pink;/* margin: 0 auto; */margin: auto;/* 2.文字水平居中 */text-align: center;}/* 2.子绝父相 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;left: 50%;transform: translateX(-50%)}/* 3.flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;justify-content: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;text-align: center;}/* 5.fit-content */.main {width: fit-content;margin: 0 auto;background-color: pink;}

3.垂直居中

/* 1.行高line-height */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);line-height: 400px;}/* 2.子绝父相 */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);position: relative;}.main {position: absolute;top: 50%;transform: translateY(-50%);background-color: pink;}/* 3.flex */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: flex;align-items: center;}/* 4.table-cell */.box {width: 400px;height: 400px;background-color: rgb(85, 92, 223);display: table-cell;vertical-align: middle;}

1，书写出你所知道的html标签至少15个(h1到h6只能算1个)2，列出图片标签的至少3个标签属性，并说明其作用3，如何使用a标签在新窗口中打开页面，写出关键代码(把两种方式写出来)4，分别写出当前路径、下一级路径、上一级路径所对应的符号5，至少写出3个特殊字符，例如: ÷ 表示 ÷号6，p标签身上拥有red和fz40两个，请写出p同时拥有这两个类的正确格式7，写出css的基础选择器(4种)8，至少写出6个和字体相关的css属性9，请由高到低写出 id选择器，行内样式，类选择器，!Important，通配符选择器，标签选择器， 这些选择器的权重排序10，写出Css实体化三个属性11，写出标签的3种显示模式及其特点12，写出ul去除默认样式小圆点的代码13，分别写出以下四个属性是什么意思，并写出他们的复合属性background-color:red;
background-image:url(images/logo.png);
background-repeat:no-repeat;
background-position:center center;14，一个盒子宽度和高度都是300px, 边框是border:1px solid #000; 内边距是padding:10px 20px 30px，请写出盒子的真正占位是 多少*多少 ，写出计算过程和结果。水平方向 300+2+20*2 = 342px竖直方向 300+2+10+30 = 342px


1，已知给盒子添加内边距会撑大盒子的占位，请写出内边距撑大盒子占位的两种解决方法2，简单描述下外边距合并和外边距塌陷，并说明如何解决3，阅读以下代码，写出a标签字体颜色是什么颜色，为什么？<style>
div{color:red;
}
</style><div><a href="#">这是a标签</a>
</div>4，请写出只修改边框颜色的属性5，请阅读以下代码，说明文字能够居中？为什么？<style>
span{text-align:center;
}
</style>
<span>这是span</span>6，请阅读以下代码，请写出立刻让图片居中于div的代码<div><img src="01.jpg" />
</div>7，请写出浮动的常规用法，以及同级盒子怎么用浮动？8，请写出浮动对父盒子造成的影响9，请圆角属性正圆和胶囊型的写法10，写出标签的3种显示模式及其特点11，写出ul去除默认样式小圆点的代码12，请圆角属性左上角20px的圆角，左下角40px的圆角，右上角50px的圆角，右下角60px的圆角的代码13，请写出背景颜色黑色半透明的css属性；14，分别写出固定定位、绝对定位、相对定位的特点，及设置方向词属性时候的参考位置。15，一个固定定位的盒子，宽度300px高度200px，请写出让它居中于窗口宽度的写法。16，请写出扩大点选区域的标签及其用法17，请写出禁止文本域标签可拖拽改变大小的的css代码18，请写出禁止表单元素聚焦后出现黑色外边线的css代码19，请写出单选按钮默认选中时候的标签属性和值20，请写出下拉选框默认选中时候的标签属性和值21，请写出两种伪元素的书写格式及其必要属性22，请至少写出清除浮动的四种方法

7.CSS特性

1.继承性（inherited）

可继承属性(文字控制属性都可，与尺寸相关的样式通常不能继承)

color，font-size , font-weight, font-family, text-indent ,text-align ,line-height等

应用场景：

ul设list-style:none;

body设font-size,统一不同浏览器默认文字大小。

继承失败：浏览器默认样式覆盖

a的color，h的font-size

2.层叠性：

同一标签不同样式，叠加，共同作用在标签上；

同一标签相同样式，覆盖，写在最后的样式生效。

注：样式冲突时，只有当选择器优先级相同时，菜鸟通过层叠性判断。

3.优先级

就近原则（离代码越近，优先级越高）。
选择范围越小，优先级越高。

!important>内联（行内）样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器>通配符选择器>继承>浏览器默认属性

注意：！importont井非选择器，而是针对选择器内的单一样式设置的。当然，不同选择器内应用！important的权重也是不一样的，例如，在id选择器内的！important关键字权重要高于类选择器内的！important关键字权重，即下面所说的选择器权重组合。

权重叠加计算（每一级之间不存在进位）

（0，0，0，0）（行内，id，类，标签）（口诀：行内的类标签）

权重计算步骤

1.继承：是否能直接选中标签，不能直接选中，则是继承，优先级最小

2.权重公式，判断谁权重最高。

8.css盒模型

margin、padding、border、content

content：盒子的内容，显示文本图像

border：边框，围绕在内边框和内容外的边框；边框线

border会撑大盒子，此时：盒子宽度=左边框+内容宽度+右边框

padding：内边距，清除内容周围区域，透明；内容和盒子边缘之间

padding会撑开盒子，此时：盒子宽度=左边框+左padding+内容宽度+右padding+右边框

传统盒子模型宽度计算：

盒子宽度=width+border+padding

不会撑开盒子的情况（块级元素）：

如果子盒子无设置宽度，子盒子宽度=父盒子的宽度，此时设置padding，border，不会撑大子盒子

解决方法：

1.手动内减

缺点:计算量大

2.自动内减

设置属性box-sizing:border-box;

优点:浏览器会自动计算多余大小，自动在内容中减去

box-sizing：

属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

语法为box-sizing：content-box/border-box/inherit

content-box：标准盒子模型： width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。设置 border、padding 会增加元素 width与 height 的尺寸。（width/height改变）边框和内边距都会被增加到最后绘制出来的元素宽度（width）中。

width=内容宽度

border-box： width 和 height 属性包括内容，内边距和边框，但不包括外边距。（内容宽度改变），元素内边距和边框都将在已设定的宽度内。

width = border + padding + 内容宽度

inherit：继承父元素的box-sizing

CSS 盒子模型 | 菜鸟教程

box-sizing - CSS（层叠样式表） | MDN

margin：外边距，清除边框外区域，透明；两个盒子之间

-left(水平方向)：当前盒子右移；-right（水平方向）:右边盒子右移

-top(垂直方向)：当前盒子下移；-bottom（垂直方向）：下面盒子下移

清除默认内外边距

*{margin:0;padding:0;
}

外边距折叠现象（合并）

水平布局盒子，左右margin正常，盒子间距离为左右margin之和

垂直布局的块级元素：上下margin会合并，盒子间距离为margin的最大值。

解决方法：

只给其中一个盒子设置margin

外边距折叠现象（塌陷）

嵌套的块级元素，子元素margin-top会作用在父元素上，导致父元素一起往下移动。

解决方法：

1.父设置border-top/padding -> 分隔父子的margin-top

2.父设置overflow:hidden;

3.转换成行内块元素display:inline-block;

4.设置浮动

行内元素的margin，padding无效

1.水平方向布局有效

2.垂直方向无效，可用line-height

9.元素显示模式

1.块级元素（可独块）block

独占一行；宽度：父元素宽度（默认）；高度：由内容撑开（默认）；可设置宽高

hx（x=1~6），div , p , ul li , dl dt dd , form , header , nav , footer

2.行内元素（不可多行）inline

一行显多个，不换行；宽度由内容撑开；不可设宽高；（水平方向）padding和margin可以设置

a ， span ，b ， u ， i ， s ， strong ， ins ， em ，del

3.行内块元素（可多行内块）inline-block

一行多个（中间存在间隙）；可设宽高

input ， textarea ， button ，select

10.display的属性值及其作用

none:是指元素不会显示，已脱离文档流。

block:默认宽度为父元素宽度，可设置宽高，换行显示。

table:元素作为块级表格显示。换行显示。

inline:默认宽度为内容宽度，不可设置宽高，不换行。

inline-table:元素作为行内表格显示。不换行。

inline- block:是指默认宽度为内容宽度，可以设置宽高，不换行。

list-item:像块类型元素一样显示，并添加样式列表标记。

table-cell:元素作为表格单元格显示。

inherit:从父元素继承 display属性的值。

12.传统网页布局的三种方式

1.标准流

2.浮动

3.定位

13.标准流

浏览器在渲染显示网页内容时，默认采用的一套排版规则，规定了应该以何种方式排列元素

常见规则：

1. 块级元素：从上到下，垂直布局，独占一行（纵向排列）。

2. 行内/行内块元素：按照顺序，从左到右排列，水平布局，空间不够自动折行。

14.浮动

很多布局效果，标准流无法完成，此时就可以利用浮动完成布局。

因为浮动可以改变元素标签默认的排列方式。

1.浮动最典型应用：

1.可以让多个块级元素一行内排列显示（横行排列）。

2.解决行内块问题（标签换行书写，会产生一个空格的距离）

让垂直布局的盒子变成水平布局！！！

2.浮动特点

1.脱离标准流，在标准流中不占位置

脱离标准流的控制，移动到指定位置

2.浮动高于标准流半个级别，可覆盖标准流中的元素

浮动的盒子不再保留原先的位置，其他盒子会占据他原先的位置，而出现两个盒子层叠的效果（浮动盒子悬浮在其他盒子表面）。

3.浮动找浮动，下一个在上一个后面左右浮动

如果多个盒子都设置的浮动，则他们会按照属性值一行内显示并且顶端对齐排列。
浮动元素相互贴靠在一起，没有缝隙，如果父级元素宽度装不下浮动盒子，多出的盒子会另起一行对齐。

4.浮动具有行内块特性

添加浮动后的标签，都具有行内块元素特点。
一行可多个，可设置宽高。

注：浮动不可通过以下方式，让盒子水平居中

text-align:center;margin:0 auto;

3.清除浮动

影响：

如果子元素浮动了，此时子元素不可撑开标准流的块级父元素；因为子元素浮动后脱标，不占位置，需要父级由高度，从而不影响其他网页元素的布局。

父子级做标签，子级浮动，父级无高度，后面的标准流盒子受影响，会往上移，到父级位置。

清除浮动的本质

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

清除浮动方法

1.直接设置父高度

优点：简便
缺点：有些布局不可固定父级高度

2.额外标签法（清除左右两侧浮动的影响）

父内容的最后添加一个块级元素（空标签）；给添加的块级元素设置clear: both；
优点：通俗易懂，书写方便
缺点：添加额外的标签，让页面HTML结构变复杂。

3.单伪元素消除法

用伪元素（行内变成块）代替额外标签，给父级添加元素clearfix
优点：直接给标签加类
缺点：需要注意低版本浏览器

.clearfix:after{content: "";display: block;clear: both;
/* 在网页中看不见伪元素 */
/* IE7、8 */height: 0;visibility: hidden;
}
.clearfix{*zoom: 1; /* IE6、7 */
}

4.双伪元素消除法

给父级添加元素clearfix，解决浮动和外边距塌陷问题（父子级都是块，子级加margin会影响父级位置）。
优缺点同上

/* 让元素按table样式渲染，添加一个表格样式 */
.clearfix:befor,
.clearfix:after{content: "";display: table;
}/* 真正清除浮动的标签 */
.clearfix:after{clear: both;
}
.clearfix:{*zoom: 1; /* IE6、7专有 */
}

5.给父元素设置overflow属性

属性值可以设置为hidden、auto或者scroll
优点：代码简洁，书写方便
缺点：无法显示溢出部分

CSS传统网页布局之标准流、浮动（float）及清除浮动方法 - 灰信网（软件开发博客聚合）

15.块格式化上下文（Block Formatting Context）：BFC

是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC特点：
1.内部的块级元素会在垂直方向上一个接一个的排列；

2.内部的块级元素垂直方向上的距离由margin决定。位于同一BFC下的相邻块级子元素，会上下margin重叠（垂直方向）；位于不同BFC下的相邻元素之间，不会发生margin重叠，而是两者之和；

4.BFC可以包含浮动元素，默认包裹内部子元素（标准流，浮动），计算BFC的高度时，浮动子元素也参与计算；->可以清除浮动；

5.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；（是一个独立的布局（盒子），盒子里面的子元素不会影响外面的元素）

6.BFC的区域不会与浮动（float）的元素区域重叠，不会与浮动盒子产生交集，而是紧贴浮动边缘。

用途：

1.不被浮动元素覆盖

自适应两栏布局：左边固定宽度，右边不设宽（宽度自适应，随浏览器窗口大小的变化而变化）

  <div class="contain"><div class="column">1</div><div class="column">2</div></div>

.column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {overflow: hidden;/*创建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

三栏布局：左右两边固定宽度，中间不设宽（宽度自适应，随浏览器的大小变化而变化）。

 <div class="contain"><div class="column">1</div><div class="column">2</div><div class="column">3</div></div>

 /* 三个一样宽度的盒子 */
.column {width: 31%;height: 100px;background-color: rgb(77, 73, 213);float: left;margin: 0 1%;}.column:last-child {float: none;/*创建bfc*/overflow: hidden;}/* 左右固定，中间自适应 */.column:nth-child(-n+2) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:nth-child(2) {float: right;}.column:last-child {overflow: hidden;/*创建bfc*/height: 100px;background-color: rgb(90, 134, 253);}

防止字体环绕：浮动的盒子会遮盖下面的盒子（下面盒子里的文字是不被遮盖），文字环绕浮动的盒子。（一个盒子浮动，另一个不浮动，导致不浮动盒子在浮动盒子的下方，覆盖一部分内容（除了文字不被覆盖））。

<div class="contain"><div class="column"></div><div class="column">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>

 .contain {width: 200px;}.column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {height: 150px;background-color: rgb(90, 134, 253);}

创建BFC后

 .column:last-child {/*创建bfc*/overflow: hidden;}

2.清除元素内部浮动

父元素设置为BFC，可以清除子元素的浮动（清除设置浮动后给别的元素带来的影响）

左右子元素都浮动时（且子元素都设置了高度）。但是父元素的高度为0，

  .column:nth-child(1) {float: left;width: 100px;height: 100px;background-color: rgb(127, 85, 211);}.column:last-child {float: left;width: 100px;height: 100px;background-color: rgb(90, 134, 253);}

通过给父元素设置为BFC，可以清除子元素的浮动带来的影响

 .contain {/*创建bfc*/overflow: hidden;}

3.解决外边距折叠问题

同一BFC的块级元素之间发生外边距折叠，可以通过创建一个新的BFC我们可以防止外边距折叠。

<div class="contain"><div class="column">1</div><div class="column">2</div>
</div>

 /* 2个div标签都是属于同一个BFC */
.contain {/*创建bfc*/overflow: hidden;background-color: pink;}.column {width: 100px;height: 100px;background-color: rgb(127, 85, 211);margin: 10px 0;}

两个兄弟元素之间的边距应该是来两个元素的边距之和（20px），但它实际上为10px。（外边距折叠）

创建一个新的BFC

<div class="contain"><div class="column">1</div><div class="new"><div class="column">2</div></div></div>

 .new {overflow: hidden;}

理解CSS中BFC_CSS, BFC 教程_W3cplus

CSS中的BFC是什么？怎么用？_webchang的博客-CSDN博客_bfc css

第二阶段

1.定位

可以让元素自由摆动，在网页任意位置，一般用于盒子之间的层叠（定位后元素层级高，可以重叠在层级低的盒子上），也可以让盒子始终固定在屏幕中的某一位置。

浮动布局虽然灵活，但是却无法对元素进行精准定位。

定位用于定义元素以哪种方式进行定位，并不能确定元素的具体位置；还需要通过边偏移属性top,bottom，left或right来精确定位元素的位置。（其偏移量是相对于父元素的）

1.定位方式（left/right/top/bottom，离哪边近用哪个）：

static（静态定位）=标准流：
默认位置，不可用方位属性进行移动（top，right，bottom，left和z-index属性不可用）。

相对的定位位置：元素出现在正常的文档流中。

relative（相对定位）：
元素的位置相对于自己之前的位置移动，在页面中占位置（未脱标）。

相对的定位位置：相对于自己所在文档流中的位置进行定位。

absolute（绝对定位）：
相对于非静态定位的父元素，进行定位移动。在页面中不占位置（已脱标）

相对的定位位置：父级已定位，以父级为参照物进行定位；父级未定位，以浏览器窗口为参照进行定位。

相对于谁移动：祖先元素中无定位，相对于浏览器移动。祖先元素中有定位，相对于最近，有定位的祖先元素进行定位。

子绝父相：

子元素相对于父元素进行自由移动，
优点：父元素时相对定位，则对网页布局影响最小。
如果父已绝了，此时直接绝子；如果更改父，可能会影响之前写好的布局。

fixed（固定定位）：
将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。在页面中不占位置（已脱标）

相对的定位位置：相对于浏览器进行定位移动。

sticky（粘性定位）：
relative与 fixed的结合。(吸顶效果)

以浏览器的可视窗口为参照点移动元素（固定定位）
粘性定位占有原先的位置（相对定位）
必须添加 top 、left、right、bottom 其中一个才有效
sticky元素仅在其父元素内生效，父元素的高度不能低于sticky元素的高度
父元素为overflow:hidden时，由于容器内无法滚动

如果页面滚动未超过目标区域，表现为 relative；如果页面滚动超出目标区域，表现为fixed,固定到适当位置。

2.请说明 position:absolute和float属性的异同。

共同点:

对内联元素设置float和 absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点

float：

仍可占据位置，该元素浮动在另外一个有文字内容的元素上时，文字内容并不会被浮动的元素覆盖，而是环绕在周围。（使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围）

absolute：

会覆盖文档流中的其他元素（遮盖现象）。

2.层级问题

设置元素的堆叠顺序。层级高的元素总是会处于层级低的元素上面。

标准流<浮动<定位；相对=绝对=固定；修改定位元素的层级，需配合定位才生效

z-index:

auto——(默认)堆叠顺序与父元素相等。
number——设置元素的堆叠顺序（数字越大，层级越高）
inherit——从父元素继承 z-index 属性的值

设置z-index: 0;z-index: auto，在同一层级内没有高低之分，文档流中，后出现的会覆盖先出现的。

注：z-index:0会创建层叠上下文，z-index:auto不会创建层叠上下文（在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。）。

层叠上下文：

是HTML中一个三维的概念。表示元素在z轴上的堆叠顺序（元素的层叠上下文、层叠等级共同决定）。

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

创建一个新的层叠上下文（元素具备以下任何一个条件）：

文档根元素（<html>）
position:absolute/relative且z-index不为auto的元素
position:flex/sticky的元素（sticky适配所有移动设备上的浏览器，但老的桌面浏览器不支持）
display：flex|grid容器的子元素且z-index值不为auto
元素的opacity属性值不为1
mix-blend-mode属性值不为normal
以下任意属性值不为none的元素：transform；filter；clip-path；mask
元素的isolation属性值为isolate
will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素

层叠等级：

在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

层叠顺序：

从低到高排列：

background/border边框和背景：当前层叠上下文的边框和背景
z-index<0：z-index为负值的“内部元素”
block块级水平盒子：普通文档流下的块盒子（block-levelbox）
float浮动盒子：非定位的浮动元素
inline/inline-block水平盒子：普通文档流下的行内盒子
z-index:0/z-index:auto：z-index:auto不会创建层叠上下文
z-index>0：x-index为正值的“内部元素”

判断层叠顺序：

1、首先先看要比较的两个元素是否处于同一个层叠上下文中：

1.1如果是，谁的层叠等级大，谁在上面

1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。

2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index_IT新时代的博客-CSDN博客_层叠上下文

css中z?index:(0和z?index:,auto的区别)_久久派

3.基线（base line）

基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿；行内含有图片和文字，在浏览器渲染出来后，文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。

垂直对齐：vertical-align（解决行内/行内块垂直对齐问题）

可以解决：

文本框，表单按钮无法对齐问题；input，img无法对齐问题；div中的文本框，无法贴顶问题；div不设高度，由img撑开，此时img下会存在额外间隙问题；使用line-height让img垂直居中问题。

不推荐使用行内块让div一行显示，因为可能会出现垂直对齐问题，推荐优先用浮动完成。

4.border-radius

画正圆：盒子必须是正方形；设置边框圆角为盒子宽度的一半

border-radius:50%

画胶囊按钮：盒子要求是长方形，设置边框圆角为盒子高度的一半

border-radius：2/height

5.文本溢出处理

1.溢出属性

overflow盒子内部部分所超过盒子范围的区域，控制内容溢出部分的显示效果。

visible；（默认）溢出部分可见。
hidden；溢出部分隐藏。
scroll；溢出部分滚动条显示。
auto；溢出部分浏览器自动处理（超出显示，不超出不显示）

2.空白属性

white-space：用来社遏制如何处理元素内部的空白

normal：默认值，空白会被浏览器忽略
nowwrap：文本不会换行，文本会在同一行上继续，直到遇到标签为止
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白序列，但是保留换行符
inherit：规定应该从父元素继承white-space属性值；（ie浏览器不支持此属性）

3.省略号属性

text-overflow：文本溢出时是否显示省略标记

clip：不显示省略号（...），剪切超出部分；
ellipsis：显示省略符号代替超出部分；

单行文本溢出

.one{/* 规定宽度范围 */width: 100px;/* 溢出部分隐藏 */overflow: hidden;/* 显示省略符号 */text-overflow: ellipsis;/* 文字不换行 */white-space: nowrap;//
}

多行文本溢出

.more{/* 规定宽度范围 */width: 100px;/* 溢出部分隐藏 */overflow: hidden;/* 显示省略符号 */text-overflow: ellipsis;/* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/*  控制文本的行数，需要显示几行就写几行 */-webkit-line-clamp:4;/* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient:vertical;
}

6.元素本身隐藏

让某些元素本身在屏幕中不可见。

常用属性：

visibility:hidden; 占位置，隐藏元素本身（文档流中仍保留原来的空间）。

display:none; 不占位置，隐藏元素本身（文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流）

display完成元素的显示隐藏切换：

display:none;(隐藏)

display:block;(显示)

rgba()和 opacity都能实现透明效果，但它们最大的不同是 opacity作用于元素，并且可以设置元素内所有内容的透明度；而 rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果）。

DOM元素不显示在浏览器可视范围内？

最基本的方式如下。

设置 display属性为none，或者设置 visibility属性为 hidden技巧性的方式如下。

设置宽高为0，透明度为0，设置z- index位置为-1000。

59、说说 display:none和 visibility:hidden的区别。

display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来都不存在。

visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。

1.把元素放在了屏幕看不到的位置

{
   position:absolute;
   top:-999px;
   left:-999px;
}

2.display:none（元素消失且不占据位置）
3.visibility:hidden（元素消失但是占据位置）
4.opacity:0（元素透明）
5.transform:rotate(90deg)，将二维图像旋转90度呈现出消失的样子。

7 display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

元素整体透明度，让某元素整体（包括内容）一起变透明

opcity:0-1(0:完全透明；1:完全不透明)

边框合并：相邻表格边框合并，细线边框效果，border-collapse:collapse;

7.用CSS画三角形技巧

利用盒子边框完成

步骤：

设置一个盒子；设置四周不同颜色的边框；将盒子宽高设置为0，仅保留边框；得到四个三角形，选其中一个，其余3个三角形（边框）设置颜色：透明。

8.精灵图标签

多张小图合并成一张大图，减少服务器发送次数，减轻服务器的压力，提高页面加载速度

CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的组合进行背景定位， background- position可以用数字精确地定位出背景图片的位置。

注意：在高级浏览器中，可以基于图片的bose64编码存储，将图片与其他类型的文件打包。

9.背景图片大小

background-size:

数字+px：简单方便

百分比：相对于当前盒子自身的宽高百分比

contain：包含背景图片等比例缩放，直到不会超过盒子的最大范围。如果图的宽/高与盒子的尺寸相同，另一个方向缩放，导致盒子可能留白

cover：覆盖背景图片等比例缩放，直到刚好填满整个盒子无空白。如果图的宽/高与盒子的尺寸相同，导致图片显示不全

10.阴影

文字阴影：

text-shadow：

h-shadow：必须写，允许负值（水平偏移量）
v-shadow：必须写，允许负值（垂直偏移量）
blur：可选（模糊度）
color：可选（阴影颜色）

盒子阴影：

box-shadow：

h-shadow：必须写，允许负值（水平偏移量）
v-shadow：必须写，允许负值（垂直偏移量）
blur：可选（模糊度）
color：可选（阴影颜色）
spread：可选（阴影扩大）
inset（阴影改为内阴影）->外阴影不能改（默认值）

11.过渡

让元素样式慢慢变化，常配合hover使用，增强网页交互体验

transition：

all(所有能过渡的都的过渡)/具体属性名(width:只有width才有过渡) 时长(数字+s(秒))

注意：

过渡默认状态与hover状态不同，才可以；transition加在需要过渡的本身元素上；

不同状态效果不同：给默认状态设置，鼠标移入移出都有过渡效果；给hover状态设置，鼠标移入移出有，移出没有效果。

12.SEO（搜索引擎优化）

（让网站在搜索引擎上的排名靠前）为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。

提升方法：

竞价排名；将网页制作成HTML后缀；标签语义化（合适的地方使用合适的标签）

三大标签：

title：网页标题标签；description：网页描述标签；keywords：网页关键词标签。

网页代码优化

合理的title、description、keywords：title值强调重点；description页面内容高度概括，不可过分堆砌关键词；keywords列举出几个页面重要关键词，不可过分堆砌。
语义化书写HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页，一目了然。
超链接设置链接：页内链接，要加上“title”属性加以说明，让访客和“蜘蛛”了解链接的用途。
img应该使用alt属性进行说明：当网络速度很慢，或者图片地址失效，图片无法正常显示时时，alt可以让用户知道当前位置图片的作用。同时应当为图片设置恰当的宽高，提高页面加载速度。或者使用占位图进行懒加载操作。
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取。
重要内容不用js输出：因为蜘蛛不会读取js的内容，所以重要内容必须放在HTML中。
少用iframe框架：搜索引擎不会抓取iframe中的内容
不断精简代码，降低相同代码的重复次数，删除累赘代码。
加粗，强调标签 : 需要强调时使用。

SEO是什么？前端如何进行SEO优化_万物之恋的博客-CSDN博客_前端seo

网站性能优化（如何对网站的文件和资源进行优化）

减少 http请求:

在浏览器与服务器进行通信时，主要是通过HTTP。浏览器需要与服务器进行三次握手，每次握手需要花费大量的时间。而且不同的浏览器对资源文件的并发请求数量存在限制（不同浏览器允许的并发数不同）。一旦http的请求次数到达限制，资源的请求就存在等待状态，会导致网页的很长的时间内无法正常展示。因此减少http的请求数量可以很大程度上对网站性能进行优化。(网页的HTTP请求越多，加载就越慢)

2.CSS sprite （使用精灵图）
将多张图片合并成一张。可以通过CSS的background属性来展现图片不同区域不同的内容。这种方式同时还能减少图片总字节数。
3.合并CSS和JS文件
打包工具：gulp，grunt，webpack等。可以通过这些工具在发布前将多个CSS或者多个JS合并成一个文件，也能减少HTTP请求。(将所有脚本合并到一个脚本中)
4.采用 layzload（懒加载）
可以控制网页上非初始展示的内容部分在一开始无需加载，不发送请求，等到用户真正操作，真正需要的时候立即加载出内容，这样就控制了网页资源一次性请求的数量。

5.使用sessionStorage API和localStorage API将数据存储到浏览器中。

6.减少重定向
尽量避免使⽤重定向，当页⾯发⽣了重定向，就会延迟整个HTML⽂档的传输。在HTML⽂档到达之前，页⾯中不会呈现任何东西，也没有任何组件会被下载，降低了⽤户体验。
如果⼀定要使⽤重定向的话，如http重定向到https，要使⽤301永久重定向，⽽不是302临时重定向，因为如果使⽤302则每⼀次访问http都会重定向到https页⾯，⽽永久重定向在第⼀次从http重定向到https之后，每次访问http，会直接返回https的页⾯。

7.Base64
将图⽚的内容以Base64格式内嵌到HTML中，可以减少http请求数量，但是编码之后的⼤⼩⽐图⽚⼤了。

8.精简和优化css和js

从HTML、JavaScript和CSS中删除不必要的、不需要加载的字符，如空白字符、换行字符、注释和块分隔符。加快加载时间，因为它减少了必须从服务器请求的代码量。

控制资源文件加载优先级：

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link 或者script 标签就会加载href或者src对应链接内容。为了第一时间将页面展现给用户，就需要将CSS提前加载，不要受 JS加载的影响。

尽量将 CSS，JS分离出HTML

使用外链进行加载（结构，表现，行为层的分离），保证网页代码的整洁，也利于维护。

利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器进行重新请求，直接在本地读取调用。

减少重排（Reflow）

原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会导致渲染树中受到影响的部分失效，浏览器会验证DOM树上所有其它节点的 visibility属性，这也是Reflow低效的原因。如果Reflow过于频繁，CPU的使用率就会急剧上升。
减少Reflow的重要操作，就是在通过JS操作DOM样式时，尽量采用增减class类名的方式，而不是直接通过style操作样式。

减少DOM操作
图片图标使用iconfont替换
不使用CSS表达式，会影响效率
使用内容分发网络 (CDN)

内容交付网络是一组分布在不同地理位置的web服务器，它们根据终端用户的位置向其提供web内容。

当您将网站托管在单个服务器上时，所有用户请求都被发送到相同的硬件。由于这个原因，处理每个请求所需的时间增加了。最重要的是，当用户在物理上远离服务器时，加载时间会增加。

使用CDN，用户请求被重定向到最近的服务器。因此，内容可以更快地传递给用户，网站运行速度也会更快。这是一种相当昂贵但非常有效的优化加载时间的方法。

使用CDN网络缓存，加快用户访问速度，减轻服务器压力

启用GZIP压缩，加快浏览速度，搜索引擎的蜘蛛抓取信息量也会增大

前端性能优化的七种方法 - 百度文库

网站前端性能优化终极指南_程序员石磊的博客-CSDN博客

14.

了解重绘和重排，怎么减少重绘和重排
repaint:就是当各种盒子属性(大小，颜色。。。)都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了的过程。
reflow:当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
解决：在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。

1、重绘

重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

2、重排

重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：

- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增减、移动）
- 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改变元素的一些样式（例如调整浏览器窗口大小）

3、两者的区别

- 重绘不会带来重新布局，并不一定伴随着重排。
- 在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：
- [ ] 将多次改变样式属性的操作合并成一次操作
- [ ] 将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素
- [ ] 在内存中多次操作节点，完成后再添加到文档中去
- [ ] 如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示
- [ ] 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量

15.初始化样式

场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式

原因：

浏览器差异不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异，为了防止不同浏览器中标签默认样式不同所带来影响，统一不同浏览器的默认显示效果，需要初始化样式。
提高编码质量，减少重复代码的出现。
浏览器的兼容性问题，可以通过初始化代码来解决。

1.静态布局：

传统Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：无浏览器兼容性问题，布局简单。
缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

3.弹性布局：

在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。

弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
   优点：简单、方便、快速移动端友好
   缺点：CSS3新特性,ie8以下不兼容。

2.流式布局：

流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
   优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
   缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

4.响应式布局：

采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。一套代码适应pc和移动端，设置好几个尺寸分别的样式，根据页面的宽度来改变样式

7.常见的浏览器兼容
1.图片默认有间距，解决：float为img布局
2.不同浏览器的标签默认外补丁margin和内补丁padding不同，
解决：*通配符*{margin：0；padding：0}
3.li空白间距，解决：在li中的a标签添加宽度或高度
4.快标签属性float后，又有横行的margin情况下，在ie6显示margin比设置的大，后面一块会被顶到下一行，解决：在float标签样式中添加display：inline，将其转化为行内属性

CSS基本知识总结（HTML+CSS）相关推荐

html css js知识整理,Html+Css+Js实用知识汇总(持续更新中...)
Html篇基本概念: html:超文本标记语言(Hyper Text Markup Language) html5:下一代的html xhtml:更严谨更纯净的html 表头网站标题 //页面编码 ...
CSS 基本知识梳理-续
CSS 基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网 ...
HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
html css xml,XML HTML CSS理论知识复习
1:XML理论知识 1.1 : 什么是xml? . 首先我们了解它的全称:Extensible Markup Language 直译过来就是它, 可扩展标记语言. . XML 可扩展标记语言的 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
前端学习---css基本知识
css基本知识我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...