CSS 框模型 盒子模型

最新推荐文章于 2021-10-24 15:46:26 发布
最新推荐文章于 2021-10-24 15:46:26 发布
阅读量385 收藏
点赞数
分类专栏： css 文章标签： CSS 框模型 盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangbaiwei/article/details/38417531
版权

w3c CSS 框模型 w3c手册

外边距：margin margin-top margin-right margin-bottom margin-left

内边距：padding

边框：border

高：height   宽：width

元素内容

结合下面标准盒子模型例图理解


盒子模型

盒子模型分为  IE模型 和 W3C模型

比较旧的IE浏览器是按IE标准盒子模型 

比较新的IE浏览器好像是支持w3c盒子模型  到底是IE几有兴趣可以去查查

读者仔细观察以下两副图 height 与 width 的长度范围就可以看出问题了


盒子模型的不同 引出兼容性的问题

解决 用<!DOCTYE>标签文档声明 可以查本博客的<!DOCTYE>标签讲解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这样IE浏览器（所有浏览器）都按照W3C盒子模型解析标签


哈米旺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习篇（五） 盒子模型（框模型）
豪阁的个人博客
03-25 430
盒子模型（box model），也可以叫框模型，是网页布局的基础，每个HTML元素都被表示为一个矩形盒子，盒子包含了它的内容（content）、内边距（padding）、边框（border）和外边距（margin），每部分都可以用一个或多个CSS属性来指定其大小、颜色等，可以参考下图： 1.内容盒子（content-box）由width和height来表示内容的宽度和高度，主要用来存放...
CSS基础知识 ==＞ 盒子模型,框模型
qq_43281459的博客
11-17 330
盒模型,盒子模型,框模型(box model) - CSS将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的合资后,对页面的布局就变成将不同的盒子摆放到不同的位置 - 每一个盒子都由以下几个部分组成: 内容区(content) 内边距(padding) ...
CSS学习摘要-盒子模型
夏虫不可语冰
06-01 2160
注：全文摘要自网络开发者网站，当然间隔也会整理一些思路和格式排版添加进去。 CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。在理解如何创建 CSS 布局之前，你需要理解框模型。 ...
CSS框模型 盒模型 Box Model
Patrick's 专栏
01-04 689
框模型是 CSS 的基础, 页面上每个元素都被看作矩形框, 这个框由(从内至外): 元素的内容填充- Padding 边框 - Border 空白边 - Margin 组成. 如图: 如果在元素上应用背景, 背景会应用于 内容和填充 组成的区域. 空白边是透明的, 可以为负值. 填充, 边框, 空白边 都是可选的, 默认值为 0. 但是可能会被 浏览器 的默认样式表
CSS基础知识------CSS框模型（盒子模型）
weixin_44821216的博客
06-18 264
css框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。 一些基本属性 边框颜色 属性 说明 border-top-color 上边框颜色 border-right-color 右边框颜色 border-bottom-color 下边框颜色 border-left-color 左边框颜色 border-col...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。这个模型将每个HTML元素视为一个矩形盒子，包含了内容区、内边距、边框和外边距四部分。 1. **内容区（Content Area）*...
CSS盒子模型是什么
09-24
CSS盒子模型是网页设计中一个基础且至关重要的概念，它帮助开发者理解和控制网页元素的布局。CSS（Cascading Style Sheet）是用来分离HTML或XML文档内容与其表现样式的一种语言，使得我们可以独立地调整内容的外观和...
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影...
框模型，盒子模型（Box Model）
faye_yang18的博客
06-01 821
在制作css样式之前，先来准备一份HTML结构代码，如下&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="css/box.css" rel="styles
CSS:盒子模型(框模型)
fly_fly_fly_pig的博客
08-20 225
盒子 css处理网页时,他认为每个元素都包含在一个不可见的盒子里. 盒子组成: 内容区(content) 内边距(padding) 边块(border) 外边距(margin):与其他盒子的距离 1.给盒子设置边框 为一个元素设置边框必须指定三个样式,缺一不可 border-width:边框宽度 border-color:边框颜色 border-style:边框的样式(实线还...
第六章:CSS框模型样式(box模型 \盒子模型)和CSS3
小宫主的博客
10-16 641
目录 1.学习和运用CSS框模型;  width属性：配置元素的内容在浏览器可视区域中的宽度。 min-width属性：配置元素的内容在浏览器可视区域中最小的宽度。 max-width属性：配置元素的内容在浏览器可视区域中最大宽度。 height属性：配置元素的内容在浏览器可视区域的高度。 框模型 2.用CSS配置宽度和高度; 3.用CSS配置边距、边框和填充； margin属性...
CSS盒子模型（框模型）
weixin_30945039的博客
08-07 109
一、如何理解盒子模型 盒子模型（框模型）是css部分非常重要的一部分知识，CSS在处理网页的时候，认为每个元素都处在一个不可见的盒子中。盒子模型的构想，把所有的元素都想象成盒子，那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。 CSS 盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、...
CSS盒模型【框模型】（详解）
weixin_46726346的博客
08-08 494
关于CSS的最后一点，就是盒模型了，也叫CSS的框模型。 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式，在之前
盒模型、盒子模型、框模型（box model）
m0_50693593的博客
10-24 2920
盒模型、盒子模型、框模型（box model） ——css将页面中的所有元素都设置为一个矩形的盒子 ——将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到 不同的位置 ——每一个盒子都由以下及部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin） 边框（border） 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小影响到整个盒子的大小 设置边框的三个样式：宽度（border-width）、颜色（border
CSS框模型(Box Model)初学理解
__Esc丶小晋的博客
02-27 1738
HTML中所有的元素都可以是一个框，css的框模型我觉得和table标签单元格挺像的，还是要拿这个图说明一下。 一个HTML页面中可以有很多元素，有很多div。 我这里的框暂时理解为一个装电视机啊或者显示器啊之类贵重物品，并且怕摔的箱子。只不过我们现在中的那个箱子是三维立体的，而css这里这个是二维平面的。 Margin：有多个这样的箱子，存放的时候可以挨着放，也可以隔开一段放一个。
css 标准盒子模型和ie盒子模型的区别和各自的特点
热门推荐
qq_37016928的博客
03-08 1万+
一、css 标准盒子模型css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：。图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。元素框的总宽度=width+paddi...
css盒子模型边框圆角矩形
最新发布
12-08
CSS盒子模型边框圆角矩形可以通过设置border-radius属性来实现。border-radius属性用于设置元素的圆角边框，其值可以是一个或多个长度或百分比值，用空格隔开。如果只指定一个值，则四个角都使用该值。如果指定两个值，则第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。如果指定三个值，则第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。如果指定四个值，则分别应用于左上角、右上角、右下角和左下角。 以下是一个CSS盒子模型边框圆角矩形的例子： ```html <!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 100px; background-color: #f2f2f2; border: 2px solid #ccc; border-radius: 10px; } </style> </head> <body> <div></div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值