CSS-盒模型

边框属性

边框就是环绕在标签宽度和高度周围的线条

边框属性的格式

连写

• 同时设置四条边的边框
  border: 边框的宽度 边框的样式 边框的颜色;
• 分别设置四条边的边框
  border-top: 边框的宽度 边框的样式 边框的颜色;
  border-right: 边框的宽度 边框的样式 边框的颜色;
  border-bottom: 边框的宽度 边框的样式 边框的颜色;
  border-left: 边框的宽度 边框的样式 边框的颜色;

border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;

注意: 连写格式中颜色属性,宽度可以省略 ; 样式不能省略, 省略之后就看不到边框了

• 分别设置四条边的边框
  border-width: 上 右 下 左;
  border-style: 上 右 下 左;
  border-color: 上 右 下 左;

• 注意点:
  • 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
  • 这三个属性的取值省略时的规律
    1.上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    2.上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    3.上 右 下 左 > 上 > 右下左边取值和上边一样

非连写

• 方向+要素

	border-left-width: 20px;
	border-left-style: double;
	border-left-color: pink;

---

内外边距

内边距

边框和内容之间的距离就是内边距

格式

• 非连写

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

• 连写
  padding: 上 右 下 左;

注意:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

外边距

标签和标签之间的距离就是外边距

格式

• 非连写

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

• 连写
  margin: 上 右 下 左;
  注意 : 外边距的那一部分是没有背景颜色的

外边距合并现象

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

盒子模型

盒子模型宽度和高度

• 内容的宽度和高度
  就是通过width/height属性设置的宽度和高度

• 元素的宽度和高度
  宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  高度 = 上边框 + 上内边距 + width + 下内边距 + 下边框

• 元素空间的宽度和高度
  宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  高度 = 上外边距 + 上边框 + 上内边距 + width + 下内边距 + 下边框 + 下外边距

盒子box-sizing属性

• CSS3中新增了一个box-sizing属性, 这个属性可以保证给盒子新增padding和border之后, 盒子元素的宽度和高度不变
• box-sizing属性和增加padding和border之后要想保证盒子元素的宽高不变, 就必须减去一部分内容的宽度和高度的原理一样
• box-sizing取值
  1.content-box
  元素的宽高 = 边框 + 内边距 + 内容宽高
  2.border-box
  元素的宽高 = width/height的宽高

盒子居中和内容居中

text-align: center;	margin:0 auto;
具有继承性	不具继承性
设置盒子中存储的文字/图片水平居中	让盒子自己水平居中

清空默认边距

可从这里拷贝