盒模型(框模型)

1.在CSS中,认为一切元素都是框,都是矩形区域

  盒模型:计算元素在文档中的实际占位情况
  盒模型组成:margin(外边距) border(边框)padding(内边距) content(元素的宽高尺寸)
  元素在文档中的实际尺寸的计算方式:
  默认情况下: 最终宽度 = 左右外边距+左右的边框宽度+左右内边距+width
        最终高度 = 上下外边距+上下的边框高度+上下内边距+height

2.margin (外边距)
  1.margin表示外边距:元素边框与其他元素边框之间的距离
  2.取值:像素值
    1.margin:10px;表示上右下左四个方向都为10px的外边距
    2.margin:10px 20px;表示上下为10px,左右为20px的外边距
    3.margin:10px 20px 30px;表示上右下左的外边距分别为10px 20px 30px 20px
    4.margin:10px 20px 30px 40px;表示上右下左以为取值为外边距

3.单方向外边距的设置
  1.属性:1.margin-top:上方外边距
      2.margin-right: 右边外边距
      3.margin-bottom:底部外边距
      4.margin-left: 左边外边距
  2.取值:像像素值
    只给当前方向设置外边距,给一个值

4.特殊取值:
  1.margin:0;设置元素外边距为0,常用与初始化页面样式,取消一些元素的默认外边距。
  2.margin:0 auto; 设置左右外边距自动,用来实现元素的居中效果。auto只对左右边距起作用。
  3.取负值:会移动元素的位置,负值表示向上向左移动元素,常用于页面元素位置的微调。

原文地址:https://www.cnblogs.com/zengsf/p/9793559.html