首先介绍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 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别的更多相关文章

  1. 标准事件模型和IE事件模型有哪些区别?请具体解释他们的差异。

    通常,事件传送有三个阶段:事件捕获阶段,停留目标阶段,事件冒泡阶段. 1.阶段差异 DOM事件模型包含捕获阶段和冒泡阶段,DOM事件模型可使用e.stopPropagation()来阻止事件流:IE事 ...

  2. 基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程

    许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...

  3. IE盒模型和W3C盒子模型的区别

    其实这个问题到现在真的是没有意义了,因为早在IE6的兼容模式开始就已经弃用了IE盒子模型了,但是现在的各种面试题还是会时常出现这样的上世纪的题目,我觉得其实时纯粹的刁难. 好了,吐槽不多说了,直接上图 ...

  4. OSI参考模型和TCP/IP模型基本知识

    OSI七层模型 为了解决网络之间的兼容性问题,实现网络设备间的相互通信,ISO于1984年提出的OSI参考模型(开放系统互连参考模型).但是由于种种原因,并没有一种完全忠实于OSI参考模型的协议族流行 ...

  5. Java网络编程:OSI七层模型和TCP/IP模型介绍

    OSI(Open System Interconnection),开放式系统互联参考模型 .是一个逻辑上的定义,一个规范,它把网络协议从逻辑上分为了7层.每一层都有相关.相对应的物理设备,比如常规的路 ...

  6. 【计算机网络】两个网络模型——OSI参考模型和TCP/IP模型

    计算机网络 两个网络模型 计算机网络模型 分层机制----规划通讯细节 层与层之间之间是独立的.屏蔽的,下层为上层提供服务. 一些概念 实体: 任何发送/接收信息的软件/硬件进程. 对等层: 两个不同 ...

  7. 网络编程模型(C/S模型和B/S模型)

    目录 网络应用编程模型 互联网与企业内部网 早期计算机网络的通信模型 C/S模式 B/S模式 B/S 和 C/S 的区别 网络应用编程模型 互联网与企业内部网 网络的两个含义: 互联网 :互联网(In ...

  8. 查漏补缺:OSI七层模型和TCP/IP模型

    应用层协议:Telnet.FTP.e-mail等 传输层协议:TCP.UDP.STCP等 网络层协议:IP.ICMP.IGMP等 链路层协议:设备驱动及接口卡

  9. 网络知识学习1---(基础知识:ISO/OSI七层模型和TCP/IP四层模型)

    以下的内容和之后的几篇博客只是比较初级的介绍,想要深入学习的话建议自己钻研<TCP/IP详解 卷1:协议> 1.ISO/OSI七层模型    下四层是为数据传输服务的,物理层是真正的传输数 ...

随机推荐

  1. ASP.NET 获取IIS应用程序池的托管管道模式

    asp.net 中怎样较为简单的获取网站程序池的托管管道模式 目前已知的方式是根据这个帖子https://github.com/kakalotte/... ,利用DirectoryEntry,但是程序 ...

  2. df 显示 100%的问题

    问题:         使用 df 命令查看,某个分区使用率已经达到100%,但是用du 命令统计该分区,发现该分区空间剩余10G可用.         实例:                分析: ...

  3. WLAN HAL

      WLAN HAL WLAN 框架具有三个 WLAN HAL 表面,分别由三个不同的 HIDL 软件包表示: 供应商 HAL:Android 专用命令的 HAL 表面.HIDL 文件位于 hardw ...

  4. JavaScript知识复习

    JavaScript 数据类型 原始数据类型: number string boolean null undefined 对象:object: Function Array Date... 共有六种数 ...

  5. JAVA-截取字符串两边指定字符

    工具类: /** * 工具类 */ public class Tool { /** * 截取两边指定的字符 * @param character * @param symbol * @return * ...

  6. session 存入 memcahce

    <?php header('content-type:text/html;charset=utf-8'); class RedisSessionHandler{ public $ttl; //失 ...

  7. 关于thinkphp 命令行

    很多人做多年开发只懂得PHP能在浏览器下运行或者只能结合APACHE等WEB服务器运行,却不晓得,PHP也能用命令行执行,或许是由于大多人在WINDOWS平台做开发部署运行,比较少接触LINUX. T ...

  8. 13-Linux中进程与线程的概念以及区别

    linux进程与线程的区别,早已成为IT界经常讨论但热度不减的话题.无论你是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.对于一般的程序员,搞清楚二者的概念并在工作中学会运用是 ...

  9. 洛谷 P1754 球迷购票问题

    P1754 球迷购票问题 题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的 ...

  10. Qt编译mysql以及创建表后进行导入操作

    鉴于很多同学对Qt编译myql总是不能成功.出现各种问题,今天特此写出本教程,希望可以帮到须要的同学.        首先,须要明确编译的目的和原理. 目的:Qt 5.2版本号曾经都是不带mysql驱 ...