css问题

伪类问题

伪类一个冒号：

伪元素两个冒号 ::

nav ul li:hover ul 和 .nav ul li a:hover ul有什么区别
第一个是鼠标滑过li时，li里面ul的样式
第二个是鼠标滑过li中的a时，a里面ul的样式
ul li a:hover i
鼠标滑过a时,a里边 i标签的变化

---

水平居中对齐,垂直对齐

margin:0 auto;
对有宽度的块元素起作用;

text-aline:center;
只对元素里文本和行内元素(行内块元素)起作用;

line-height;

等于盒子高度,只对盒子内的文本起作用;

line-height = font-size

行高等于字体的大小,消除文字的默认行距;

---

高度塌陷问题

高度塌陷场景: 父元素没有设置高度时,给子元素添加了float属性时,父元素会高度塌陷.

父元素没有设置高度,父元素的高度，默认被子元素撑开，如果子元素设置浮动，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动， 导致整个页面的布局混乱 。

解决方法:

方法一.给父元素添加高度;

方法二.给父元素添加overflow:hidden属性;

方法三: 清除浮动法;

---

padding值

在设置宽度,高度的情况下,padding值会撑大盒子;所以要减去对应的padding值;

没有直接设置宽度,高度不需要考虑padding值撑大盒子的问题;

box-sizing:border-box; 不需要考虑padding值和border撑大盒子的情况;

---

图片底部的空白间隙问题

原因:img标签(行内块元素)默认是和基线对齐的.

vertical-align:baseline(默认)/top/middle/bottom/

1. 解决方法一:给图片改变对齐方式(baseline以外的);
2. 方法二:display:block; 转换成块元素;

---

外边距塌陷问题

脱离标准流的元素不需要考虑外边距塌陷问题；

（浮动，绝对定位和固定定位）

---

(脱离标准流)

浮动和固定定位、绝对定位的元素脱离标准流控制,不在占有原来的位置;

可以直接设置宽度和高度