CSS学习笔记（六）

边框

一、格式：

• 1、同时设置四条边 ：border 宽度 样式 颜色
  注意点:颜色可以省略 宽度也可以省略 样式不可以省略

• 2、四条边连写
  border-width ：上 右 下 左
  border-style ：上 右 下 左
  border-color ：上 右 下 左
  注意点：
  顺时针赋值 上右下左
  省略时的规律
  省略左边 ：和右边一致
  省略下左 ： 和对边一致
  省略三边 和设置的一边一致

二、内边距

padding 边框内容之间的距离就是内边距
写法 和 边框 一致

三、外边距

margin
<b>外边距在垂直方向合并</b>

四、盒子模型

• html中所有的标签都是盒子
• css3中新增了一个 box-sizing属性：能够保证盒子元素的宽高不变
• box-sizing的取值:
  content-box : 元素的宽高 = 边框 + 内边距 + 内容宽高
  border-box : 元素的宽高会恒等于 width 和 height

<strong>注意点:</strong>

• 1、如果两个盒子是嵌套关系 那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来
• 2、如果外面的盒子不不想被一起顶下来，那么外面的盒子添加一个边框属性
• 3、企业开发中，需要控制嵌套关系盒子之间的距离，应该首先考虑padding

行高和字号