盒模型

作者: Dream_丹丹 | 来源:发表于2018-05-13 18:00 被阅读0次

盒子模型

作用:盒子模型是用来描述一个元素的宽高,边框,内容,距离,边框的大小以及元素与元素的距离

从内到外盒子模型有这几个属性组成

  • width 内容宽度 height 内容高度
  • padding-top、padding-right、padding-bottom、padding-left
    ==padding是内边距,内容距离盒子内边缘的距离==
  • border 边框 边框只有厚度(高度),没有宽高,border也分别为四个方向
  • margin-top、margin-right、margin-bottom、margin-left
    ==margin是位边距 元素元素之间的距离==
image
  • widht/height 内容的宽度和高度,和整个盒子的宽高四两个概念

  • padding 内容边缘距离盒子边框内边缘的距离,有四个方向,有不同的写法

    • padding-top、padding-right、padding-bottom、padding-left
    • padding: 10px 20px 30px 40px; 上 右 下 左
    • padding: 10px 20px 30px; 上 左右 下
    • padding: 10px; 四个方向都是10px;
  • border 边框 由宽度 样式 颜色,默认一个盒子的边框宽度为3px,样式为无,颜色为黑色

这三个属性如果没有设置样式,边框也不会出现

相关文章

  • CSS面试题

    1、盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding +...

  • CSS面试题

    1、 盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding ...

  • CSS盒模型和BFC

    盒模型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型 IE盒模型也称border-box。属性width,...

  • 前端第四天

    前端第四天 目录: 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 盒模型

    盒模型 盒模型,可以简单解释为:盒模型用来描述元素所占据的空间。有两种盒模型:W3C盒模型(标准盒模型)和IE盒模...

  • CSS

    Q1.简单描述CSS的盒模型 1.盒模型种类:包括标准盒模型和IE盒模型(怪异盒模型) 2.盒模型设置方式:通过b...

  • css问题

    标准盒模型&非标准盒模型(怪异盒模型) 标准盒模型 box-sizing (模型样式) 语法: box-sizin...

  • 两种Box Model(盒模型)的理解、区别以及注意事项

    盒模型,可以简单解释为:盒模型用来描述元素�所占据的空间。 有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型这...

网友评论

      本文标题:盒模型

      本文链接:https://www.haomeiwen.com/subject/tonsbxtx.html