盒子模型引见 (盒子模型引见怎么做)

本文目录导航：

• 盒子模型引见
• 什么是盒模型
• CSS新手入门笔记整顿：CSS盒模型
• CSS新手入门笔记整顿：CSS盒模型详解

盒子模型引见

概念： 盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的 容器。

作用： CSS 围绕这些盒子发生了一种“盒子模型”概念，经过定义一系列与盒子相关的属性，可以极大地 丰盛 和 促成 各个盒子乃至整个 HTML 文档的 体现成果和规划结构 。

组成： 每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。

每个属性都包括4个局部：上、右、下、左。

属性的4局部可以同时设置，也可以区分设置。

一、内容(content) 宽度width和高度height属性设置，对盒子内容大小的大小启动管理 二、内边距（padding）　padding属性用于设置内边距。

是指边框与内容之间的距离。

a）padding-top、padding-right、padding-bottom、padding-left b) padding: 1px 2px 3px 4px( 顺时针 )　留意： 前面跟几个数值示意的意思是不一样的。

值的个数表白意思： 1个值padding：高低左左边距 比如padding: 3px; 示意高低左右都是3像素 2个值padding: 高低边距 左左边距 比如 padding: 3px 5px; 示意 高低3像素 左右 5像素 3个值padding：上边距 左左边距 下边距 比如 padding: 3px 5px 10px; 示意 上是3像素 左右是5像素 下是10像素 4个值padding: 上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 示意 上3px 右是5px 下 10px 左15px 三、盒子边框（border）　border 属性来定义盒子的边框，该属性蕴含3个子属性：border-style(边框样式)，border-color(边框色彩)，border-width(边框宽度)。

1、定义宽度　a） border-top-width、border-bottom-width、border-left-width、border-right-width　b） border-width:2px; border-width:1px 2px 3px 4px; 留意： 当定义边框宽度时，必定要定义边框的显示样式，由于 自动样式为none ,所以仅设置边框的宽度，由于样式不存在，边框宽度也智能被肃清为 0。

2、定义色彩　Demo:border-top-color:green;border-color:yellow;　3、定义样式border-style: hidden:暗藏边框(IE 不支持)dotted:点线 dashed:虚线solid:实线double:双线边框　4、复合属性　综合写法：border : border-width || border-style || border-color留意：顺序不能失误。

5、圆角边框（CSS3）：　语法：border-radius: 左上角 右上角 右下角 左下角;　Demo：border-radius:10px; /* 一个数值示意4个角都是相反的 10px 的弧度 */ border-radius: 50%;/* 100px 50% 取宽度和高度 一半 */ 四、外边距（margin）　margin属性用于设置外边距。

设置外边距会在元素之间创立“空白”，定义了元素与其他相邻元素的距离， 这段空白理论不能搁置其他内容。

margin-top、margin-right、margin-bottom、margin-left　margin:1px 2px 3px 4px( 顺时针 )罕用配置： 一、盒子水平居中　可以让一个盒子成功水平居中，要求满足一下两个条件：块级元素和盒子必定指定宽度（width） 左右的外边距都设置为auto，就可使块级元素水平居中。

二、外边距兼并 margin的外边距兼并（margin collapsing）margin属性有一个特意的行为，就是外边距兼并，这个行为只对个别文档流中的块级元素的 垂直外边距有效； 行内框（inline-block）、浮动元素和相对定位的原素不会出现外边距兼并。

出现外边距兼并的两种基本状况： 1、两个或多个垂直毗邻的兄弟元素，上方元素的下边距会与上方元素的上边距出现兼并，兼并后的外边距的高度等于两个出现兼并的外边距的高度中的较大者。

2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。

出现这种状况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，兼并后的外边距的高度等于两个出现兼并的外边距的高度中的较大者。

三、盒子模型和box-sizing box-sizing是用来 设置width、height的作用对象 的。

