盒子模型的理解

盒子模型有两种:w3c和ie盒子模型

盒子模型包括margin、border、padding、content

W3C的元素宽度=content的宽度

IE的元素宽度=content+padding+border

 

我个人认为W3C定义盒子模型与IE定义的盒子模型,IE定义的比较合理,

元素的宽度应该包含border(边框)和padding(填充),这个和我们现实生活的盒子是一样的,

W3C也认识到自己的问题了,所以在CSS3中新增了一个样式box-sizing,

包含两个属性content-box 和 border-box。

 

content-box  :  width=content+padding+border

border-box:     width=width(样式指定的宽度)

1.对于行级元素,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

 1) 都是正数: 取最大值   距离=Math.max(margin-botton,margin-top)

  2) 都是负数: 取最小值   距离=Math.min(margin-botton,margin-top)

  3)上面是正数,下面是负数或者 上面是负数,下面是正数: 正负相加   距离=margin-botton+margin-top

以上就是盒子模型的理解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2910988.html

(0)
上一篇 2025年3月11日 04:38:58
下一篇 2025年2月28日 03:34:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 弹性盒模型 flex box的认知与使用

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项。而因为最近在研究小程序,发现中间使用弹性盒子布…

    2025年3月11日 编程技术
    200
  • CSS3 Flexbox该怎么使用?

    文章来源: 一、前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS3 的规范终于普及 ( 或 …

    2025年3月11日 编程技术
    200
  • HTML5盒子模型的使用方法

    盒子模型。 盒子由 margin、border、padding、content 四部分组成。 margin :外边距 立即学习“前端免费学习笔记(深入)”;   border:边框   padding:内边距 (内容与边框的距离)   co…

    2025年3月11日 编程技术
    200
  • 弹性盒模型-容器属性的理解

      布局的传统方案,基于盒装模型,依赖display属性+position属性+float属性。他对于那些特殊的布局非常不方便,比如,垂直居中就不容易实现。  2009年,w3c提出了一种新的方案—-flex布局,可以简便、完整、响应式地实…

    2025年3月11日 编程技术
    200
  • css如何让盒子浮动

    css让盒子浮动的方法:可以利用float属性来实现,如【float: left;】。float属性可以让多个盒子水平排列成一行、居左或居右,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定。 盒子的浮动 在标准流中,一个块级元素在水…

    2025年3月10日
    200
  • css怎么给一个盒子加盒阴影

    css给一个盒子加盒阴影的方法:可以利用box-shadow属性来添加盒阴影,如【box-shadow: 10px 10px 5px #888888;】。box-shadow属性可以设置一个或多个下拉阴影的框。 box-shadow属性可以…

    2025年3月10日
    200
  • 了解静态重定位发生的时间点

    理解静态重定位的发生时刻,需要具体代码示例 摘要: 静态重定位是计算机程序在编译过程中根据实际内存地址进行的一项操作。本文将通过具体的代码示例,介绍静态重定位的发生时刻及其实现方式。 引言:在计算机程序编写过程中,程序的代码段和数据段通常是…

    2025年3月10日
    200
  • 解析HTTP状态码的意义和作用

    HTTP(Hypertext Transfer Protocol)是一种用于在网络中传输超文本的应用层协议。在HTTP协议中,服务器和客户端之间通过交换消息来完成数据通信。在客户端向服务器发送请求并得到响应时,服务器会通过HTTP状态码来表…

    2025年3月9日
    200
  • 发掘sessionstorage的潜力:它对我们有何用处?

    理解SessionStorage:它能为我们做什么? 随着前端技术的快速发展,现代Web应用程序需要在用户的浏览器端存储和管理大量的数据。为了满足这个需求,HTML5引入了一种被称为SessionStorage的Web存储方案。本文将探讨S…

    2025年3月9日
    200
  • 理解浏览器中cookie的存放位置

    在现代互联网时代,cookie作为一种重要的网页信息存储方式,经常被互联网应用所使用。那么,什么是cookie?它是如何工作的?cookie在浏览器中的存放位置又是如何呢?让我们一起来深入了解吧。 首先,cookie是一种存储在用户浏览器中…

    2025年3月9日
    200

发表回复

登录后才能评论