这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【 如何理解盒模型及其 content、padding、border、margin?】
【修真院 web(职业)小课堂】如何理解盒模型及其 content、padding、border、margin?
开场语:
大家好,我是 IT 修真院 郑州分院第 14 期的学员 王亚龙,今天给大家分享一下,修真院官网 css深度思考中的知识点——如何理解盒模型及其 content、padding、border、margin?
(1)背景介绍:
盒子模型简单点理解就是外边距 (margin)+ 边框 (border)+ 内边距 (padding)+ 内容 (content),页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个 “外在盒子” 和一个 “内在盒子”,其中 “外在盒子” 负责元素是一行显示还是换行显示,而 “内在盒子” 则负责宽高、内容展现。
(2)知识剖析:
在标准盒模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。盒子占位 width = 2margin + 2padding + 2*border, 高度与之一样。
-
width(包括 min-width, max-width):宽
-
height(包括 min-height, max-height):高
-
padding:内边距
-
border:边框
-
margin:外边距
上面五大属性,除了 width 和 height 以外,padding、border 和 margin 属性都是由四边组成的,每边都可以设置自己的单独值,还可以简写。这里以 margin 为例具体讲解下简写的取值模式。
在讲解之前,我们先说下盒模型的四边,方向分别为上、下、左、右,而 CSS 中表示就分别是 top、bottom、left、right
-
margin-top:top 方向单个值
-
margin-right:right 方向单个值
-
margin-bottom:bottom 方向单个值
-
margin-left:left 方向单个值
-
margin:总的,四个方向的值
/* 简写之前 */ .box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
} /* 简写之后 */ .
box {
margin: 10px 20px 30px 40px; /* 注意顺序以top开始,顺时针方向 */
}
margin: 10px;,表示四个方向的值都是 10px
margin: 10px 20px;,表示 top 和 bottom 方向是 10px,left 和 right 方向是 20px
这种取值模式其实并不是 margin 所独有的,同样 padding 也是按照这个模式来的。而且是一模一样的。另外的话在写html的还要注意,页面默认的话有8个像素的外边距,可以在body里面用 margin=0。来声明。
内边距影响盒子的尺寸,会将盒子撑大。宽和高都会将增加 padding 设置的值。所以我们在做页面的时要注意,所以要保证盒子原来的大小,在宽度和高度上要做相应的减少。
而 border 相对来说还要更复杂点,border 的简写,其简写模式为:border: 1px solid #ccc;
border 的简写其实是由 border-width,border-style,border-color 三个属性组合而成的。1px 就是 border-width,solid 就是 border-style,#ccc 就是 border-color。
而这三个属性,它们如果单独来写,其取值模式就和 margin 是一样的了,都可以设置 1-4 个值,如:
.box {
border-color: #f00 #ccc #ccc; /* top left和right bottom */
border-width: 2px 1px; /* top和bottom left和right*/
border-style: solid; /* all */
}
除此之外,border 当然也有表示方向的属性,如border-left: 1px solid #f00;,则表示左边框为 1px 红色的实线。同样还有 border-top,border-right,border-bottom
(3)常见问题:
1,什么时候使用内边距,什么时候使用外边距,
2.设置边距borde的时候,高度或者说宽度发生改变
(4)解决方案:
1,什么时候使用内边距,什么时候使用外边距,
对于一个 “块”(比如说 div)要设置他与外部 “块” 间的距离用 margin,要设置他与内部内容间的距离用 padding
2.设置边距borde的时候,高度或者说宽度发生改变
这方面大家可以往前看一下,盒子的宽度或者高度是由content+padding+border+margin组成的,在具体设置过程中,这一部分大家要把这一部分算进去。
(5)编码实战:
内容:content
.{ : } .{ : }
上面的话主要演示的是一个盒子,其中内容背景是黄色的,边框是蓝色,中间空白部分就是padding内边距,而外面比较大的空白部分就是外边距。可以仔细思考下看下
(6)拓展思考:
外边距重叠
外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。
防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:
外层元素 padding 代替
内层元素透明边框 border:1px solid transparent;
外层元素 overflow:hidden;
内层元素 加 float:left; 或 display:inline-block;
内层元素 padding:1px;
(7)参考文献:
1,http://www.hujuntao.com/web/css/css-margin-overlap.html
2, 菜鸟教程
(8)更多讨论:
Q1:问题1:垂直居中又几种办法?
A1:我:这里列举几个最常见的
1,line-height居中
2,flex布局居中
align-items: center;
3.利用绝对定位或者是相对定位来居中
Q2:问题2:导航栏定高和不定高的区别
A2:我:定高的话内容不会随着导航栏内容的增多而增加,会造成一部分内容显示不出来,不定高可以随着内容的增加而变化
Q1:问题1:box-sizing 属性
A1:我: box-sizing,属性值常用又连两个
content-box:默认值,让元素维持 W3C 的标准盒模型。Height = border+padding+content width/height
border-box:让元素维持 IE6 及以下版本盒模型,Width/Height =width /height-border-padding
(9)鸣谢:
感谢韩筠宜师姐 ,此教程是在他们之前技术分享的基础上完善而成。
(10)结束语:
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
更多内容,可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地