美文网首页
div+css 盒子模型,宽高原来不是边框的宽高

div+css 盒子模型,宽高原来不是边框的宽高

作者: 陳小飛 | 来源:发表于2018-03-05 22:24 被阅读23次

div+css 盒子模型

  • 之前一直没有仔细去研究div+css盒子模型,今天闲来无事,看了下,发现之前的理解一直是错的,因为之前一直是看并没有实际动手去写,或者写出来也没有深究。今天写了一个简单的盒子模型,然后浏览器里更改padding值,发现边框在变大,然后就觉得有点奇怪,明明宽度和高度分别设置的200px,为什么宽和高还会变呢?
初始状态
  • 调大padding值后,明显看到边框变大了

    调大padding后
  • 盒子模型=区块+内边距+边框+外边距

    盒子模型
  • 宽和高限定的是区块的宽和高,并不包括边框。

纸上得来终觉浅,绝知此事要躬行

不实际试一下,还真没注意这个事儿,后面还是好好看看css吧。
又看了下,上面这种情况是针对非IE浏览器的-。-||

相关文章

  • div+css 盒子模型,宽高原来不是边框的宽高

    div+css 盒子模型 之前一直没有仔细去研究div+css盒子模型,今天闲来无事,看了下,发现之前的理解一直是...

  • 2018-08-28

    盒子模型 宽高:元素的宽高 外边距:距相邻元素或上级元素的距离 边框:元素的边框 内边距:内容距元素边框的距离 粘...

  • css布局-盒模型

    1、盒模型的初步认识一个真正的盒子包括:内容宽,内容高,边框,内边距,外边距width:内容宽height:内容高...

  • 盒模型

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

  • css基础系列

    盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 盒子模...

  • 几分钟了解前端之——css基础知识系列

    一、盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 盒...

  • 考题1

    1,盒子的框高和宽: 盒宽=width+左右边框距+左右内边距 盒高=height+上下边框距+上下内边距 2,盒...

  • css中box-sizing(两种盒子模型)

    content-box(标准盒子模型) 以content为边界,宽高只是content的宽高,padding是像外...

  • 高宽

    box-sizing:content-box;(标准盒子模型,样式宽高即为内容宽高)box-sizing:bord...

  • 标准盒模型

    1、一个盒子的构成: 盒子中的内容:content 宽=width 高=height 盒子的边框:border 盒...

网友评论

      本文标题:div+css 盒子模型,宽高原来不是边框的宽高

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