前端里面内联样式和行内养样式区别是什么？

点击联系发帖人 时间：2022-07-01 05:18

标签样式和id样式的区别

将代码粘贴到控制台运行
运行代码后页面样式错乱, 莫担心这是因为元素的行内样式被设置为空了
复制控制台输出的样式字符串, 在html的head标签中新增style标签并粘贴其中

}

盒模型分为W3C的标准模型和IE模型
盒模型又称为框模型，包含了元素内容（content）、内边距（padding）、外边距（margin）、边框（border）

这两种模型的区别就是计算的宽度和高度不同

相对比较而言：border-box更好用！！！

扩展：JS如何设置获取盒模型对应的宽和高呢？

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器的部分标签默认值都是不同的，如果没有对CSS样式初始化会出现各个浏览器之间的页面显示差异。

对CSS样式初始化后会对SEO有一定的影响，所以力求影响最小的情况下进行初始化。

最简单也不建议初始化的方式：

flex怎么用，常用属性有哪些

display:none;：隐藏对应的元素，在文档布局中不再分配空间

visibility:hideen;：隐藏对应的元素，在文档布局中仍保留原来的空间

使用display:none;属性后，HTML元素（对象）的宽度、高度等各种属性值都将丢失；而使用visibility:hideen;属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

BFC是什么，举例回答

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

以下方式会创建块格式化上下文：

浮动元素（元素的float不是none）
表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗来讲，可以把BFC理解为一个封闭的箱子，箱子内部的元素无论如何改变，都不会影响到外部。

写在后面的覆盖前面的；
!important，最高，但是要少用！！！

用纯CSS创建一个三角形

}

CSS的主要使用场景就是美化网页，布局页面。

说起HTML，这其实是个非常单纯的家伙，它只关注内容的语义。比如<h1>表面这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。

2，CSS：网页的美容师

CSS也是一种标记语言，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

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

使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

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

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

/* 第一种：紧凑格式 */
/* 第二种：展开格式，强烈推荐第二种格式，因为更直观 */

/* 强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外 */

/* 1, 属性值前面，冒号后面，保留一个空格 */
/* 2, 选择器（标签）和大括号中间保留空格 */

Chrome调试工具：Chrome浏览器提供了一个非常好用的调试工具，可以用来调试HTML结构和CSS样式。

Ctrl+滚轮：放大开发者工具代码大小；
左边是HTML元素结构，右边是CSS样式；
右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色；
Ctrl+0：复原浏览器大小；
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误；
如果有样式，但是样式前面有黄色叹号提示，则是样式属性属写错误。

`第2章：CSS基础选择器`

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

以上CSS做了两件事：

找到所有的h1标签，选择器（选对人）；
设置这些标签的样式，比如颜色为红色（做对事）。

选择器分为基础选择器和符合选择器两个大类：

基础选择器是由单个选择器组成；
基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器。

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

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签；

优点：能快速为页面中同类型的标签统一设置样式；

缺点：不能设计差异化样式，只能选择全部的当前标签。

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

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）；
可以理解为给这个标签起了一个名字，来表示；
长名称或词组可以使用中横线来为选择器命名；
不要使用纯数字、中文等命名，尽量使用英文字母来表示；
命名要有意义，尽量使别人一眼就知道这个类名的目的；
记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

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

可以把一些标签元素相同的样式（共同的部分）放到一个类里面；
这些标签都可以调用这个公共的类，然后再调用自己独有的类；
从而节省CSS代码，统一修改也非常方便。

各个类名中间用空格隔开；
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字；
这个标签就可以分别具有这些类名的样式；
从而节省CSS代码，统一修改也非常方便；
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

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

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

id属性只能在每个HTML文档中出现一次；
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

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

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

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

通配符选择器不需要调用，自动就给所有的元素使用样式；
特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）。

每个基础选择器都有使用场景，都需要掌握；
如果是修改样式，类选择器是使用最多的。

`第3章，CSS字体属性`

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

各种字体之间必须使用英文状态下的逗号隔开；
一般情况下，如果有空格隔开的多个单词组成的字体加引号；
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；

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

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

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

/* 让倾斜的字体不倾斜 */

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

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

`第4章，CSS文本属性`

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等等。

color属性用于定义文本的颜色。

注意：开发中最常用的是十六进制。

text-align属性用于设置元素内文本内容的水平对齐方式。

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

/* 取消a默认的下划线 */

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

`第5章，CSS引入方式`

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中；
通过此种方式，可以方便控制当前整个页面中的元素样式设置；
代码结构清晰，但是并没有实现结构与样式完全分离；
使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

style其实就是标签的属性；
在双引号中间，写法要符合CSS规范；
可以控制当前的标签设置样式；
由于书写繁琐，并且没有体现出机构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中；

注意：使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。

`第6章，CSS快速写法：Emmet语法`

Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，VSCode内部已经集成该语法。

`1，快速生成HTML结构语法`

2，如果想要生成多个相同的标签，加上“*”就可以，比如：div*3，就可以快速生成3个div；

3，如果有父子级关系的标签，可以用“>”，比如：ul>li，就可以了；

