Day9 盒模型

盒模型概念

所有的HTML元素就像是箱子一样(有宽度高度)，并且具备以下六个属性:

• 宽度width
• 高度height
• 内容content
• 边框border
• 内距padding
• 边界margin

Padding 内距设定

Padding是内距，有设定padding就会产生留白的距离
可以控制 HTML元素间的内部距离（例如文字或图片与边框的距离、一个区块如 DIV 或 span 的内部距离）

1. 可以分别设定上下左右内距的距离
   padding-bottom
   padding-left
   padding-right
   padding-top

例如:

在还没设定padding之前，可以看到文字内容会撑满浏览器

在设定了padding之後

可以看到，文字内容向内推挤出了一些距离

2. 其他设定padding的方式
   除了用padding-bottom、padding-left、padding-right、padding-top来分别设定内距之外，
   还有以下方式可以设定

• padding : 10px 20px 10px 20px; (以顺时钟顺序设定上右下左的padding大小)
• padding : 10px 20px; (第一个数值代表设定上下内距，第二个数值代表设定左右内距)
• padding : 10px; (设定上下左右内距都是10px)
• padding : 10px 20px 10px; (第一个数值代表设定上，第二个数值代表设定左右，第三个数值代表设定下)

参考资料: Padding

border 边框设定

一样可以上下左右分别设定边框
但border还需要设定框线的粗细、线条样式及颜色

例如:

参考资料: border

Margin 边界设定

和Padding不同，是向外推挤产生边界的距离
如果是行内元素，设定margin的上下距离不会产生效果。

例如:
在还没设定margin之前，可以看到文字段落都挤在一起
利用margin-bottom 使文字段落向下推挤产生边界距离

相关资料:Margin Collapse

Box-sizing

HTML元素的宽度和高度会包含padding和border

例如:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

div1的实际宽度会等於 300px +左边1px border + 右边1px的border =302px
div1的实际高度会等於 100px +上面1px border + 下面1px的border =102px

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

div2的实际宽度会等於 300px +左右两边padding+ 左右两边border=402px
div2的实际高度会等於 100px +上下两边padding + 上下两边border= 202px

box-sizing: border-box;

如果在HTML元素上有设定box-sizing: border-box; ，padding和border就不会被纳入该元素的宽度与高度内，原本元素的宽度高度就会往内缩

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

参考资料: CSS Box Sizing

以上为个人学习笔记整理
若有错误，欢迎指正