老程的小白博客空间

本篇笔记的内容复杂到令人发指，巨坑的知识点，不过并不是必要知识点，仅用作了解一些前端底层的知识，想看的同学可以了解一下，不一定要看懂，学着玩就行。

布局在前端页面中很重要，比如页面中的侧边栏，导航栏等在页面中的位置以及相互之间的组合。本篇笔记中没有任何新知识，使用之前学过的只是就可以完成页面布局。

本笔记的内容较为重要，内容不多，但理解起来有些难度。同样在笔记的总结里会对核心概念进行总结和解释。各位同学开这篇笔记可能会多费神一些。另，如果还是不懂可以私信我。我会尽量为大家说明。

本篇笔记主要记录的是**Web字体和图标**，在此之前会先记录两个at-rule的相关知识点。具体解释如下：标题中的**at-rule**是官方原文，不是特别好翻译，所以国内一般音译为：@规则。由此根据音译以及其概念的本身含义衍生出的叫法为：@语句、CSS语句以及CSS指令，一般文章或者教程中这些概念都指同一个概念。

本篇笔记中并不会记录一个真实的案例（太懒了，就想把核心记录下来），仅将一些基本的页面美化的操作记录下来，新知识点较少，依旧会先补充知识点说明后再进行相应的说明。

本篇笔记记录表单元素的美化，书接**HTML（四）**的知识，如果感觉有些只是比较模糊可以先去看看**HTML（四）**的笔记。

背景图的练习这篇笔记不打算放例子在上面，打算简单说明一下页面用到背景图的时候一般都需要什么操作。同样在笔记的最后面也会总结本篇笔记的核心以及一些常见样式的使用。

补充了一些CSS样式

本篇笔记中补充了一些伪元素相关的选择器的使用方式，具体用法请查看笔记并联想浏览网页时遇到的样式。

阅读本篇笔记之前要注意一个问题，轮播图的设置仍然需要CSS3或JavaScript来协助完成图片滚动的效果。现在一直以来做的都是静态页面，动态效果后期会加入其中。本次记录的内容基于前面的笔记为基础，所以在此次后除非出现新的比较重要的属性或者引入了新的技术，否则在实践方面的笔记中将会主要记录逻辑。

一般来说，弹出层可应用于很多地方，一些需要页面跳转或者二级菜单不能满足需求以及页面美化等方面都可以使用弹出层来实现。本篇笔记主要记录一个弹出层及其简单的案例，与二级菜单的笔记一样，文中只做页面展示，不涉及动态页面。

本篇笔记的中描述的是二级菜单的其中一种做法，大多数的二级菜单做法的核心逻辑与本文的核心逻辑基本一致（重复一遍，是基本一致，不是一定一致！）。本文中有不算少的代码，主要为了能直接显示除页面的效果。至于其他的效果……（看过我之前文章的朋友知道，博主较懒，能看就行。）最后，严肃的说一下，本文不能先看结论，结论是总结用的。先看正文！

本篇笔记记录了定位的基础知识点，并不复杂，阅读顺序可以自行决定。

本篇笔记同样因为较为复杂，但是否先看总结差别不大。浮动的主要场景分为两个：一是文字环绕；二是横向排列。在说明这两个场景之前需要预先了解几个概念：之前的笔记说过行盒和块盒的区别，在此不做赘述。1. 首先，设定浮动使用float属性；当元素被设定为浮动时，必定为**块盒**。且浮动元素的包含块同样为父元素的内容盒。2. 在浮动样式中，当宽度、高度以及margin设置为auto时，是以内容为基准。即：需要内容撑起该元素的样式。3. 【注】：在边框内边距及百分比的设置中，与常规流一样。4. 常规

本篇笔记在记录过程中可能比较杂乱，因为在这部分知识点本身较为复杂。严格来说，CSS作为给页面元素添加样式的语言，严格来说只有三个方面是一定要吃透的：属性值的计算过程（其中包括层叠、继承）；盒模型（行盒、块盒以及行块盒）；视觉格式化模型（布局规则）。

本篇笔记中记录了CSS样式中重要的盒模型的基本概念以及相应的盒模型类型，并阐述了相关特点和应用。盒模型分为行盒和块盒以及一个特殊的存在——行块盒。行盒在页面使用时不会换行，且无法设置高度（因为行盒的具体宽高跟随元素内容延伸），具体样式参照行盒模型的特点。块盒在使用的时候回自动换行，且宽高可以设置并占据实际空间。行块盒在使用时融合了行盒和块盒的优点，但依旧存在相关问题（比如空白折叠造成的页面样式问题），具体解决办法后续整理。最后介绍了可替换元素和非可替换元素。具体区别在于可替换元素。可

CSS（四）——属性值的计算过程本节课特别重要，涉及前端CSS样式的底层运行一个元素一个元素以此渲染，顺序按照页面文档的树形目录结构进行元素的渲染过程首先渲染html；渲染head元素；渲染meta元素；渲染title元素；渲染body元素；渲染h3元素；渲染p元素；渲染strong元素；渲染a元素；渲染img元素。遵循先序遍历方式【注】：该图片并非个人原创，是在B站上找到的免费公益课的资源，且未用作盈利目的。渲染每一个元素的前提

CSS（三）——层叠样式表文章目录CSS（三）——层叠样式表前提概念声明冲突：层叠声明冲突的解决办法开发时的应用继承总结前提概念理解层叠样式表的前提：理解声明冲突声明冲突：​ 同一个样式，多次应用到了同一个元素。层叠​ 解决声明冲突的过程（浏览器自动处理）声明冲突的解决办法比较重要性：重要性从高到低a）作者样式表中的**!important样式：在属性后加上!important**，表示是一个最重要的样式不建议使用b）作者样式表中的普通样式c）浏览器中默认样式表中的样式

CSS（二）——选择器详解选择器的作用是：帮助选择相应的元素文章目录CSS（二）——选择器详解简单选择器ID选择器元素选择器类选择器通配符选择器属性选择器：伪类选择器：伪元素选择器：伪元素选择器在前面要加两个冒号 ::选择器的组合：选择器的并列：总结简单选择器ID选择器<!--根据元素中的id来选择，例如：选择id为top的元素--><style> #top{ 想要执行的CSS规则; }</style><span i

CSS及其规则简介文章目录CSS及其规则简介简介选择器id选择器：元素选择器：类选择器声明块CSS代码书写位置外部样式表的优点CSS 常见样式声明总结简介CSS以规则为基础单位，其中包括选择器和声明块，其中：选择器：选中元素（确定样式的范围）。声明块：书写对的样式规则。选择器选择器的基本写法中包括三种：id选择器：<!--根据元素中的id来选择，例如：选择id为top的元素--><style> #top{ 想要执行的CSS规则; }