CSS知识点速记（三）

盒模型、盒子模型、框模型（box model）

• CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

• 每一个盒子都由以下几个部分组成：
  内容区（content）
  内边距（padding）
  边框（border）
  外边距（margin）

• • 可选值：
    content-box 默认值，宽度和高度用来设置内容区的大小
    border-box 宽度和高度用来设置整个盒子可见框的大小，width 和 height 指的是内容区 和 内边距 和 边框的总大小
  • 一共有四个方向的外边距：
    margin-top：上外边距，设置一个正值，元素会向下移动
    margin-right：默认情况下设置margin-right不会产生任何效果
    margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动
    margin-leftP:左外边距，设置一个正值，元素会向右移动
  • margin也可以设置负值，如果是负值则元素会向相反的方向移动
  • 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素
  • margin的简写属性
    margin 可以同时设置四个方向的外边距 ，用法和padding一样
  • margin会影响到盒子实际占用空间
  • 内容区和边框之间的距离是内边距
  • 一共有四个方向的内边距：
    padding-top
    padding-right
    padding-bottom
    padding-left
  • 注意：
    内边距的设置会影响到盒子的大小
    背景颜色会延伸到内边距上
  • 边框的宽度 border-width
  • 边框的颜色 border-color
  • 边框的样式 border-style
  • border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
    除了border以外还有四个 border-xxx
  • 默认值，一般都是 3个像素
    border-width可以用来指定四个方向的边框的宽度
    值的情况
    四个值：上 右 下 左
    三个值：上 左右 下
    两个值：上下 左右
    一个值：上下左右
    除了border-width还有一组 border-xxx-width，xxx可以是 top right bottom left，用来单独指定某一个边的宽度
  • border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样
    border-color也可以省略不写，如果省略了则自动使用color的颜色值
  • solid 表示实线
    dotted 点状虚线
    dashed 虚线
    double 双线
  • border-top
    border-right
    border-bottom
    border-left
  • 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列
    内容区的大小由width 和 height两个属性来设置
    width 设置内容区的宽度
    height 设置内容区的高度
  • 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
    边框的大小会影响到整个盒子的大小
    要设置边框，需要至少设置三个样式：
  • 内边距（padding）
  • 外边距（margin）
    外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
  • padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width 一样
  • 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
    box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
  • 总结
    一个盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

关注公众号：哥伦布日记，即可获得更多干货！