专栏首页FinGet前端之路盒模型和box-sizing

盒模型和box-sizing

标准盒模型(w3c标准)

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

在标准盒模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

在标准盒模型中:盒子占位width = width + 2margin + 2padding + 2border,高度与之一样。 盒子真正德width = width + 2padding + 2*border。 margin不算!margin可以改变盒子占位的大小,但是盒子的宽高并没有改变,而是位置的改变!

根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

怪异盒模型

ie 盒子模型的 content 部分包含了 border 和 pading

要让网页按标准盒模型去解析,则需要加上 doctype声明,否则不同的浏览器会按照自己的标准去解析。

box-sizing

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

box-sizing类似于ie盒模型,它会把内边距和边框包含在width内。在实际工作中,我们设置一个固定宽度的盒子,但当给它设置paddingborder之后,它的真正宽度就会改变。这时box-sizing就派上用途了。它会自动调整内容的宽度,保证盒子的真正宽度还是我们设置的宽度。

可以查看实例:box-sizing实例

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • win10下安装配置mongodb

    mongod --config c:\MongoDB\etc\mongo.conf --install --serviceName "MongoDB"

    FinGet
  • 长期维护更新,前端面试题

    HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中,甚至可以创建图表...

    FinGet
  • JavaScript从初级往高级走系列————prototype

    在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。

    FinGet
  • ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint......

    今天用Hibernate建立外键的时候发现没有建立 但是创建了这个字段 情景: user表有一字段role,role是role表id字段的外键 原因...

    用户1174983
  • Milvus 实战 | 基于 Kubernetes 的分布式集群部署方案

    Milvus 作为一款针对海量特征向量的相似度搜索引擎,在单台服务器上就可以处理十亿级数据规模。而对于百亿或者千亿级数据,则需要具有水平扩展能力的 Milvus...

    ZILLIZ
  • C++智能指针简单剖析

    http://blog.csdn.net/lanxuezaipiao/article/details/41603883

    bear_fish
  • 如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

    相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众...

    程序猿DD
  • 【机器学习 基本概念】泊松分布与指数分布

    工作以后才发现,难的不是统计学,而是我们的教材写得不好。比起高等数学,统计概念其实容易理解多了。

    魏晓蕾
  • Django 2.1.7 Celery 4.3.0 示例,解决Task handler raised error: ValueError('not enough values to unp...

    原文地址:Django 2.1.7 Celery 4.3.0 使用示例,解决Task handler raised error: ValueError('not...

    Devops海洋的渔夫
  • 泊松分布和指数分布:10分钟教程

    大学时,我一直觉得统计学很难,还差点挂科。 工作以后才发现,难的不是统计学,而是我们的教材写得不好。比起高等数学,统计概念其实容易理解多了。 ? 我举一个例子,...

    ruanyf

扫码关注云+社区

领取腾讯云代金券