CSS【详解】 标准盒模型 VS IE 盒模型

简介: CSS【详解】 标准盒模型 VS IE 盒模型

怎样才算一个盒子?

页面上的每个元素都可以看做一个盒子,但display为inline的内联元素,宽高由内容决定,无法设置宽和高。

盒子最重要的5个属性

  • width:内容的宽度(不是盒子的宽度)
  • height:  内容的高度(不是盒子的高度)
  • padding:内边距。
  • border:边框。
  • margin:外边距。

浏览器给<body>默认的外边距margin大小是8个像素

上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

CSS 盒模型 (标准盒模型)默认

标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width

background-color将填充所有border以内的区域。

一些元素,默认带有padding,比如ul标签,不加任何样式的ul,也是有40px的padding-left。

将标准盒模型修改为IE盒模型的方法: 给元素添加样式

box-sizing:border-box;

IE 盒模型

IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。

将IE盒模型修改为标准盒模型的方法: 给元素添加样式

box-sizing:content-box;

盒子占据的空间大小

宽度/高度 = content+padding+border+margin


目录
相关文章
|
3月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
102 2
|
1月前
|
前端开发 UED
CSS 盒模型
CSS盒模型是网页设计中一个重要的概念,它定义了HTML元素如何在页面上呈现及其相互关系。每个HTML元素都被视为一个矩形框,此模型涉及内容区、内边距、边框和外边距四个部分,通过控制这些部分的样式和布局,设计师可以实现多样化的页面效果。
|
3月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
33 1
|
3月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型:揭秘网页布局的终极神器!
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性,为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性,包括容器与项目属性,并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法,Flexbox 更加灵活且简化了样式设置,同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
59 1
|
3月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
44 0
|
3月前
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
41 0
|
3月前
|
前端开发
CSS盒模型揭秘:打造精美网页的不二法门
CSS盒模型揭秘:打造精美网页的不二法门
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
45 0
|
4月前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
50 0
|
4月前
|
前端开发 C++
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
css排版—— 一篇优雅的文章(中英文) vs 聊天框的特别排版
34 0

热门文章

最新文章