三个值:content-box(自动值) 、 border-box 、inherit（承袭父类）;留意：没有margin-box box-sizing:conten-box，width=元素的内容区(规范盒子模型) box-sizing:border-box，width=元素内容区+padding+border (IE盒子模型)四、背景剪裁 (Background clip) 当咱们给一个元素设置background-color和background-imge时，这个背景会笼罩到元素border的外边界，background-clip属性可以用来 调整背景所笼罩的区域: border-box:背景加长到边框外，自动值 padding-box：背景加长到内边距外，然而不会绘制到border。

content-box：背景被裁剪至内容区（content box）外沿。

五、溢流（overflow） 当用相对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容或许会超出设置的大小，此时内容就会溢流盒子。

要管理这时刻出现的事件，咱们可以经常使用 overflow 属性。

最罕用的： hidden：溢出局部不会显示 visible：自动值，子元素会从父元素溢出，在父元素外部显示 scroll：生成两个滚动条，经过滚动条来检查完整的内容 auto：依据要求生成滚动条六、轮廓(Outline) 盒子的 outline 看起来像边界，然而它不是盒模型的一局部。

它体现得像边界，然而是画在盒子之上，不会修正盒子的大小（详细来说，ouline 是画在边界框之外，外边距区域之内）。

七、盒子显示（display）类型 display 三种经常出现的值为block、inline、inline-block block（块盒）：盒子之前以及之后的内容出如今不同的行上 inline （行内盒）：与块盒相反：与周围的文本和其它行内元素出如今同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒有效，内行内盒上的一切内边距、外边距和边界设置会扭转周围文本的位置，然而不会影响周围块盒的位置。

）； inline-block（行内块盒）：介于前两者之间：像行内盒一样，追随周围的文本流堆放，不会在其前后创立换行；像块盒一样，经常使用宽度和高度设置大小，并且保养其块完整性— 它不会跨段落行换行。

块级元素自动设置为display: block;，行内元素自动设置为display: inline 。

display: flex — 准许你处置一些困扰CSS已久的一些传统规划疑问，例如安顿一系列弹性等宽容器或许垂直居中内容。

什么是盒模型

在前端中盒模型堪称是十分关键的，它是CSS启动页面规划的基石，在页面CSS规划中盒模型规则了网页元素如何陈列显示以及元素之间的相互相关。

在H5中CSS样样式定义一切的元素都可以领有像盒子一样的平面空间和形状。

（如下图所示）整个盒模型蕴含了：内容区（content）、补白或填充（因叫法不同；padding）、边框（border）、边界或外边距（margin）这就是盒模型。

从盒模型的定义中咱们了解到了盒模型是由内容区（content）、填充区（padding）（注：在本文中就称填充区）、边框（border）及外边距（margin）（注：在本文中就称外边距）4个局部组成，那么它们是怎样来定义的，每个组成局部的属性用法又是什么？ Content（内容区）：它是整个元素的宽和高，是属于元素内容的区域 border（边框）：它是盒子的边缘既是边框 Padding（填充区）：它是盒子边框与内容之间的间距，或许说是父元素与子元素之间的内边距 Margin（外边距）：它是盒子边框以外的外边距，或许说是同辈元素之间的间距 border-width:1px; ：设置边框的宽度的，在设置边框宽度时会用到此属性默以为1px，在网页中很多润色性线条都是由边框来成功的，在给属性加值得时刻要求加上单位，如px（像素），-style:solid: ：设置边框的线型样式，边框线性也有多个值，如：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)-color:; ；设置边框的色彩，默以为彩色。

Border-style:none; ；敞开边框，在css样式中如盒子有繁多方向用不到边框可用此属性敞开边框 裁减：border-style:none;的运行场景：加了超链接的拔出图片，在IE低版本阅读器会出现边框。

处置方法：给img 这个标签减少border-style:none;。

边框有四个方向，必要时可独自设置一方向边框属性， 1：border-top: 上边框，可给边框设置宽度、线型、色彩。

