css盒子模型_m0_59737891的博客-程序员秘密

盒模型的认识

  1. 基本概念:标准模型+IE模型。 包括margin,border,padding,content
  2. 标准模型和IE模型的区别
  3. css如何设置获取这两种模型的宽和高
  4. js如何设置获取盒模型对应的宽和高
  5. 根据盒模型解释边距重叠
  6. BFC(边距重叠解决方案,还有IFC)解决边距重叠

一、基本概念:标准模型+IE模型

什么是盒模型:盒模型又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

由于IE盒模型的怪异模式,IE模型和标准模型的内容计算方式不同。

二、标准模型和IE模型的区别

IE模型和标准模型唯一的区别是内容计算方式的不同,如下图所示:

IE模型元素宽度width=content+padding,高度计算相同

标准模型元素宽度width=content,高度计算相同

三、css如何设置获取这两种模型的宽和高

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)。

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box设置为标准模型,它的元素宽度width=100px。


.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box设置为IE模型,它的元素宽度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

四、javascript如何设置获取盒模型对应的宽和高

  1. dom.style.width/height 只能取到行内样式的宽和高,style标签中和link外链的样式取不到。
  2. dom.currentStyle.width/height 取到的是最终渲染后的宽和高,只有IE支持此属性。
  3. window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9以上支持。
  4. dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9以上支持,除此外还可以取到相对于视窗的上下左右的距离

以上API在浏览器中测试过,有兴趣可以都试一下

五、外边距重叠

当两个垂直外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意:只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。

且看下面例子:

    <section id="sec">
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            #sec {
                background: #f00;
            }
            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="child"></article>
    </section>

这里父元素section的高度是多少呢,100px,但是我们给section设置overflow:hidden后高度就变成110px,这是为什么呢,其实这里我们给父元素创建了BFC。,什么是BFC,请看下面的介绍。

六 、BFC

BFC(Block Formatting Context)块级格式化上下文。
BFC决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当设计到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

BFC的原理(渲染规则)

  1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
  2. BFC的区域不会与浮动元素的布局重叠。
  3. BFC元素是一个独立的容器,外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
  4. 计算BFC高度的时候,浮动元素也会参与计算(清除浮动)

如何创建BFC

  1. overflow不为visible;
  2. float的值不为none;
  3. position的值不为static或relative;
  4. display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

说了这么多规则,放几个实类出来看看。

    <section id="margin">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #margin {
                background: pink;
                overflow: hidden;
            }
            p {
                margin: 15px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <p>4</p>
    </section>

请看这里的第二个p元素<p>2</p>他被一个父元素包裹,并且父元素有 overflow:hidden 样式,前面的如何创建BFC的第一条就说了 overflow:hidden 可以创建一个BFC。结果如下图所示。

我们看这里的2,它的上下外边距都没有与1和3发生重叠,但3与4外边距发生了重叠。这就解释了BFC创建了一个独立的环境,这个环境中的元素不会影响到其他环境中的布局,所以BFC内的外边距不与外部的外边距发生重叠。


再看看下面的列子:

    <section id="layout">
        <style media="screen">
            #layout {
                background: red;
            }
            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            #layout .right {
                height: 110px;
                background: #ccc;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

效果如下:

图8.BFC区域不与浮动元素布局重叠

写过前端页面的我们肯定遇到过这种情况,这里其实是浮动元素叠在 .right 元素的上面,如果我们想让.right元素不会延伸到 float元素怎么办,其实我们在.right元素上加 overflow:hidden (用其他的方式创建BFC也可以)创建BFC就可以解决。因为BFC不会与浮动元素发生重叠。

图9.增加BFC不与浮动元素重叠


还有一种情况很常见,就是由于子元素浮动,导致父元素的高度不会把浮动元素算在内,那么我们在父元素创建BFC就可以让可以让浮动元素也参与高度计算。

IFC这里就不介绍,大家可以自行搜索。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_59737891/article/details/119357616

智能推荐

示波器参数理解_【ql君】qlexcel的博客-程序员秘密_示波器参数详解

示波器的三个重要参数是:带宽、采样率、存储深度。1.带宽定义:示波器带宽的定义没有变,就是输入一个正弦波,保持幅度不变,增加信号频率,当示波器上显示的信号是实际信号幅度的70.7%(即3dB衰减)的时候,该对应的频率就等于示波器带宽。100MHz的带宽在测量100MHz的正弦波时,幅度会下降到原来的0.7,但是100mhz带宽的示波器不能测100mhz的方波,因为方波由基波和奇次谐

Tensorboard--模型可视化工具_小陈同学-陈百万的博客-程序员秘密_模型可视化工具

Tensorboard1.tensorboard in tensorflow1.1 tensorboard的启动过程1.2 tf.summary 可视化类型1.3 tf.summary 使用demo2.tensorboard in pytorch2.1 SummaryWriter 使用demotensorboard in tensorflow :tensorboard 是一套用于tensorflow训练过程可视化工具,能够可视化模型的结构,参数,损失函数等。最常用于记录训练过程中参数和损失函数值的变化,

