前端面试中关于HTML和CSS的一些基础题笔记整理

1、CSS的优先级
①通配和继承:0000
②元素选择器:0001
③类、伪类: 0010
④ID选择器: 0100
⑤行内样式: 1000
加了 ‘!important’ 的优先级为无穷大

2、外边距塌陷(外边距合并)
①、上下元素之间的外边距塌陷
当一个元素出现在另外一个元素的上面时,第一个元素的下外边距与第二个元素的上外边距将发生合并。合并的结果是外边距变成上述两者中大的一个。
前端面试中关于HTML和CSS的一些基础题笔记整理
②包含元素之间的外边距塌陷
当一个元素包含在另一个元素中,父元素没有内边距和边框子元素没有外边距时,父元素与子元素的上外边距(或下外边距)会发生合并。
前端面试中关于HTML和CSS的一些基础题笔记整理
解决外边距塌陷的办法:

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden。

3、box-shadow属性的参数问题
box-shadow :h-shadow v-shadow [blur] [spread] [color] [inset]
前两个参数必需、后四个为可选
第一个/第二个参数分别为水平阴影位置、垂直阴影位置;
第三个参数用于决定模糊距离
第四个参数用于指定阴影尺寸
第五个参数用于指定阴影颜色
第六个参数用于指定阴影的内外部(inset内部、outset外部)默认为inset
4、浮动
特性:浮动元素不保留原来位置,脱离标准流,具有行内块元素特性。
清除浮动方法:
①额外标签法
②给父级元素添加overflowed属性
③给父级元素添加after伪元素
④添加双伪元素

上一篇:系统弱命令检测与网络端口扫描


下一篇:300 多行css代码搞定微信 8.0 的炸裂特效