CSS-标准盒模型 & 怪异盒模型
CSS中Box model分类
CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。
大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义时,会触发怪异模式。
在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
CSS3的box-sizing
box-sizing语法:
box-sizing : content-box || border-box || inherit;
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;
CSS-标准盒模型 & 怪异盒模型的更多相关文章
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- div的标准盒模型和怪异盒模型
(1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开
- css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
- css中box-sizing简单说明(标准盒式模型和怪异盒式模型)
今天写程序做布局的时候,遇到关于css中盒式模型的问题,百度了下这属性的解释,脑大啊,文字太绕看不懂.怎么办,于是自己动动手写了段程序测试,嗯,不错,一看效果就恍然大明白了.这里简单说明下,也可能说得 ...
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- 标准盒模型、怪异盒模型(box-sizing)
CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...
- CSS盒子模型与怪异盒模型
盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...
- 第一章入门篇CSS样式的分类、盒模型
1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...
- CSS3:box-sizing 怪异盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Maven的学习资料收集--(三)使用Maven构建Web项目
新建Maven项目 File - New - Other 选择Maven Project 单击Next 保持默认即可单击Next 选择Archetype为 web app单击Next 输入一些必要信息 ...
- android 开发-数据存储之共享参数
android提供5中数据存储方式 数据存储之共享参数 内部存储 扩展存储 数据库存储 网络存储 而共享存储提供一种可以让用户存储保存一些持久化键值对在文件中,以供其他应用对这些共享参数进行调用.共 ...
- TemplateBinding与Binding区别,以及WPF自定义控件开发的遭遇
在上一次的文章WPF OnApplyTemplate 不执行 或者执行滞后的疑惑谈到怎么正确的开发自定义控件,我们控件的样式中,属性的绑定一般都是用TemplateBinding来完成,如下一个基本的 ...
- [Coding Style] CSS coding style
CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...
- eaysui 子页面刷新父页面datagrid
近期碰到这样一个问题,子页面操作后需要刷新父页面datagrid元素,刚开始用这种方式刷新,$("#talbe",window.parent.document).datagrid( ...
- restesay部署学习过程中遇到的问题
Exception starting filter org.jboss.resteasy.plugins.serer.servlet.Filter30Dispatcherjava.lang.Class ...
- Google Authenticator加强ssh安全
一.安装依赖包 软件包可以在这个地址下载:https://pan.baidu.com/s/1r0CmwbtCfNiBqU9rh_TxtA yum -y install pam-devel tar jx ...
- npm常用指令小记
查看本地指定包在npm远程服务器的版本信息 方式一: npm view <packageName> versions 方式二: npm info <packageName> 查 ...
- UOJ#130 【NOI2015】荷马史诗 K叉哈夫曼树
[NOI2015]荷马史诗 链接:http://uoj.ac/problem/130 因为不能有前缀关系,所以单词均为叶子节点,就是K叉哈夫曼树.第一问直接求解,第二问即第二关键字为树的高度. #in ...
- 渐变色在IE9以下包括IE9的使用
因为是不支持gradient的.所以需要使用如下属性,该属性不适用于safria浏览器,并且,#fff不可以简写,要写成#ffffff这样的形式 FILTER: progid:DXImageTrans ...