边框属性

• 作用：边框就是环绕在标签宽度和高度周围的线条
• 连写(同时设置四条边的边框)格式：
• border: 边框的宽度 边框的样式 边框的颜色;
• 快捷键:
• bd+ border: 1px solid #000;
• 注意：
• 连写格式中颜色属性可以省略, 省略之后默认就是黑色
• 连写格式中样式不能省略, 省略之后就看不到边框了
• 连写格式中宽度可以省略, 省略之后还是可以看到边框
• 连写(分别设置四条边的边框)格式;
• border-top: 边框的宽度 边框的样式 边框的颜色;
• border-right: 边框的宽度 边框的样式 边框的颜色;
• border-bottom: 边框的宽度 边框的样式 边框的颜色;
• border-left: 边框的宽度 边框的样式 边框的颜色;
• 快捷键:
• bt+ border-top: 1px solid #000;
• br+
• bb+
• bl+
• 连写(分别设置四条边的边框)格式：
• border-width: 上 右 下 左;
• border-style: 上 右 下 左;
• border-color: 上 右 下 左;
• 注意：
• 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
• 这三个属性的取值省略时的规律：
  • 省略左边的时候，左边的取值和右边的一样
  • 省略下边和左边的时候，左边的取值和右边的一样，下边的取值和上边一样
  • 省略右下左的时候,右下左边取值和上边一样
• 非连写(方向+要素)格式：
• border-left-width: 20px;
• border-left-style: double;
• border-left-color: pink;

内边距属性

• 作用：边框和内容之间的距离就是内边距
• 格式：
• 单独设置四条边：
  • padding-top: ;
  • padding-right: ;
  • padding-bottom: ;
  • padding-left: ;
• 同时设置四条边：
  • padding: 上 右 下 左;
• 注意：
• 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
• 给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

• 作用：标签和标签之间的距离就是外边距
• 格式：
• 单独设置四条边
  • margin-top: ;
  • margin-right: ;
  • margin-bottom: ;
  • margin-left: ;
• 同时设置四条边:
  • margin: 上 右 下 左;
• 注意:
• 外边距的那一部分是没有背景颜色的
• 这三个属性的取值省略时的规律同边框属性的规律一样
• 外边距合并现象
• 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

盒子模型

• 什么是CSS盒模型?
• CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
• CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
• 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型
• 盒模型宽度和高度
• 内容的宽度和高度
  • 就是通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  • 高度 同理可证
• 元素空间的宽度和高度
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  • 高度 同理可证
• 增加了padding/border之后元素的宽高也会发生变化
  • 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

box-sizing属性

• CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
• box-sizing取值
• content-box（默认）
• border-box
  • 作用：增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

盒子居中和内容居中

• margin-top问题
• 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
• 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
• 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
• text-align:center;和margin:0 auto;
• 区别：
• text-align: center; 是设置盒子中存储的文字/图片水平居中
• margin:0 auto;是让盒子自己水平居中