Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别

首先介绍Css的盒模型也就是标准盒模型（BOX Model）

包含了内容（content）内边距（padding）边框（border）外边框（margin）

这是大家经常用到的，也是现在的标准，其实IE的盒子结构和标准基本一样，但是IE盒模型content包含了padding 和 border

标准盒子实际宽 width = content +margin+padding+border IE盒子的实际宽 width = content+margin

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

转载于:https://www.cnblogs.com/czy960731/p/8520824.html

Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别相关推荐

标准事件模型和IE事件模型
前言:在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型,打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧. 一. 标准事件模型在JavaScript中把标准事件模型的执行分为三个阶段,即 ...
标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少? 盒模型讲解我们今天只会提到标准盒模型,和 IE 盒模型,两种盒模型模式讲解.首先来看标准盒模型. 只要是盒模型都会有这四个属性 margin, bord ...
详解OSI七层模型和TCP/IP模型
详解OSI七层模型 1. 详解OSI七层模型 1.1 详解每层结构 1.2 交换机和路由器的区别 1.3 集线器与路由器在功能上有什么不同 2. 详解TCP/IP模型 2.1 详解每层结构 2.2 O ...
OSI 七层模型和TCP/IP模型及对应协议
OSI 七层模型和TCP/IP模型及对应协议图: 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于不同层的中继系统具有不同的名称. 一个设备工作在哪一层,关键看它工作时利用哪一层的数据头部 ...
李奎元：说说那些征信模型（Z计分模型、巴萨利模型和A值模型）
李奎元称:根据企业信用管理理论,5C原则是指考察客户信用价值的5个因素,即品行(character).能力(capacity).资本(capital).担保品(collateral)和环境状况(con ...
OSI 七层模型和TCP/IP模型及对应协议（详解）
OSI 七层模型和TCP/IP模型及对应协议(详解) 查看全文 http://www.taodudu.cc/news/show-6185847.html 相关文章: OSI7层网络模型协议精析 OSI ...
OSI模型和TCP/IP模型
OSI模型开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI),简称为OSI模型(OSI model),一种概念 ...
基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程
许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...
玩转5G之--初探5G网络模型（OSI模型和TCP/IP模型）
目录前言: 1.计算机网络: 2.分层思想: 3.OSI七层参考模型: 4.TCP/IP的四层.五层模型与OSI七层模型的对应关系: 5.端到端和点到点的区别? 6.数据封装与解封的过程与TCP/I ...
OSI七层模型和TCPIP五层模型
OSI(Open System Interconnect),即开放式系统互联.一般叫OSI参考模型,是ISO(国际标准化组织)在1985年研究的网络互连模型.ISO为了更好的使网络应用普及,退出OSI ...

Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别

Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别相关推荐

最新文章

热门文章