css盒子模型与HTML伪类和元素

---

一、盒子模型

盒子模型如图说所示：

 盒子模型就是一个框一个的盒子，盒子模型有蓝色区域的内容，依次往外为盒子的padding内边距，border为盒子的边框，margin是盒子的外边距，外边距不会显示出来。

1、内容：内容可以是文字、图片、超链接、视屏、声音等内容

2、padding：padding是盒子的内边距，内边距的值，会把我们的元素撑大
    复合型写法
        如果复合型写法的值是四个，那么顺序为：上 ， 右  ，下 ，左 顺时针方向旋转赋值
        如果复合型写法的值是三个，那么顺序为：上，  左右  ，下 方向赋值
        如果复合型写法的值是两个，那么顺序为：上下  左右  方向赋值
        如果复合型写法的值是一个，那么顺序为：上下左右  方向赋值

3、border：border是盒子的边框，复合型写法：border: 10px solid rgb(117, 184, 247);。第一个值是边框宽度，第二个值是边框样式（虚线、实线、点线、双实线等），第三个值是边框颜色，这三个值无顺序，先写哪个都行 。

4、margin：盒子的外边距，复合型写法： margin的复合型写法同上，和内边距一样。

二、伪类

1、用a标签举例

a:link         未被访问过的链接样式

a:visited    链接访问过后的样式

a: hover    鼠标悬停时的标签

a: active    鼠标点击时候的样式，不松开

注意：link、visited、hover、active顺序写

三、元素显示与隐藏  

1、元素的转换

display：block块级元素

display：inline行内元素

display：inline-block行内块元素

2、元素显示

display：block元素显示

display：none元素不显示且没有这个元素

四、其他

1、块级元素水平居中 ：盒子必须指定宽度，盒子左右设置为：margin: 0 auto;

2、外边距合并问题 ：两个相邻元素设置外边距，不会相加，会以较大的一方的外边距作为他们之间的外边距

3、嵌套盒子的垂直外边距塌陷问题：给父元素添加上内边距，给父元素添加上overflow: hidden;，给父元素添加上上边框

4、focus：focus是聚，常用于input文本框，元素设置焦点，如a:focus；

5、overflow：hidden作用：清除浮动、垂直外边距塌陷、让图片放大不超过图片原有位置（盒子大于部分被隐藏）