2：border-right: 左边框，可给边框设置宽度、线型、色彩。

3：border-bottom: 底边框，可给边框设置宽度、线型、色彩。

4：border-left: 左边框，可给边框设置宽度、线型、色彩。

为盒子写边框属性时，为繁难书写，有复合式写法：1：border-top-width:10px ; 上边框的宽度 2：border-right-width:20px;左边框的宽度 3：border-bottom-width:30px; 下边框的宽度 4：border-left-width: 40px; 左边框的宽度 border-width:10px 20px 30px 40px; border-width 的复合式写法1：border-top-style:solid; 上边框的线型 2：border-right-style:dashed; 左边框的线型 3：border-bottom-style:double; 下边框的线型 4：border-left-style:dotted; 左边框的线型 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可独自设置一方向边框 border-style:solid dashed dotted double; border-style 的复合式写法1：border-top-color:#f00; 上边框的色彩 2：border-right-color:#ff0; 左边框的色彩 3：border-bottom-color:#00f; 下边框的色彩 4：border-left-color:#fff; 左边框的色彩 border-color:#f00 #ff0 #00f #fff; border-color 的复合式写法假设边框的属性值我用1、2、3、4、来替代，那么它们的复合式写法可有以下几种： 1：border:1；2；3；4； ：1、上 ；2、右 ；3、下； 4、左 2：border:1；2；3； ：1、上；2、左和右3、下 3：border:1；2； ：1、上和下；2、左和右 4：border:1； ：1、上、下、左、右 复合式写法：离开设置每个边的边框样式 1：border-top:#f00 solid 10px; 2：border-right:#0f0 dotted 20px; 3：border-bottom:#00f dashed 30px; 4：border-left:#fff double 40px; border：10px solid #ff0; 代表四个边框样式是一致的，最复合式的写法； 注：边框的大小，是会减少在元素原有大小之外的，会扭转元素原本的大小；也就是说边框是占位置的（在规范盒模型的状况下）。

可以用来管理父元素和子元素之间的位置相关 可以用来管理元素和内容之间的位置相关 再给盒子减少了padding值之后，padding值会把元素原有的盒子大小撑大，假设让元素原本盒子大小不变得话，要求在元素的宽高上减掉所加的padding值。

padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。

假设元素自身有背风景，那么背风景会延展到padding区域。

padding的经常使用方法 方法一：给盒子单个方向加padding值 1：padding-top:10px; 上填充 2：padding-right:10px; 右填充 3：padding-bottom:10px; 下填充 4：padding-left:10px; 左填充 方法二：给盒子一切方向加padding值（复合式写法） 1：padding： 1 2 3 4 ： 1、上；2、右；3、下；4、左 2：padding： 1 2 3 ： 1、上；2、左和右；3、下 3：padding： 1 2 ： 1、上和下；2、左和右 4：padding： 1 ： 1、上 、右、 下、 左 用来管理同辈元素之间的位置相关。

margin是显示在元素边框以外的空白区的，给元素加上的margin值是不要求减去的，而且margin属性的值可以施加负值。

方法一：给盒子单个方向加margin值 1：margin-top:10px; 上外边距 2：margin-right:10px; 右外边距 3：margin-bottom:10px; 下外边距 4：margin-left:10px; 左外边距 方法二：给盒子一切方向加margin值（复合式写法） margin：1 2 3 4 ：1、上；2、右；3、下；4、左 margin：1 2 3 ：1、上；2、左和右；3、下 margin：1 2 ：1、上和下；2、左和右 margin：1 ：1、上、右、下、左 在盒模型中margin属性除了可以设置外边距以外，还可成功元素水平居中：margin：0 auto；、margin-left:auto;、margin-right:auto;共三种属性值。

在盒模型中margin属性是可以写负值的，可以用此来成功元素位置调整，而且margin的值是不会影响到元素的实践大小，然而会影响到其他元素所占区域。

