CSS进阶

一、盒子模型

默认盒子模型计算公式：
元素占地宽度：
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素占地高度：
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

关于盒子使用以及属性的具体说法：(11条消息) CSS盒子的三种类型（border-box、content-box）_你脸上有BUG的博客-优快云博客​​​​​​​

二、CSS浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动的属性值：left、right、none

(11条消息) CSS float浮动布局_css浮动布局_chen__cheng的博客-优快云博客

三、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

该定位主要有5种方式

CSS position定位（5种方式） (biancheng.net)

四、CSS伪类以及伪元素

1、伪类
概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
2、伪元素
概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于设置元素的首字母、首行的样式在元素的内容之前或之后插入内容（参考(11条消息) CSS中的伪类和伪元素（详细）_LyiRo_的博客-优快云博客）