css盒模型

css有种基础实际模式叫盒模型,定义了web页面中的元素是如何看做盒子来解析的。

1、css盒模型简介

  在css中主要有以下几种盒模型:inline、inline-block,block、table、absolute position、float。

  浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display、position、float、width、height、margin、padding和border等,不同类型的盒模型会产生不同的布局。

 

  w3c标准的盒模型

  外盒尺寸计算

    element空间高度 = 内容高度(height)+ 内边距(padding)+ 边框(border)+ 外边距(margin)

    element空间宽度 = 内容宽度(width)+ 内边距(padding)+ 边框(border)+ 外边距(margin)

  内盒尺寸

    element高度 = 内容高度(height)+ 内边距(padding)+ 边框(border)

    element宽度 = 内容宽度(height)+ 内边距(padding)+ 边框(border)

2、css3盒模型

  css3盒模型增添了一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式,语法为:box-sizing:content-box | border-box | inherit

  box-sizing:content-box;默认值,让元素维持w3c的标准盒模型。元素的宽度和高度(width、height)等于border+padding+height/width

  box-sizing:border-box;此值会重新定义css2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6~7的怪异模式)。元素的宽高等于元素内容(content)的宽高

  box-sizing:inherit;此值使元素继承父元素的盒模型模式;

  box-sizing属性主要用来控制元素的盒模型的解析模式,其主要目的是控制元素的总宽度。在w3c规范中,元素的box-sizing默认属性值是content-box值,如果不显示属性值box-sizing属性值为border-box,才能明确对元素设置一个总宽度。这种情况下会使页面布局更加方便。

 

  IE6以下以及怪异模式下的IE浏览器对盒模型虽然不符合W3C的标准规范,但这种解析方式并不是一无是处,它也有好的一方面,不管如何修稿元素的边框或者内边距大小,都不会影响元素盒子的总尺寸,也就不会打乱页面的整体布局。而在标准浏览器下,按照W3C规范对盒模型的解析,一旦修改了元素的边框或者内边距,就会影响元素盒子的尺寸,从而影响整个页面的布局。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。