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以及元素实际尺寸的计算关系,不同之处是两者的计算方法 不一致。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。