CSS 入门 - Box Model 盒模型
网页布局:先学习 Box Model,然后 Flexbox/Grid/Float 三选一即可搞定网页布局,推荐 Flexbox!
BOX Model
四大属性:Content、Padding、Border、Margin
- Content:内容
- Border:边框线
- padding:内容与边框的距离
- margin:边框与其他元素的距离
margin 与 padding 的区别
除了 padding 在边框内,margin 在边框外:
- padding 部分有背景颜色,margin 无背景颜色
- 如果元素可点击(如超链接),padding 部分可点击,而 margin 部分不可点击
- 相邻 margin 会合并(margin collapse)
设置值格式
- padding/margin: 10px; 上下左右
- padding/margin: 10px 20px; 上下,左右
- padding/margin: 10px 20px 30px; 上,左右,下
- padding/margin: 10px 20px 30px 40px; 逆时针:上,右,下,左
- padding/margin-top/left/right/bottom 单独指定某一边
inline
以上针对 block 元素。对于 inline 元素(如 strong),margin 只影响左右,对上下不起作用;padding 影响左右,上下虽然有效果(如背景颜色、边框),但不影响垂直方向布局。改成 display:inline-block; 即可符合预期(行为类似 block)。
总结:inline 不影响垂直方向的版面布局!
居中对齐
- 对于 inline 元素:复用父元素的 text-align:center
- 对于 block 元素:如果宽度小于 100%,margin-left 和 margin-right 设为 auto 即可
Box-sizing
默认值:content-box,width、height 设置的是 content;而设为 border-box 时,width、height 包含了 padding 及 border 的宽度
Reference
https://www.bilibili.com/video/BV1WA411h7Y1/
标签:Box,边框,padding,inline,Model,margin,CSS From: https://www.cnblogs.com/tengzijian/p/17731343.html