块元素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【元素最后面空白区域设置样式】)
虎哥小知识:
给行内元素设置的宽高都无效
复杂的代码你给我去学习!