【补档】20220718 HTML,CSS基本样式-宽高边距与解决外边距重叠问题

196 阅读2分钟

块元素css基本样式:

宽:

  • 宽度——width(宽默认为100%)
  • 最小宽度——min-width(限制最小宽度为多少)
  • 最大宽度——max-width(限制最大宽度为多少)

高:

  • 高度——height(高默认为被内容撑起)
  • 最小高度——min-height(限制最小高度为多少)
  • 最大高度——min-height(限制最大高度为多少)

边距:

外边距——margin**【可以写margin解决的,尽量不要使用单独的top这些】**

  • 上外边距——margin-top
  • 右外边距——margin-right
  • 下外边距——margin-bottom
  • 左外边距——margin-left

单margin时:

  • 写1个数为给全部设置
  • 写2个数为给上下-左右设置
  • 写3个数为给上-左右-下设置
  • 写4个数为给上-右-下-左设置

内边距——padding【可以写padding解决的,尽量不要使用单独的top这些】

  • 上内边距——padding-top
  • 右内边距——padding-right
  • 下内边距——padding-bottom
  • 左内边距——padding-left

单padding时**:**

  • 写1个数为给全部设置
  • 写2个数为给上下-左右设置
  • 写3个数为给上-左右-下设置
  • 写4个数为给上-右-下-左设置

溢出处理:

overflow:

  • visible(默认设置,溢出显示)
  • hidden(溢出时隐藏)
  • auto(没溢出时正常,溢出时出现滚动条)

外边距重叠:

问题:

  • 上外边距和下外边距会出现外边距重叠问题,左外边距与右外边距不会出现外边距重叠问题
  • 设置外边距的容器和他父元素的外边距没有元素阻隔,所以出现了外边距重叠的问题

解决问题:

  • 给父元素设置border(边框),缺点:多出一个边框
  • 设置overflow属性为非visible样式,缺点:占用了一个overflow属性
  • 使用伪元素,设置一个table【变成块元素】(::before【元素最前面空白区域设置样式】与::after【元素最后面空白区域设置样式】)

虎哥小知识:

给行内元素设置的宽高都无效

复杂的代码你给我去学习!