小白笔记——css盒子模型

盒子模型

盒子模型可以说是布局重中之重了，是布局的基础。css盒子模型可以看做一个盒子，用来装HTML元素，它包括它包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。

内边距

padding属性可以控制内边距。也就是内容到盒子边框的距离。

合写属性：

分写属性：

边框

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色。

 border : border-width || border-style || border-color; 
 border:1px solid red;(合写)
 /*四条边分开设置*/
 boder-top:1px solid red;
 ...

可以分开设置：

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

以上常用，更多可以查询css手册。

外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
代码写法与padding属性一致。

盒子的大小

盒子的大小由width（宽）和height（高）来设置。盒子的宽高包含了content，padding，border三部分，，，不包含margin！
用代码来表现就是

盒子实际宽度 = border-left + padding-left + width + padding-right + border-right
盒子实际高度 = border-top + padding-top + height + padding-bottom + border-bottom

盒子的一些其他属性

盒子圆角：border-radius：属性值；
盒子阴影：box-shadow: h-shadow（必须） v-shadow（必须） blur spread color inset;

&日常

---

以上是默认的盒子模型content-box。
css3中还有一种盒子模型，通过box-sizing:border-box;来使用。它的盒子实际宽高就是width和height，添加padding和border不会影响盒子大小。