学习笔记（1）：Html + Div 基础知识

4.css样式

5.css优先级

6.css盒模型组成

1）文档类型

当我们新建一下html格式文档时，会发现代码最上部有如下这句话：

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，删除它后可能引起某些样式表失效或其它意想不到的问题，建议保留。

2）语言编码

它标示文档的语言编码。 还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

3）html标签

成对的标签：

{...} {...}

{...}

{…} //行内元素

{...}

…

单一的标签：

…

4）css样式

加载css样式有以下四种

• 外部样式

• 内部样式

• 行内样式

• 导入样式

这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

<p style="font-size:18px;">行内样式 </p>

这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

@import url(“/css/global.css”);

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。

5）css优先级

• id优先级高于class

• 后面的样式覆盖前面的

• 指定的高于继承

• 行内样式高于内部或外部样式

总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

6）css盒模型组成

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

所以整个盒模型在页面中所占的

宽度 = 由左边界+左边框+左填充+内容+右填充+右边框+右边界

组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度。

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

7、ID和CLASS选择器

id只能在页面中对应一个元素；class为类，可以对应多个元素。

id的优先级高于class。

8.二列和三列布局 小结

二列自适应宽度 // 定宽 float margin-left

二列固定宽度

二列固定宽度居中

xhtml的块级元素(div)和内联元素(span)

float属性

三列自适应宽度

三列固定宽度

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-hUvDz7yX-1718571878912)]