盒子边框 内边距 外边距 box-sizinig

边框属性

1、什么边框?

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

2、边框属性的格式

  • border: 边框的宽度 边框的样式 边框的颜色;

3、连写(同时设置四条边的边框)

  • border: 边框的宽度 边框的样式 边框的颜色;

快捷键:

  • bd+ border: 1px solid #000;

注意点

  • 连写格式中颜色属性可以省略, 省略之后默认就是黑色
  • 连写格式中样式不能省略, * 之后就看不到边框了
  • 连写格式中宽度可以省略, 省略之后还是可以看到边框

4、连写(分别设置四条边的边框)

  • border-top: 边框的宽度 边框的样式 边框的颜色;
  • border-right: 边框的宽度 边框的样式 边框的颜色;
  • border-bottom: 边框的宽度 边框的样式 边框的颜色;
  • border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键

  • bt+ border-top: 1px solid #000;
  • br+
  • bb+
  • bl+

5、连写(分别设置四条边的边框)

  • border-width: 上 右 下 左;
  • border-style: 上 右 下 左;
  • border-color: 上 右 下 左;

注意点

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

6、非连写(方向+要素)

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

内边距属性

1、什么是内边距?

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

2、格式

  • padding：上 右 下 左;

3、非连写

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

4、连写

  • padding: 上 右 下 左;

5、这三个属性的取值省略时的规律

  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样

注意点

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

外边距属性

1、什么是外边距?

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

2、格式

  • margin: 上 右 下 左;

3、非连写

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

4、连写

  • margin: 上 右 下 左;

5、这三个属性的取值省略时的规律

  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样

注意点

  • 外边距的那一部分是没有背景颜色的
  • 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

盒子模型

1、什么是CSS盒子模型?

  • CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论：在HTML中所有的标签都可以设置

  • 宽度/高度 == 指定可以存放内容的区域
  • 内边距 == 填充物
  • 边框 == 手机盒子自己
  • 外边距 == 盒子和盒子之间的间隙

盒子模型宽度和高度

1、内容的宽度和高度

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

2、元素的宽度和高度

  • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  • 高度 同理可证

3、元素空间的宽度和高度

  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  • 高度 同理可证

盒子box-sizing属性

1、CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

2、box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度

3、box-sizing取值

  • content-box
    元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box
    元素的宽高 = width/height的宽高

盒子居中和内容居中

1、text-align:center;和margin:0 auto;区别

  • text-align: center;作用
    设置盒子中存储的文字/图片水平居中

  • margin:0 auto;作用
    让盒子自己水平居中