盒模型

作者: 碧水哥 | 来源:发表于2017-07-27 11:49 被阅读0次

相信只要是接触过前端的,一定会对盒模型有着深深地记忆,整理了一下:

盒模型,由内到外,分别是本身宽高、内边距、边框。然后盒模型还可以有外边距,之后解释。

本身宽高,没啥说的了;

内边距即padding,表示从元素本身内容到元素边框的距离,分上下左右四个方向,可以有1~4个值,如下:

padding:10px; 

1个值,表示四个方向padding都是10像素大小;

padding:10px 20px; 

2个值,第一个值表示上下,padding-top=padding-bottom=10px; 第二个值表示左右,padding-left=padding-right=20px;

padding:10px 20px 30px; 

 3个值,第一个值表示上,padding-top=10; 第二个值表示左右,padding-left=padding-right=20px;第三个值表示下,padding-bottom=30px

padding:10px 20px 30px 40px; 

4个值,很好记,从上开始,按顺时针方向即上右下左的顺序分别赋值,即padding-top=10px,padding-right=20px,padding-bottom=30px,padding-left=40px

另外,有个需要注意的点:使用padding会增大盒模型面积。

边框即border

顾名思义,就是给盒模型加上一个边界,这个边界用有宽度有颜色有样式的线组成,从而传递一个信号,边框里面的东西,外界不能干预(在布局层面讲,并且暂时不考虑层级的问题)。

border-width  边框的宽度,没啥讲的,想给多宽直接设置;

border-color   边框的颜色,也没啥说的,想要啥颜色直接给,近期会再写一篇关于颜色的文章;

border-style   也很好理解,style样式嘛,比如最常用的实线虚线等,solid-实线     dashed-虚线    dotted-点线   三个最常用的属性。

border还支持简写,border:2px solid red;什么意思呢?2像素宽的红色实线边框。

这里还有一个很好玩的属性叫border-radius ,叫圆角度,就是让方方正正的角,变得圆滑一些,

可以用它做很多图形,当然后面可以用画布来做;需要注意的是,border的使用同样会增加盒模型面积;

盒模型面积计算:S=(border-left + padding-left + width + padding-right + border-right) * (border-top + padding-top + height + padding-bottom + border-bottom);

用下图来实战一下:

S=(20+40+100+20+10)*(5+10+150+30+15)=39900;

margin

margin是用来调节元素之间位置的这么一个属性,所以它不算在面积内部,margin同样有1~4个值,语法和padding是一样的,有两个要注意的点:

子债父偿和上下叠压

子债父偿:产生原因:块元素作为第一个子级,并且使用了margin或者margin-top。

效果:最开始

然后给粉色块一个margin-top想出现下面这个结果:

但是显示的是这样的:

不是子级相对于父级下移了,而是整体移动,这就是子债父偿,那么怎么解决呢?

有3个方法解决,①给父级一个border  ②不用margin,让父级使用padding,把子级“挤下来” ;①②不推荐使用,因为会让父级面积增大,影响整体布局   ③为父级添加overflow:hidden,最常用也是最好用的解决办法。

上下叠压:在正常情况下,块元素使用margin会出现上下叠压现象,大家知道,margin是调整外部距离的,

这个情况下应该是两个块之间隔开150+100,一共250像素的位置,但是实际效果呢?

实际间隔是150(两个值中大的那个),这就是上下叠压现象。有问题就会有解决方案:使用浮动

完美解决。

相关文章

  • 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/vgiakxtx.html