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

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属性

三列自适应宽度

三列固定宽度

三列固定宽度居中

IE6的3像素bug

css的display:inline将块级元素改变为内联元素

用display:block将内联元素改变为块元素。

float

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

9、三列自适应宽度

三列自适应宽度，一般常用的结构是左列和右列固定。

[

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；