CSS(标准盒子模型和怪异盒子模型---参考了其他文章)
一、什么是盒子?
(1)它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
(2)css中的盒子模型它是可以对元素进行布局,设置距离的大小,这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、什么是盒子模型?
(1)CSS中的标准盒子模型(W3c标准的盒子模型)
文章图片
图中的width只包含content的width,
* 触发条件:标准盒模型的css属性设置是box-sizing:content-box
(2)怪异盒子模型(IE标准的盒子模型)
文章图片
图中的width包含content的width + 左右padding + 左右border
【CSS(标准盒子模型和怪异盒子模型---参考了其他文章)】怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。
* 触发条件:
* 1.怪异盒模型的css属性设置是box-sizing:border-box
* 2.文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 活跃社群的核心标准是什么()
- 今日份H5
- 3.css浮动
- 选老公的标准障碍了我看男盆友的眼
- 世界脑力锦标赛官方公布2018年世界记忆大师新评定标准!
- 《如何高效学习》(你的大脑是一只盒子,还是一张大网())
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