【说说你对盒模型的理解】

简介: 【说说你对盒模型的理解】

首先我们需要知道的是盒模型是css中一个重要的概念,是网页设计中常用到的的css技术使用的一种思维模型。

盒模型分为两种:

==标准w3c盒子模型 ==

IE怪一个字模型

区别:

标准盒子模型:宽高度=content宽高度+padding宽高度+margin宽高度+border宽高度

怪异盒子模型:宽高度=content宽高+padding宽高

【注】:怪异盒子模型的content内容区域宽高包括padding+border

切换盒模型可以借助css3的box-sizing属性

  • box-sizing:content-box 是w3c盒子模型
  • box-sizing:border-box是IE盒子模型
  • box-sizing的默认是content-box

30b315a0ad7e4d5d8fe0b64ca4ad24a5.png

58bce2a82ef144a38ccf523a49aa7084.png

相关文章
|
23天前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
|
5天前
|
Web App开发 移动开发 前端开发
CSS 盒子模型(显示模式、盒子模型)
CSS 盒子模型(显示模式、盒子模型)
|
2月前
|
前端开发
盒子模型练习
盒子模型练习
15 0
|
2月前
|
前端开发
说说你对盒子模型的理解
该文介绍了CSS中的盒子模型,包括W3C标准盒子模型和IE怪异盒子模型。在标准模型中,元素宽度不包含padding和border,总宽度=width+padding+border+margin。而在IE怪异模型中,width和height包含padding和border,总宽度和高度仅加margin。CSS的box-sizing属性用于控制元素的盒模型,content-box遵循标准模型,border-box则类似IE模型。
|
24天前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
30 0
|
24天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
22 0
|
2月前
|
前端开发 容器
CSS Flex 弹性盒模型
当元素设置了display: flex样式时,表示当前元素开启了flex布局,这个元素成为一个 flex 容器(flex container)。这个元素不会脱离文档流,元素中的内容沿着两个轴的方向进行布局。 开启了flex布局的元素就是一个伸缩容器(flex 容器),伸缩容器中所有的子元素就是伸缩项目。
|
9月前
|
前端开发 开发者
标准盒子模型,与怪异盒子模型详解
标准盒子模型,与怪异盒子模型详解
110 0
|
9月前
|
前端开发 容器
Web前端 — CSS之盒模型 以及margin负值、塌陷重叠问题
Web前端 — CSS之盒模型 以及margin负值、塌陷重叠问题
37 0