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

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

首先我们需要知道的是盒模型是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

相关文章
|
2月前
|
前端开发
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
本文介绍了CSS盒子模型的基本概念,包括内容、内边距、边框和外边距的属性,以及标准盒子模型和怪异盒子模型的区别和转换方法。
42 1
前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
|
2月前
|
容器
认识盒子模型
认识盒子模型。
45 2
|
4月前
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
44 0
|
5月前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
77 6
|
5月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
46 0
|
5月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
68 0
|
6月前
|
前端开发
盒子模型练习
盒子模型练习
24 0
|
6月前
|
前端开发
说说你对盒子模型的理解
该文介绍了CSS中的盒子模型,包括W3C标准盒子模型和IE怪异盒子模型。在标准模型中,元素宽度不包含padding和border,总宽度=width+padding+border+margin。而在IE怪异模型中,width和height包含padding和border,总宽度和高度仅加margin。CSS的box-sizing属性用于控制元素的盒模型,content-box遵循标准模型,border-box则类似IE模型。
|
前端开发 开发者
标准盒子模型,与怪异盒子模型详解
标准盒子模型,与怪异盒子模型详解
163 0