4，如果有兄弟关系的标签，用“+”就可以，比如：div+p；

5，如果生成带有类名或者id名字，直接写 .demo 或者 #demo，再按tab就可以了；

6，如果生成的div类名是有顺序的，可以用自增符号$；

7，如果想要在生成的标签内部写内容就可以用“{}”表示

`2，快速生成CSS样式语法`

CSS基本采取简写形式即可：

也可以设置，当保存页面的时候自动格式化代码：

在settings.json下的【用户】中添加以下语句：

只需要设置一次即可，以后都可以自动保存格式化代码。

`第7章：CSS复合选择器`

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

1，复合选择器可以更准确、更高效的选择目标元素（标签）；

2，复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；

3，常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

`1，后代选择器（重要）`

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

上述语法表示选择元素1里面的所有元素2（后代元素）。

元素1和元素2中间用空格隔开；
元素1是父级，元素2是子级，最终选择的是元素2；
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

元素1和元素2中间用大于号隔开；
元素1是父级，元素2是子级，最终选择的是元素2；
元素2必须是亲儿子，其孙子、重孙之类都不归它管，你也可以叫它亲儿子选择器。

`3，并集选择器（重要）`

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号“,”连接而成，任何形式的选择器都可以作为并集选择器的一部分。

上述语法表示选择元素1和元素2。

元素1和元素2中间用逗号隔开；
逗号可以理解为和的意思；
并集选择器通常用于集体声明。

约定的语法规范，我们并集选择器喜欢竖着写；
一定要注意，最后一个选择器不需要加逗号。

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素；

伪类选择器书写最大的特点是用冒号（:）表示，比如：:hover、:first-child；

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

`4.1 链接伪类选择器`

a:link：选择所有未被访问的链接；
a:visited：选择所有已被访问的链接；
a:hover：选择鼠标指针位于其上的链接；
a:active：选择活动链接（鼠标按下未弹起的链接）

链接伪类选择器注意事项：

因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式。

链接伪类选择器实际开发中的写法：

:focus伪类选择器用于选取获得焦点的表单元素；

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

`第8章，CSS的元素显示模式`

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页；

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>；

HTML元素一般分为块元素和行内元素两种类型。

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

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

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

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

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

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

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如：想要增加链接<a>的触发范围。

案例：简洁版小米侧边栏

案例的核心思路分为两步：

把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度；
鼠标经过a给链接设置背景颜色。

重要技巧：单行文字垂直居中的代码

CSS没有给我们提供文字垂直居中的代码，这里可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

单行文字垂直居中的原理：

简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上；如果行高大于盒子高度，则文字偏下。

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

一般情况下，元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明。

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

注意：页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精准单位。

`4.1 参数是方位名词`

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left效果一致；

如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐。

`4.2 参数是精确单位`

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

`4.3 参数是混合单位`

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

`5，背景图像固定（背景附着）`

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

这是实际开发中，我们更提倡的写法。

CSS为我们提供了背景颜色半透明的效果。

最后一个参数是alpha透明度，取值范围在0~1之间；
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；
CSS新增属性，是IE9+版本浏览器才支持的；
但是现在实际开发，我们不太关注兼容性写法了，可以放心使用。

实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置，精灵图也是一种运用场景。

`第10章：CSS三大特性`

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
样式不冲突，不会层叠。

现实中的继承：继承了父亲的姓。

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低CSS样式的复杂性；
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）；
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

行高可以跟单位也可以不跟单位；
如果子元素没有设置行高，则会继承父元素的行高为1.5；
此时子元素的行高是：当前子元素的文字大小*1.5；
body行高1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性；
选择器不同，则根据选择器权重执行。

选择器权重如下表所示：

权重是有4组数字组成，但是不会有进位；
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；
等级判断从左向右，如果某一位数值相同，则判断下一位数值；
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important无穷大。
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

如果是复合选择器，则会有权重叠加，需要计算权重。

`第11章，页面布局三大核心之一：盒子模型`

页面布局要学习三大核心：盒子模型，浮动和定位。

先准备好相关的网页元素，网页元素基本都是盒子Box；
利用CSS设置好盒子样式，然后摆放到相应位置；

网页布局的核心本质：就是利用CSS摆盒子。

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容。

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细），边框样式，边框颜色。

注意：CSS边框属性允许你指定一个元素边框的样式和颜色。

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

collapse单词是合并的意思；

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候，不量边框；
如果测量的时候包含了边框，则需要width/height减去边框宽度。

padding属性用于设置内边距，即边框与内容之间的距离。

padding属性（简写属性）可以有1--4个值。

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距；
padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

注意：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

注意：margin简写方式代表的意义跟padding完全一致。

`3.1 外边距典型应用`

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定宽度（width）；
盒子左右的外边距都设置为auto；

常见的写法，以下三种都可以：

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并；
嵌套块元素垂直外边距的塌陷。

3.2.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

3.2.2 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

可以为父元素定义上边框；
可以为父元素定义上内边距；

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题。

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

注意：行内元素为了照顾兼容性，尽量只设置左右内外边框，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

}

久游无息网