盒模型概述

盒模型概述

不同元素产生的盒子类型可能不同

一个元素，产生什么样的盒子，取决于它的display属性

属性：display
是否能继承：否
默认值：inline

display：none 不生成盒子
display：inline 行盒（多个行盒可以在一行显示）
display：block 块盒（块盒独占一行）

盒子的组成

margin 外边距

margin：10px； 上、下、左、右

margin：10px 20px； 上下、左右

margin：10px 20px 30px 上、左右、下

margin：10px 20px 30px 40px 上、右、下、左（顺时针顺序，缩写方式）

border 边框

border-方向-style：dashed；

• style：

  solid 实线

  dashed 虚线

  dotted 点线

  double 双实线

• border-方向-color：red；

• border-方向-width：1px；

• border-radius：3px；

  • 圆角边框

    扩展

    border-radius：10px 20px； 对角线（左上右下、右上左下）

    border-radius：10px/20px ；椭圆角边框

• 边框的默认值

  • 边框的默认颜色是当前标签文本的颜色

  • 边框粗细的默认值是3px（双实线）

透明色：transparent

圆角边框：border-radius：10px

扩展：

border-radius：10px 20px； 左上右下 左下右上

border-radius：10px/20px；

注：

边框的默认颜色是当前标签文本的颜色

边框粗细的默认值是3px

padding 内边距

padding：10px； 上、下、左、右

padding：10px 20px； 上下、左右

padding：10px 20px 30px 上、左右、下

padding：10px 20px 30px 40px 上、右、下、左（顺时针顺序，缩写方式）