Chinaunix首页 | 论坛 | 博客
  • 博客访问: 396343
  • 博文数量: 89
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1044
  • 用 户 组: 普通用户
  • 注册时间: 2018-08-25 11:31
文章分类
文章存档

2018年(89)

我的朋友

分类: Html/Css

2018-10-05 09:51:52

CSS3盒模型
CSS有一种基础设计模式叫盒模型, 定义了Web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面, 在 CSS 中 主要有以下几种盒模型: inline、inline- block、block、table、absolute,position、float。 浏览器把每个元素看 一个盒模型, 每一个盒模型是由以下几个属性组合所决定的: display、position、float、width、height、margin、padding和border等, 不同类型的盒模型会产生不同的布局。
什么是盒模型?
CSS中每一个元素都是一个盒模型,包括HTML和body标签元素。在平时设计中,大家对content、padding、margin、background和border来说一定不会陌生了, 因为盒模型都具备这些属性。 其中width、height、border、background、padding和margin之间的层次关系和相互影响,可以 看出 padding、content、 background-image、background-color,它们四者构成了Z轴( 垂直屏幕的坐标) 多重层叠关系。 但是border与margin、padding三者之间应该是平面上 的并级关系,并不能构成Z轴的层叠关系。
在CSS中盒模型被分为两种:第 一种 是 W3C 的 标准 模型。另一种 是 IE 的 传统 模型。
它们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系,不同之处是两者的计算方法 不一致。
1. W3C的标准盒模型。
 http:/ /
外盒尺寸计算(元素空间尺寸) 
element空间高度=内容高度+内距+边框+外距 
element空间宽度=内容宽度+内距+边框+外距内盒尺寸计算( 元素大小)
element高度=内容高度+内距+边框(height为内容高度) 
element 宽度=内容宽度+内距+边框(width为内容宽度)
2. IE传统下盒模型( IE6以下,不包含IE6版本或QuirksMode下IE5.5+)。 
外盒尺寸计算( 元素空间尺寸) 
element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距) 
element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距) 
内盒尺寸计算( 元素 大小) 
element高度=内容高度( height 包含了元素内容宽度、边框、内距) 
element宽度=内容宽度( width包含了元素内容宽度、边框、内距)
为了解决这种问题, CSS3增添 了 一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式,box- sizing 的 属性 值 主要 有 以下 三个: 
1· content-box: 默认值, 让元素维持W3C的标准盒模型。元素的宽度和高度( width/ height) 等于元素边框宽度( border) 加上元素内距( padding) 加上元素内容宽度或高度( content width/ height),也就是 element width/ height=border+padding+content width/ height。 
2· border-box: 此值会重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型( IE6以下版本和IE6~7怪异模式)。元素的宽度或高度等于元素 内容的宽度或高度。 从盒模型介绍可知, 这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度( 此处的内容宽度或高度=盒子的宽度或 高度-边框-内距)。 
3· inherit:此值使元素继承父元素的盒模型模式。 box-sizing属性主要用来控制元素的盒模型的解析模式, 其主要目的是控制元素的总宽度。 在W3C规范中, 元素的box-sizing默认属性值是content-box 值, 如果不显式重置box-sizing属性值为border-box, 才能明确对元素设置一个总宽度。在这种情况之下会使 页面布局更加方便。
阅读(16464) | 评论(0) | 转发(0) |
0

上一篇:CSS3颜色

下一篇:CSS3文本溢出属性

给主人留下些什么吧!~~