盒模型

2018-10-21

盒模型的概念

css 定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是 css 布局的基石，它规定了网页元素如何显示以及元素间相互关系。

盒模型的组成

CSS 盒子模式都具备这些属性：内容(content)、填充(padding)、边框(border)、边界(margin)

用日常生活的盒子来理解这四个属性

内容（content）盒子里装的东西；
填充（padding）就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框（border）盒子本身；
边界（margin）盒子与盒子之间的空隙，或者是大盒子与嵌套在里面的小盒子之间的空隙。

padding 属性

padding 的定义

padding 是元素内容到元素边框之间的距离，叫内填充、补白或内边距
padding 区域内会显示背景色和背景图片

padding 的用法

用来调整内容在容器中的位置关系
用来调整子元素在父元素中的位置关系。（注：padding 属性需要添加在父元素上。）
padding 值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的 padding 属性值。

四种表示形式

一个值：padding:2px; 四周的填充都是 2px
二个值：padding:10px 20px ; 上下左右
三个值：padding:10px 20px 30px ; 上左右下
四个值：padding:10px 20px 30px 40px; 上右下左

margin 属性

边界：margin,在元素外边的空白区域，被称为外边距。
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界

属性值的 4 种方式:
四个值：上右下左
三个值：上左右下
二个值：上下左右
一个值：四个方向

margin: 2px; /*定义元素四边边界为2px*/
margin: 2px 4px; /*定义元素上下边界为2px，左右边界为4px*/
margin: 2px 4px 6px; /*定义元素上边界为2px，左右边界4px，下边界为6px，*/
margin: 2px 4px 6px 8px; /*定义元素上、右边界为2px，下右边界为6px，左边界为8px*/
margin: 0 auto; /*在浏览器中横向居中*/

定义元素上、下边界为 2px
说明：可单独设置一方向边界，如：margin-top:10px;

border 的使用方法

border:边框宽度边框风格边框颜色;
例如：border:5px solid #f00

边框：border,网页中很多修饰性线条都是由边框来实现的
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

元素总尺寸计算方法

width 和 height 属性
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
注意：增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。

盒子的实际大小：
实际宽 =左右 margin+左右 border+左右 padding+width
实际高 =上下 margin+上下 border+上下 padding+height

单行文本溢出显示省略号的方法

容器宽度：width:value；
强制文本在一行内显示: white-space:nowrap;
溢出内容为隐藏：overflow:hidden;
溢出文本显示省略号：text-overflow:ellipsis;

容器的溢出属性

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，
hidden：溢出容器的部分会隐藏；
scroll：强制出现滚动条，如果有溢出，滚动条可以滚动，显示隐藏的部分;
auto：如果内容有溢出会显示滚动条，如果没有溢出就不显示滚动条；
inherit：从父元素继承 overflow 属性的值。

空余空间

white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似 HTML 中的 pre 标签；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到换行标签为止；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承 White-space 属性的值；(ie 浏览器不支持此属性值)

文本溢出:text-overflow:clip/ellipsis
取值：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；

本文作者：人模人样的搬砖老段
本文链接：盒模型
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2019/09/05