美文网首页
CSS盒模型

CSS盒模型

作者: sakatayui酱 | 来源:发表于2017-06-21 23:55 被阅读0次

盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版和布局。盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。

盒模型的结构

1.content(内容):用来展示文字和图片

2.padding(内边距):内容与边框的距离

3.border(边框):元素的边框

4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)

标准盒子模型:

包括margin、border、padding、content,并且 content 部分不包含其他部分。

也就是标准盒模型的宽度就是内容的宽度。

IE 盒子模型:

包括 margin、border、padding、content,和标准盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading。

举个栗子:

一个盒子的 margin 为 20px,border 为 5px,padding 为 10px,content 的宽为 200px,如果用标准 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2 +5*2+10*2+200=270px,盒子的实际宽度为:5*2+10*2+200=230px;如果用IE盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px,盒子的实际宽度依然是: 200px。

CSS3中有个属性:box-sizing,能改变盒子的模型标准:

border-box(IE盒模型 )

content-box(W3C盒模型)

怪异盒子模型

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时,会触发怪异模式。

在标准模式中,一个块元素的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式中,一个块元素的总宽度= width + margin(左右)(即width已经包含了padding和border值)


浏览器的兼容性问题

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

相关文章

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • CSS盒模型作业

    前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么...

网友评论

      本文标题:CSS盒模型

      本文链接:https://www.haomeiwen.com/subject/kvlxcxtx.html