CSS中的标准盒子模型和怪异盒子模型
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧!
生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着。
模型是什么呢?
它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
css中的盒子模型它是可以对元素进行布局,设置距离的大小,这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件,在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。
来看看我们的标准盒子模型图吧!
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
2、标准盒子模型的计算
标准的盒子模型的大小是:content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距);
注:标准盒子的初始设置宽高大小不包含padding、border和margin的大小。
三、怪异盒子模型(IE标准的盒子模型)
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。
怪异盒子(IE盒子模型)的触发条件:
(1) 给元素添加CSS3属性box-sizing:border-box; (注:所以如果用CSS3新属性,就不要考虑低版本浏览器了)
(2)文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。
2、怪异盒子(IE盒子模型)模型的计算
如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是:content(区域内容大小)+margin(外边距);
注:怪异盒子的初始设置宽高大小包含padding、border大小在内,但不包含margin的大小。
CSS中的标准盒子模型和怪异盒子模型相关推荐
- css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
- 标准盒子模型与怪异盒子模型
通俗的讲,盒模型是css布局的基础,它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系,css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区.补白(填充).边框.边界( ...
- 标准盒子模型和怪异盒子模型(详解)
一.盒子模型定义 盒子模型是css技术所使用的一种思维模型.盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子.每个矩形盒子都由内容.内边距.边框和外边距4个部分组成.除去内容部分,其 ...
- 前端基础(八)_盒子模型(标准盒子模型和怪异盒子模型)
盒子模型 什么是盒子模型 网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
- 【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图 标准盒子模型 和IE盒子模型 什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
- 盒子模型(标准盒模型、怪异盒模型)
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域 二.盒模型的分类: 1.W3C盒 ...
- 盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <!-- 标准盒模型与怪异盒模型 --><div style=" ...
- CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
- 【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
最新文章
- 科学计算库Numpy——随机模块
- vi/vim 光标移动命令
- TypeScript—语法简介
- 几张旧照片,用傻瓜拍的,翻出来凑数 (续)
- Dlib与OpenCV图片转换
- 基于鸢尾花卉数据集的Fisher分类器设计
- 银行业会计人员技能训练系统(含文字录入、小键盘、点钞)
- Java学生管理系统项目
- 图书馆在计算机房旁边用英语怎么说,PEP四年级下学期英语期末复习
- python根据身高计算标准体重_有谁知道如何根据身高计算标准体重
- 巴布亚企鹅需要开启sshd的root权限
- 这10个免费学习网站,个个堪称神器,不收后悔!
- 搜索引擎代码资源[转]
- ElasticSearch及插件安装
- [Android源码分析]L2CAP的bind分析以及psm和cid的介绍和实现
- 大半夜睡不着,聊一下在小外包公司工作一年后的感想吧
- Qt在线帮助文档网址以及安装包下载地址
- vue+openlayer实现选房平面图
- Kaggle Video Game Sales数据分析
- php仿糗事百科,thinkphp精仿糗事百科整站源码
热门文章
- how2j学习_第一部分_JAVA基础
- java不同数据类型之间的运算法则
- 00052管理系统中计算机应用实践视频,00052管理系统中计算机应用(2017模拟实践)复习资料+参考 答案.pdf...
- python一些常用方法以及模块的使用
- pyqt5做了一个无线网连接器,与君共勉
- 值得一生去看的21个演讲,8部经典励志电影,12部大师纪实片,60部纪录片
- 大学英语六级词汇(笔记)
- Office 365 E3功能
- datastage transformer控件详解
- 翻译: 成长心态 成功的新心理学