盒子模型

盒模型(box model)是CSS中的一个重要概念,它是元素大小的呈现方式。需要记住的是:"every element in web design is a rectangular box"。在此我们根据box-sizing的常用值来描述盒模型。

**box-sizing **属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

content-box

默认值,标准盒子模型。 width与height只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。 布局所占宽度Width: Width = width + padding-left + padding-right + border-left + border-right 布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom

border-box

width和height属性包括内容,填充和边框,但不包括边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。 布局所占宽度Width: Width = width(包含padding-left + padding-right + border-left + border-right) 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

20550
来自专栏九彩拼盘的叨叨叨

让内容恰好占一屏,适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏,并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意,直接谈如何实现。

12330
来自专栏用户画像

图片 垂直居中

9420
来自专栏7号代码

Android应用界面开发——布局

线性布局可以控制各组件横向排列(通过设置属性android:orientation属性控制),也可控制各组件纵向排列。

23520
来自专栏互联网开发者交流社区

HTML超文本标记语言-基础标签整理

33340
来自专栏一个爱瞎折腾的程序猿

自定义滚动条样式(layui.v1)

77610
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

11420
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

360100
来自专栏谈补锅

CSS笔记

@import url(xx.css): 在一个css中,添加对其他css文件的引用

18140
来自专栏CaiRui

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px...

19370

扫码关注云+社区

领取腾讯云代金券