css盒子模型的深化了解 在块级 行内元素的区别和特性 (css盒子模型从外到内的顺序)

本文目录导航：

• css盒子模型的深化了解，在块级、行内元素的区别和特性
• 在实践上班环节中罕用什么成功盒子
• 盒子模型引见

css盒子模型的深化了解，在块级、行内元素的区别和特性

盒子模型用于处置元素的内容、内边距、边框和外边距的方式简称。

元素框的最外局部是实践的内容，间接解围内容的是内边距。

内边距出现了元素的背景。

内边距的边缘是边框。

边框以外是外边距，外边距自动是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，自动值是零。

然而，许多元素将由用户代理样式表设置外边距和内边距。

可以经过将元素的 margin 和 padding 设置为零来笼罩这些阅读器样式。

CSS成功页面规划的一种思维：把页面的一切元素都看成一个相似于礼品盒的盒子，礼品盒或许会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。

这里特意提示一下，盒模型是要把元素看成平面的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。

目前有： 规范盒子模型和IE盒子模型2种盒模型 ，区别在于：

为了满足跨阅读器的差异，咱们比拟必需的方式是经常使用规范盒模型，这里经过在网页顶部参与DOCTYPE的申明，来处置跨阅读器兼容打算（或许经常使用css3的申明方式）：

块级元素会独占一行,自动状况下,其宽度智能填满其父元素宽度。

行内元素不会独占一行,相邻的行内元素会陈列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变动，另外

块级元素：div, p, form, ul,li ,ol, dl,form, address,fieldset,hr, menu,table...

行内元素(内联元素)：a , span, strong, em, br ,img ,input,label,select,textarea,cite....

假构想让一个元素可以设置宽度高度，又让它以行内方式显示，咱们可以设置display的值为inline-block。

CSS3参与的box-sizing属性,准许咱们规则元素经常使用哪种盒模型。

IE8及以上版本支持该属性，Firefox 要求加上阅读器厂商前缀-moz-，关于低版本的IOS和Android阅读器也要求加上-webkit-。

它具备有3个属性值：

box-sizing:content-box： W3C规范盒模型，自动属性。

padding和border不被蕴含在定义的width和height之内。

box-sizing:border-box： IE6混同形式盒模型， padding和border被蕴含在定义的width和height之内。

此属性体现为怪异形式下的盒模型。

box-sizing：inherit ：从父级元素中承袭该属性。

假设设置box-sizing：border-box来经常使用IE6混同盒模型 ，那么

设置padding与border后，内容区的宽度和高度被紧缩为70px 70px,盒子的原尺寸依然是100px 100px

当一个容器宽度定义为 width:100%; 之后，假设再参与 padding 或许 border 则会溢出父容器，是向外扩张的。

假设经常使用该样式，指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出，而是向内收缩的，这个成果是十分适用的。

在实践上班环节中罕用什么成功盒子

在实践上班环节中，罕用Div元历来成功盒子。

在网页设计和开发中，盒子模型是一个基础且关键的概念。

这个模型选择了元素如何占据空间，以及它们之间的相对位置和交互方式。

Div元素，作为HTML中的一个基础标签，被宽泛用于创立这样的盒子。

Div元素自身并不代表任何不凡的意义，它只是一个通用的容器，可以经过CSS来赋予样式和行为。

经常使用Div元素成功盒子具备极大的灵敏性和可裁减性。

例如，经过设置div的宽度、高度、内边距、边框和外边距，可以准确地管理盒子的外观和位置。

同时，div可以容纳其余HTML元素，包括文本、图片、列表等，这使得它成为构建复杂网页规划的现实选用。

此外，配合CSS3的动画和过渡成果，div元素还能成功丰盛的交互体验。

举例来说，在构建一个照应式网站时，咱们或许会经常使用多个div元历来划分页面的不同区域，如头部、导航、主体内容和页脚。

每个div都可以依据屏幕大小和设施类型来调整其样式和规划，以确保网站在各种环境下都能出现出最佳的用户体验。

同时，经过JavaScript等脚本言语，咱们还可以灵活地修正div的内容和行为，从而成功愈加复杂和共性化的网页配置。

综上所述，Div元素因其弱小的容纳性、可塑性和交互性，成为实践上班环节中成功盒子的首选工具。

无论是在静态网页还是灵活运行中，div都施展着无足轻重的作用，协助开发者高效地构建出好看且配置丰盛的网页界面。

盒子模型引见

概念： 盒子模型（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已久的一些传统规划疑问，例如安顿一系列弹性等宽容器或许垂直居中内容。