首页 > 其他分享 >css盒子模型: 标准盒子模型和IE盒子模型(怪异盒子模型)

css盒子模型: 标准盒子模型和IE盒子模型(怪异盒子模型)

时间:2023-11-06 09:11:32浏览次数:28  
标签:盒子 border 模型 content width IE css

CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。

 

而盒模型又分为两类标准:标准盒子模型和IE盒子模型(怪异盒子模型)

 

在标准盒子模型中,盒子的width是指content的宽高,

 

而IE盒子模型中就比较怪异了,它包含了content、border和padding的距离。

 

即它们的主要区别在于width和height的计算方式的不同。

 

标准盒子模型:盒子的总宽度 = margin+border+padding+width

 

 

 

        width      = content的宽度

 

 

 

 IE 盒子模型  :  盒子的总宽度 = margin+width

 

 

 

        width      = content的宽度+border边框宽度(左右)+padding内边距(左右)   

 

 

 

 

标签:盒子,border,模型,content,width,IE,css
From: https://www.cnblogs.com/muxiyeyu/p/17811788.html

相关文章

  • Laravel模型关系 一对一深入研究
    一,主表book classBookextendsModel{//protected$fillable=['title','price','num'];publicfunctionbookCard(){return$this->hasOne(BookCard::class);}}二,关联表bookcardclassBookCardextendsModel{//protecte......
  • Laravel简单模型使用
    1,创建模型phpartisanmake:modelBook-m创建模型book并生成迁移文件2,Book迁移文件publicfunctionup(){Schema::create('books',function(Blueprint$table){$table->increments('id');$table->string('title');$ta......
  • 如何借助数据集更好的评估NLP模型的性能?
    随着信息时代的迅猛发展,每天有无数文本、声音、图片和视频不断涌入互联网。如何从海量数据中提炼有意义信息成为学术界和工业界迫切需要解决的问题。在此背景下,自然语言处理(NLP)应运而生,成为人工智能领域最为活跃的研究领域之一。NLP的目标是让计算机理解和生成人类语言,从而实现与人......
  • css:元素居中整理水平居中、垂直居中、水平垂直居中
    目录1、水平居中1.1、行内元素1.2、块级元素2、垂直居中2.1、单行文字2.2、多行文字2.3、图片垂直居中3、水平垂直居中参考文章1、水平居中1.1、行内元素行内元素(比如文字,span,图片等)的水平居中,其父元素中设置text-align:center;示例<style>body{background-color:#e......
  • css:transform实现平移、旋转、缩放、倾斜元素
    目录文档语法示例旋转元素transform-rotate旋转过渡旋转动画参考文章文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform语法/*Keywordvalues*/transform:none;/*Functionvalues*/transform:matrix(1,2,3,4,5,6);transform:translate(12px,50......
  • java IO模型:AIO(Asynchronous I/O)
    AIO也就是NIO2。Java7中引入了NIO的改进版NIO2,它是异步IO模型。异步IO是基于事件和回调机制实现的,也就是应用操作之后会直接返回,不会堵塞在那里,当后台处理完成,操作系统会通知相应的线程进行后续的操作。目前来说AIO的应用还不是很广泛。Netty之前也尝试使用过AIO......
  • java IO模型:BIO(Blocking I/O)
    BIO属于同步阻塞IO模型。同步阻塞IO模型中,应用程序发起read调用后,会一直阻塞,直到内核把数据拷贝到用户空间。在客户端连接数量不高的情况下,是没问题的。但是,当面对十万甚至百万级连接的时候,传统的BIO模型是无能为力的。因此,我们需要一种更高效的I/O处理模型来应对更高......
  • Pytorch 模型文件后缀名含义
    目前常见的几种pytorch模型后缀名有:.pt.pth.bin.onnx 其实,.pt.pth.bin这三个后缀都是人为指定的,在保存模型的时候没有区别,但用不同后缀是为了方便区分它们所储存的内容,相当于是个标记:格式解释适用场景可对应的后缀.pt或.pthPyTorch的默认模型文件......
  • css常见的居中操作(一)
    原创声明:本文所有图片和代码皆由本人制作和编写。目录目标当前html毛坯房方法一纯CSS2第0步排版之前的一些css基本设置第1步图标与文字对齐第2步把li居于ul的垂直中部且均匀分布第3步li的子内容水平居中于li方法二使用CSS3的flex第0步排版之前的一些css基本设置第1步图......
  • [CSS]关于<img>标签距离底部盒子5px的问题
     问题描述:在某个盒子内部放入一个<img>标签,不写样式的情况下,<img>总是和父盒子有5px空隙。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除图片多5px问题</title><linkrel="stylesheet"......