第四代自动泊车从APA到AVP技术_wujianming_110117的博客-程序员秘密

第四代自动泊车从APA到AVP技术前言自动泊车是指汽车自动泊车入位不需要人工控制,系统能够自动帮你将车辆停入车位,在倒车入库中可谓是驾驶者的一项利器。当我们找到一个理想的停车地点,只需轻轻启动按钮、坐定、放松,其他一切即可自动完成。自动泊车技术同样适用于主动避撞系统,并最终实现汽车的自动驾驶。不同的自动泊车系统采用不同的方法来检测汽车周围的物体。 有些在汽车前后保险杠四周装上了感应器,它们既可以充当发送器,也可以充当接收器。这些感应器会发送信号,当信号碰到车身周边的障碍物时会反射回来。然后,车上的

mkdir() 与 mkdirs() 的区别_HD243608836的博客-程序员秘密

官方解释:boolean mkdir() 创建此抽象路径名指定的目录。boolean mkdirs() 创建此抽象路径名指定的目录,包括所有必需但不存在的父目录。我通过Demo通俗的解释一下:String path ="E:\\data\\a\\b\\c";Boolean result = new File(path).mkdir();System.out.println(...

python--__str__ 和__repr__的用法_ZongXin.Zhou的博客-程序员秘密

如:__init__和__str__还有 __repr__凡是以双下划线开头的。在满足某个条件的时候会自动调用,这个满足的条件我们可以成为调用时机具体如下列示例:class Dog(object): def __init__(self, name, age): self.name = name self.age = age # __str__的目标是可读性,或者说,__str__的结果是让人看的 def __str__(self): # 没有

随便推点

微信浏览器唤醒App_紫轩阁的博客-程序员秘密_微信浏览器打开app

实现效果如下图所示,顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝第三方平台跳转。html&lt;span @click="openAppClick" class="see-btn"&gt;打开APP&lt;/span&gt;jsopenclient(){ let ua = navigator.userAgent.toLowerCase(); //config 配置文件 JS 传递

网络编程课堂笔记_diaowei6622的博客-程序员秘密

网络编程软件开发架构c/s架构c:客户端s:服务端b/s架构b:浏览器s:服务端手机端:好像C/S架构比较火,其实不然,微信小程序,支付宝第三方接口都类似于b/s架构目的都在于统一接口,聚集用户群pc端:b/s比较火本质:b/s架构本质也是c/s架构客户端与服务端概念服务端:24小时不间断提供服务,谁来我就服务谁...

Android 应用(7)——untrusted_app访问底层硬件_横山郡守的博客-程序员秘密_untrusted_app

参考链接:https://blog.csdn.net/Sunxiaolin2016/article/details/91039775https://blog.csdn.net/scottmvp/article/details/115871037背景:用户自行开发的app需要访问底层serial port。我们开发的app在SELinux(或SEAndroid)中分为主要三种类型(根据user不同,也有其他的domain类型):1)untrusted_app 第三方app,没有Android平台签名

单元测试小记_markix的博客-程序员秘密

工具Junit:测试框架Mockito:模拟框架(模拟数据、模拟方法…)https://site.mockito.orgPowerMock:更强大的模拟框架(支持模拟静态方法、私有方法…)https://github.com/powermock/powermockJaCoCo:代码覆盖率统计工具https://www.jacoco.org/jacoco/index.html使用使用Mockito比如要测试Service类,则需要将service类中的dao给mock掉。@Inje

Ribbon 学习(二):Spring Cloud Ribbon 加载配置原理_布碗的博客-程序员秘密

说明在上一篇博文《Ribbon 学习(一):脱离 Eureka 使用 Ribbon》一文中,我简单介绍了在脱离 Eureka 时 Ribbon 的简单使用方式。在本篇博文中,我将继续通过源码来介绍 Spring Cloud Ribbon 的加载配置原理,了解 Ribbon Client 如何创建,以及 RequestTemplate 如何具有负载均衡的功能特性。在正文开始前,我们先回忆下在上篇博文中是如何使用 Ribbon 的。首先使用 @LoadBalanced 注解标注创建了 ResetTempla

VS2019打开项目,出现“无法找到 .NET Core SDK。请检查确保已安装此项且 global.json 中指定的版本(如有)与所安装的版本相匹配“的错误_搬运工甲的博客-程序员秘密

今天从GitHub上拉下来一个工程,正想要学习的时候,打开工程结果出现了 “无法找到 .NET Core SDK。请检查确保已安装此项且 global.json 中指定的版本(如有)与所安装的版本相匹配” 的报错,在经过一系列百度之后,得到最简单解决方案:使用cmd命令 dotnet --info 查看自己使用的SDK版本,然后直接找到项目中的 global.json 文件,右键打开,直接修改版...