精华内容
下载资源
问答
  • 两种盒子模型

    2021-04-05 17:03:48
    CSS盒子模型(Box model)是利用CSS技术进行网页设计时所使用的一思维模型。 它将网页中的每个元素都看成一个盒子,每个盒子具备以下四个属性: margin(外边距) padding(内边距) border(边框) content(内容) ....

    一、什么是盒子模型

    CSS盒子模型(Box model)是利用CSS技术进行网页设计时所使用的一种思维模型。
    它将网页中的每个元素都看成一个盒子,每个盒子具备以下四个属性:

    • margin(外边距)
    • padding(内边距)
    • border(边框)
    • content(内容)

    一个盒子的宽度 = content + padding + border + margin;


    二、W3C标准盒子模型

    标准模式下,我们所定义的widthheight为content的宽和高,如图所示:

    	div{
                width: 100px;
                height: 50px;
                padding: 10px;
                border: 1px solid black;
                margin: 20px;
           }
    

    此时,一个盒子的宽度 = width + padding + border + margin;


    三、CSS3 box-sizing

    CSS3中可以通过box-sizing改变渲染方式,它有以下三个属性:

    	box-sizing: content-box; 	/* 1. 将采用标准模式的盒子模型标准(默认) */
    	box-sizing: border-box; 	/* 2. 将采用怪异模式的盒子模型标准 */
    	box-sizing: inherit; 		/* 3. 规定应从父元素继承 box-sizing 属性的值 */
    

    四、IE怪异盒子模型

    怪异模式下,我们所定义的widthheight为content + padding + border的宽和高,如图所示:

    	div{
                width: 100px;
                height: 50px;
                padding: 10px;
                border: 1px solid black;
                margin: 20px;
                box-sizing: border-box;
           }
    

    此时,一个盒子的宽度 = width + margin;


    五、总结

    1. IE5.5及更早的版本使用的是IE盒模型,IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。
    2. 为兼容性考虑,只要为文档设置一个DOCTYPE,就会使得IE遵循W3C的标准进行渲染。
    3. 标准模式下盒子会被设置的padding撑开,而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子,盒子的大小并不会被padding所撑开。所以在一些场景下利用怪异模式渲染更合适。
    展开全文
  • 两种盒子模型区别

    2021-06-03 18:26:33
    W3C 标准盒模型 box-sizing=“content-box”; 当我们对一个元素设置他的 width 和 height 的时候,标准盒模型只是对 ...当我们对一个元素设置它的 width 和 height的时候,怪异盒模型把整个盒子看成是一

    W3C 标准盒模型

    box-sizing=“content-box”;
    当我们对一个元素设置他的 width 和 height 的时候,标准盒模型只是对content 设置了宽 高,那么这个元素真正的宽高就还要加上他的 padding,border,margin。

    公式:

    • width = 内容的宽度
    • height = 内容的高度

    IE 盒模型(怪异盒模型)

    box-sizing=“border-box”;
    当我们对一个元素设置它的 width 和 height的时候,怪异盒模型把整个盒子看成是一个整 体。对整个盒子设置宽高,同时再设置额外的边距和边框时,
    中间的 content 就要受到挤压,变小。

    公式:

    • width = border + padding + 内容的宽度
    • height = border + padding + 内容的高度
    展开全文
  • CSS两种盒子模型

    2021-07-30 10:59:32
    这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容 CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容 切换两种盒子模型的方法 标准盒子模型 box-sizing:...

    所有HTML元素可以看作盒子,无论是div、span、还是a都是盒子。但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容

    CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容

    切换两种盒子模型的方法

    标准盒子模型
    box-sizing: content-box 
    IE盒子模型
    box-sizing: border-box
    

    两种盒模型的区别:宽度和高度的计算方式不同

    标准盒子模型(W3C盒子模型):
    宽度/高度 = 内容的宽度/内容的高度

    IE盒子模型(怪异盒子模型):
    宽度/高度 = 内容的宽度/内容的高度 + 填充的宽度/填充的高度 + 边框的宽度/边框的高度

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • CSS的两种盒子模型

    2021-03-21 22:31:38
    css的两种盒子模型 1.w3c标准盒模型(标准盒子模型) 2.IE盒模型(怪异盒子模型) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta ...

    css的两种盒子模型

    1.w3c标准盒模型(标准盒子模型)

    2.IE盒模型(怪异盒子模型)

    1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <title>两种盒子模型</title>
     8 </head>
     9 <style>
    10     .box1 {
    11         text-align: center;
    12         box-sizing: content-box;
    13         width: 100px;
    14         height: 100px;
    15         background-color: rgb(253, 150, 53);
    16         padding: 5px;
    17         border: 10px solid rgb(86, 247, 22);
    18         margin: 15px;
    19     }
    20     .box2 {
    21         text-align: center;
    22         box-sizing: border-box;
    23         width: 100px;
    24         height: 100px;
    25         background-color: violet;
    26         padding: 5px;
    27         border: 10px solid rgb(22, 247, 228);
    28         margin: 15px;
    29     }
    30 </style>
    31 <body>
    32     <div class="box1">box1</div>
    33     <div class="box2">box2</div>
    34 </body>
    35 </html>
    

    上面代码运行结果,可以看见两个div是不一样大的,主要是两种盒模型的计算方式不一样

    在这里插入图片描述

    类名为box1的div宽为130px,高为130px
    这就是普通盒模型,它的宽计算为margin-left+border-left+padding-left+content+padding-right+border-right+margin-right
    在这里插入图片描述在这里插入图片描述

    类名为box2的div宽为100px,高为100px
    这就是IE盒模型,它的宽的计算为100px=margin-left+border-left+padding-left+content+padding-right+border-right+margin-right
    在这里插入图片描述
    在这里插入图片描述
    在标准的盒子模型中,width指content部分的宽度
    在IE盒子模型中,width表示content+padding+border这三个部分的宽度
    css3的box-sizing属性是决定盒子类型
    box-sizing的默认值是content-box
    box-sizing: content-box 是W3C标准盒子模型
    box-sizing: border-box 是IE盒子模型

    展开全文
  • 使用box-sizing属性可以改变盒子模型,content-box的盒子是默认盒子模型 布局如下: 从里到外的属性依次是:width height、padding、border、margin width、height,宽高指盒子内容的宽高。 padding是在内容...
  • 模型 2.如何实现一个最大的正方形 3.一行水平居中,多行居左 4.水平垂直居中 5.栏布局,左边固定,右边自适应,左右不重叠 6.如何实现左右等高布局 7.画三角形 8.link @import导入css 9.BFC理解 … JavaScript...
  • 浅谈前端两种模型

    2021-02-25 20:43:41
    先说说一个盒子的结构:由content+padding+border+margin组成 先说说标准盒模型的宽高怎么计算: 元素宽度 = borderLeft + paddingLeft + width + paddingRight + borderRight 元素高度=borderTop+paddingTop+...
  • 7、CSS盒子模型 7.1、盒子模型 页面布局要学习的三大核心,盒子模型 , 浮动 和 定位 。学习好盒子模型能非常好的帮助我们布局页面。 7.1.1、看透网页布局的本质 网页布局过程; 1.先准备号相关的网页元素,网页元素...
  • Css的两种模型

    2021-09-15 19:09:12
    在描述盒子模型前先来介绍一下盒子的一些属性。 盒子通常指的是块元素(但是行内元素在浏览器的查看器内也会出现盒子模型的图片),一个完整的盒子由四个部分组成,它们分别是: margin 外边距 代表盒子四周的...
  • CSS 盒子模型

    2021-08-04 05:32:08
    盒子模型(Box Model)一般的标签都是盒子,但是除了极个别的标签(例如:img、input标签)不是盒子盒子模型的属性width 盒子内容的宽度height 盒子内容的高度margin 盒子的外边距padding 盒子的内边距border 盒子的边框...
  • css盒子模型是什么?毕竟在学习css时经常可以看到css盒子模型,所以,接下来的这篇文章php中文网就跟大家来谈一谈css盒子模型的概念以及对css盒子模型的理解。首先,我们来看一看css盒子模型是什么?从百度百科上...
  • 其实盒子模型两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型浏刚学互久维数曾总屏果以。公实式带近览开会。后护一相结蔽为我最司现幻的近览开会。...
  • CSS盒模型分为两种:标准盒模型、IE盒模型(也成为怪异盒模型)。 两种模型的区别在于他们的总宽度的计算公式不一样。 在文档首部加了 <!Doctype html>声明,即使用标准盒模型,若不加,则会由浏览器自己...
  • 两种模型

    2020-12-31 21:14:18
    1、标准盒模型 元素的width=内容的width。 2、IE盒模型 元素的width=内容的width+padding+border。...3、切换两种模型方法 box-sizing: content-box;//标准盒模型(默认) box-sizing: border-box;//IE盒模型
  • CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
  • 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复。以前刚开始学习盒模型的时候,就学到的是IE的盒模型不规范,不符合标准的盒模型,要加文档申明把IE的转换为标准的。...
  • (1)盒模型的概念:CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性:border:元素的边框(可能不可见),...
  • css盒子模型有几

    2021-05-03 09:11:39
    网页设计中常听的属性名:内容(content)、内边距...CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这...
  • div盒子模型实例

    2021-06-11 13:05:14
    CSS盒子模型就是在CSS技术所使用的一思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性,可极大地...
  • IE盒子模型和标准W3C盒子模型...其实盒子模型两种,分别是 IE 盒子模型和标准 W3C 盒子模型盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型是CSS中一个重要的概念,理解了盒子模型...
  • 博学谷——让IT教学更简单,让IT学习更有效PAGE 12PAGE 1《HTML+CSS+JavaScript网页制作案例教程》... 某某老师201 年 月 日课题名称第4章 CSS盒子模型计划课时8课时内容分析盒子模型是CSS网页布局的基础,只有掌握...
  • 目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效...盒子模型css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型。标准盒子模型...
  • HTML5盒子模型

    2021-06-13 01:32:19
    盒子模型。盒子由 margin、border、padding、content 四部分组成。margin :外边距border:边框padding:内边距 (内容与边框的距离)content:内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: ...
  • CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F12打开开发者工具我们能...
  • 浅谈Css3两种模型

    2021-01-25 14:11:28
    W3C盒子模型(标准的盒模型) 宽度和高度的计算 标准盒模型: width = content-width height = content-height IE盒模型(怪异盒模型) 怪异盒模型: width = content-width + padding-width + border-width ...
  • 所谓盒子模型(Box Model)就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都是由元素的内容(content)、内边距(padding)、...css的盒子模型包括IE盒子模型(怪异模型) 和 标准
  • css 盒子模型理解

    千次阅读 2021-01-17 14:56:36
    盒子模型是html+css中最...一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:图中最内部的框是元素的实际内...
  • html 盒子模型

    2021-06-13 06:05:43
    盒子CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。...盒子模型一个盒子我们会分成几个部分:内容区(content)内边距(padding)边框(border)外边距(margin)捕获.PNG内容区内容区指的是盒子中放置内...
  • 盒子模型的理解

    2021-06-13 10:00:25
    (整理自网络)1、盒子模型两种,W3C和IE盒子模型(padding-border-margin模型)从直观上而言,margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画,那么content就是画面本身,padding就是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,460
精华内容 18,184
关键字:

两种盒子模型