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

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

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

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

热门文章

最新文章