当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)
HTML 中如 等元素在网页上都是以一个方形盒子呈现,每个元素都叫做一个盒子,我们可以给这些盒子设置宽、高、内边距、外边距等参数来调整它们的表现样式。
CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素
元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 =元素的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度
border 具体样式属性
属性名 | 属性值 | 描述 | 实例 |
border-width | 正数px | 设置边框宽度 | border-width: 1px; |
border-style | 见属性值详解 | 设置边框样式 | border-style: solid; |
border-color | 16 进制、RGB、RGBA颜色形式, | 设置边框颜色 | border-color: #666666; |
border | width style color | 同时设置边框的宽度,样式,颜色 | border: 1px solid #666666; |
border-style 属性值
border-style 属性值 | 描述 | 实例 |
none | 默认值,不设置边框的宽度 | border-style: none; |
solid | 设置边框为单实线 | border-style: solid; |
dashed | 设置边框为虚线 | border-style: dashed; |
dotted | 设置边框为点线 | border-style: dotted; |
double | 设置边框为双实线 | border-style: double; |
boder 方位属性
属性名 | 属性值 | 描述 | 实例 |
border-top | width style color | 设置上边框的宽度,样式,颜色 | border-top: 1px solid #666666; |
border-right | width style color | 设置右边框的宽度,样式,颜色 | border-right: 1px solid #666666; |
border-bottom | width style color | 设置下边框的宽度,样式,颜色 | border-bottom: 1px solid #666666; |
border-left | width style color | 设置左边框的宽度,样式,颜色 | border-left: 1px solid #666666; |
border具体样式属性和 border 方位属性可以排列组合成 12 种设置边框的属性,分别为:
border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color 。
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
content,即实际内容,显示文本和图像
boreder,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成
padding,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响
margin,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域
上述是一个从二维的角度观察盒子,下面再看看看三维图:
下面来段代码:
盒子模型
当我们在浏览器查看元素时,却发现元素的大小变成了240px
这是因为,在CSS中,盒子模型可以分成:
默认情况下,盒子模型为W3C 标准盒子模型
标准盒子模型,是浏览器默认的盒子模型
下面看看标准盒子模型的模型图:
从上图可以看到:
也就是,width/height 只是内容高度,不包含 padding 和 border值
所以上面问题中,设置width为200px,但由于存在padding,但实际上盒子的宽度有240px
同样看看IE 怪异盒子模型的模型图:
从上图可以看到:
也就是,width/height 包含了 padding和 border值
在CSS 盒子模型定义里,对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这点会影响你的布局。
box-sizing 属性可以被用来调整这些表现:
语法:
box-sizing: content-box|border-box|inherit:
回到上面的例子里,设置盒子为 border-box 模型
盒子模型
这时候,就可以发现盒子的所占据的宽度为200px
给大家分享我收集整理的各种学习资料,前端小白交学习流程,入门教程等回答-下面是学习资料参考。
留言与评论(共有 0 条评论) “” |