盒模型中假设给多个元素设置margin值，高低两个相邻元素之间的margin值会堆叠显示，会用相邻元素margin的最大值显示 在盒模型中当给元素里第一个子元素（块状元素）减少margin-top值的时刻，会失误的把这个margin-top值减少给父元素。

此条件建设在以后元素下没有浮动和边框的条件下。

这两种bug都可以用BFC处置，其中bug2给大家介绍几种方法： 方法1：给父元素减少overflow：hidden；属性（比拟好用） 方法2：给父元素减少边框 方法3：把元素中的margin属性改用padding属性 方法3：给父元素和子元素减少浮动属性 最后给大家揭示一下：margin就是用来管理同辈元素之间的位置相关；padding就是用来管理父子元素之间的位置相关。

规范盒模型和怪异盒模型区别就在于他们的组成局部 宽高组成content+padding+border+margin 元素宽度实践占有的位置大小：宽+左右padding+左右border+左右margin 元素高度实践占有的位置大小：高+高低padding+高低border+高低margin 元素的宽度：width（content+border+padding）+margin 属性：box-sizing: border-box（怪异盒模型）/content-box（规范盒模型） 相较而言，规范盒模型的组成属性是离开组成的，而怪异盒模型的content、border、padding属性可以看做一个组成局部，再加上margin属性由此导致了整个怪异盒模型 从盒模型的定义中咱们了解到了盒模型是由4个局部组成，那么盒子的大该如何计算呢？由定义咱们可以想到盒子的大小应该是：内容区（content）+填充区（padding）+边框（border）+外边距（margin）=盒子大小。

然而，在盒模型这四个属性中除了content属性其他属性值都有4个属性，那么盒子的宽矮小小可以用此方法计算： 由margin-left+border-left+padding-left+width(content内容元素的宽度)+padding-right+border-right+margin-right=元素的总宽度。

如下图2-1、2-2所示 图2-1 图2-2盒子元素的高度: 由margin-top+border-top+padding-top+height(content内容元素的高度)+padding-right+border-right+margin-right=元素的总宽度。

如下图2-3、2-4所示 图2-3图2-4作为一名新手，在H5中我只是初入，堪称是入门都没有踏进，所以在前面的日子里要求去致力生长，去拼搏，当然这些都是我团体的想法，此外感谢看到这里大佬和好友，在这里看了一段文言，由于自己文采并不是特意好，又是初入H5，所以文中有些不顺望大家体谅。

CSS新手入门笔记整顿：CSS盒模型

CSS新手入门笔记整顿：CSS盒模型详解

在CSS环球中，每个页面元素都被视为一个独立的盒子，这些盒子在页面空间中占据着特定的位置。

了解CSS盒模型至关关键，它由四个基本属性和两个辅佐属性组成，导致了元素的外观和规划。

外围的四个属性包括：

宽度和高度（width和height）是两个辅佐属性，用于定义盒子的尺寸。

例如，width: 100px; 和 height: 200px; 就会限定盒子的尺寸。

边框的语法更为粗疏，如 border: 1px solid red;，其中第一个值是宽度，第二个值是样式，第三个值是色彩。

而 border: 0 和 border: none 有所不同，前者仅设置边框宽度为0，后者则去掉一切边框。

内边距和外边距可以经过简写方式如 padding: 10px 20px 30px 40px; 或 margin: auto; 来设置。

外边距叠加，即两个元素的垂直外边距兼并，有助于管理元素间的规划，尤其在排版时显得尤为关键。

负外边距（negative margin）在特定状况下经常使用，如调整元素在个别文档流中的位置或处置浮动元素，其行为与正边距有所不同，要求依据详细场景灵敏运用。

总之，把握CSS盒模型是规划和设计网页的基础，经过了解并把握这些概念，新手可以更好地管理页面元素的外观和规划。