6. 盒子模型 margin,boder,padding,content
盒子模型:margin,boder,padding,content
content
- min-width:底线宽度
- max-width:最大宽度,看浏览器
- min-height:底线高度
- max-height:最大高度
默认宽度:当没有给 width 属性时候
内容区=父的content-自身的左右margin-自身左右border-自身左右padding
总宽度=父的content-自身的左右margin
盒子的内边距 padding
- 左侧内边距:
padding-left:20px
- 右侧内边距:
padding-right:20px
- 上内边距:
padding-top
- 底边内边距:
padding-bottom
- 复合属性
padding: 10px 20px 30px
(上边距 左右边距 下边距)padding: 10px 20px 30px 40px
(上边距 右边距 下边距 左边距)padding: 10px 20px
(上边距 下边距)
ps:行内元素的行下内边距可能不会完美设置,可能与块元素会重叠
盒子的边框 broder
默认边框的宽度是 3
- 左边框宽度:
border-left-width
同理 右上下 - 右边框颜色:
border-right-color
同理 左上下 - 上样式:
border-right-style
同理 左右下 - 三个属性相同方向的复合:
broder-left: 10px soild red
同理 上下左右
盒子的外边距 margin
margin-left
,margin-right
,margin-top``margin-bottom
,复合margin
- 子元素的 margin,是从父元素的 content 开始算
- 上、左 margin 会影响自身位置,下、右 margin 会影响兄弟位置
- 行内元素设置上下margin是无效的
- 对于块内元素,左右margin 值均是 auto,效果上水平居中
- margin 值可以为负值
margin 的塌陷问题:
给第一个儿子元素一个margin-top,之后竟然其父元素在动,子元素并没有达到原来效果;给最后一个子元素 margin-bottom,也被父元素抢走。
解决:给父元素增加溢出文字的显示属性:overflow:hidden;
margin 的合并问题
相邻上下元素的 margin 会出现合并现象,上元素的下边距和下元素的上边距,左右边距不会出现合并
处理内容的溢出问题
overflow: 属性值
- visable:显示默认
- auto:自动显示滚动条,内容不溢出不显示
- scroll:不管溢出,会出现滚动条
- hidden:隐藏
overflow-x 和 overflow-y 不建议使用,不可以一个 hidden 一个 visable
样式继承:与盒子模型无关的会继承,与盒子模型相关不会继承
哪有什么胜利可言,坚持意味着一切。如想使用请备注转载链接~
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步