CSS盒子模型

css中使用的单位

固定值：像素px

相对值：百分号%——相对于父级。在实际开发中常用来设置宽度的百分值。

相对值：em——相对于HTML页面的默认样式。在实际开发中常用于设置默认字体的大小。

注意：em不能用于宽和高的设置。

css中的三种关系：

1、祖先与后代

2、父与子

3、兄弟，亲兄弟，一个爹！相邻关系。

css选择器

根据HTML标签结构的三层关系：

祖先与后代；

父元素与子元素；

兄弟（相邻）元素；

关系选择器：

祖先与后代选择器：祖先元素 后代元素

父与子选择器：父元素>子元素

相邻选择器：前一个元素 + 后一个元素

优先级：这三种选择器没有优先级，和先后顺序有关系，遵循就近原则。

伪类选择器：

主要应用于链接< a>标签;

所谓的伪类，设置的样式并不是页面一运行就马上有效果的，而是为将来某一个时刻使用时设置的样式。不是马上及时就见效的样式，而是未来某个时候会使用的样式。

常见的有四类：

link未被访问，只能作用于a标签

visited已被访问，只能作用于a标签

hover鼠标悬停

不仅可以作用于a标签，也能作用与其它标签。

active已被激活

不仅可以作用于a标签，也能作用与其它标签。

` 为a标签设置以上四种伪类时，必须先设置L&V，然后是H&A。

f ocus

盒子模型

概念：盒子模型（框模型）

作用：简化HTML页面布局

HTML页面布局：

利用表格行和列的概念

利用盒子模型概念

具有的概念：

内容区（content）——定义显示在页面中的元素

内边距（padding）——显示元素到盒子边框的距离

边框（border）——盒子边框的厚度

外边距（margin）——盒子与盒子之间的内容

元素的宽度和高度：

宽度width

高度height

元素在浏览器中显示的实际大小

实际宽度=width+padding+border

实际宽度=height+padding+border

外边距：设置上和左外边距

作用——改变当前标签所显示的父级元素的位置；

实际——父子关系：

X轴——父元素左内边距+子元素的左外边距；

Y轴——父元素上内边距+子元素的上外边距。

浏览器默认样式，不同浏览器会提供body标签的不同值的外边距。解决方案：手动重置body标签的外边距。

外边距的重叠效果：

注意：重叠效果只存在于垂直方向，水平方向不存在重叠问题。

问题：总是取两者之间的最大值！

解决办法：只设置上一个元素的外边距即可。



所谓的不会影响布局意思是：



如图所示：当给四个span元素中的s2设置padding-top、padding-bottom时，s2的长度的确会发生变化，可是并不会影响下方的s4的放置位置！所以设置垂直内外边距是没有效果的，垂直边框，我们是看得见，但是垂直边框并不占据文档流 。

注意：

行内元素和块级元素的样式设置区别：

对于行内元素来说，无论如何设置它竖直方向的padding和border的值，行内元素在body中的位置也不会发生变化，而设置的竖直内边距和竖直边框值会在以行内元素位置为基础上向两边发散！所以，当将一个行内元素写在浏览器的最开始时，设置竖直上边框则有可能会被隐藏，原因就是为了保护span元素所在body中的位置。

但是对于块级元素就不会，块级元素会以所在位置为中心向右下扩展。

所以，当在一个元素内写文字时，该元素是块级元素name可以通过竖直内边距和边框调整文字的垂直位置。元素要是内联元素时，就无法通过竖直方向内边距和竖直方向边框进行调整，可以通过line-height设置。