Web前端学习—基础篇(14)_什么是盒模型、盒模型包括哪些内容、盒模型相关属性都有哪些

前端学习——基础篇

四、CSS学习

4.5、盒模型

4.5.1、什么是盒模型？

​ 也称框模型，在页面布局中，页面元素合理有效地组织在一起，形成一套完整的、行之有效的规则、规范。

包含：

​ 内容content、内填充padding、border边框、外间距margin几个要素

标准盒模型的计算公式：

• 盒子的实际宽度 = width + padding-left + padding-right + border-left + border-right
• 盒子的实际高度 = height + padding-top + padding-bottom + border-top + border-bottom
• 盒子的总宽 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 盒子的总高 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

4.5.2、盒模型相关属性

内容相关属性

width属性：元素的宽度

height属性：元素的高

• 属性值：auto(默认)、数值（单位px|em|rem|%父元素尺寸的百分比）、inherit(继承)

  注意：数值中，

  ​ max-width属性 最大宽度 min-width属性 最小宽度

  ​ max-height属性 最大高度 min-height属性 最小高度

padding属性 内填充

• 单边内填充

  • padding-top属性 上内填充
  • padding-right属性 右内填充
  • padding-bottom属性 下内填充
  • padding-left属性 左内填充

• 复合写法

  • padding: npx;
  • padding: npx mpx;
  • padding: npx mpx xpx;
  • padding: npx mpx xpx ypx;

  padding: 20px;/* 元素的上、右、下、左各有20像素的内填充 */
  padding: 20px 30px;/* 元素的上、下各有20像素，左右各有30像素的内填充 */
  background-color: pink;
  padding: 20px 30px 40px;/* 元素的上20像素，左右各有30像素，下40像素的内填充 */
  padding: 20px 30px 40px 50px;/* 元素的上20像素，右30像素，下40像素，左50像素的内填充 */
  

  注意：上下内填充和左右内填充百分数值相对于父元素的width属性计算

border属性 边框

• 边框属性
  • border-width属性 边框宽度
  • border-style属性 边框线型
    • none 没有边框
    • solid 单实线
    • double 双实线
    • dashed 条状虚线
    • dotted 点状虚线
  • border-color属性 边框颜色
    如果没有边框颜色，边框颜色与文字颜色相同
• 复合写法
  • border-width属性
    border-left-width属性
    border-right-width属性
    border-top-width属性
    border-bottom-width属性
  • border-style属性
  • border-color属性
• 单边写法
  • border-left属性 左边框
    border-left: border-left-width border-left-style border-left-color;
  • border-right
  • border-top
  • border-bottom
• 简写
  border: border-width border-style border-color; 四周都有边框
• 去掉边框
  border-right: none;
  border-bottom: 0;
• 绘制三角形——向下的三角形

.box10{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

margin属性 外间距

• 单边写法

  • margin-top属性 上外间距
  • margin-right属性 右外间距
  • margin-bottom属性 下外间距
  • margin-left属性 左外间距
    margin可以设置负值，会减少元素的占位。

  margin-top: -20px;元素向上移动20像素
  

• 复合写法
  margin: npx;
  margin: npx mpx;
  margin: npx mpx xpx;
  margin: npx mpx xpx ypx;

• 盒子的水平居中
  width: ;
  margin: 0 auto;/* 要实现盒子的水平居中，必须与width属性组合使用 */