CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素怒是如何看做盒子来解析的,没一个盒子都有不同的界面,本文主要介绍CSS3盒模型。
1.CSS盒模型简介
在CSS中主要有以下几种盒模型:inline、inline-block、block、table、absolute position、float.浏览器把每个元素看作一个盒模型,每一个盒模型是由以下几个属性组合所决定的.display
、position、float、width、margin、padding、height、border等。不同的盒模型会产生不同的布局。
1.1 什么是盒模型
CSS中每一个元素都是盒模型,包括HTML、和body标签元素。
1.2 重置盒模型解析
1)W3C的标准盒模型
height:内容高度
width:内容宽度
外盒尺寸计算(元素空间尺寸)
element空间高度 = 内容高度 + 内距 + 边框 + 外距
element空间宽度 = 内容宽度 + 内距 + 边框 + 外距
内盒尺寸计算(元素大小)
element 高度 = 内容高度 + 内距 + 边框
element 宽度 = 内容宽度 + 内距 + 边框
2)IE传统盒模型(IE6以下,不包含IE6版本)
外盒尺寸计算(元素大小)
element空间高度 = 内容高度 + 外距
element空间宽度 = 内容宽度 + 外距
内盒尺寸计算(元素大小)
element 高度 = 内容高度
element 宽度 = 内容宽度
2.CSS3盒模型属性
2.1 box-sizing
box-sizing: content-box | border-box | inherit
- content-box:标准盒模型
- border-box:IE传统盒模型(常用,可以防止padding,border破坏布局)
- inherit: 元素继承父元素盒模型模式
3.内容溢出
在CSS中每一个元素都视为一个盒子,盒子就是容器,如果在样式中指定盒子的宽度与高度,可能某些内容在盒子中就会容纳不下。此时就可以用over-flow属性来指定如何显示盒中容纳不下的内容。
over-flow是CSS2.1规范中的内容,CSS3新增overflow-x,overflow-y
overflow-x: visible | hidden | scroll | auto |no-display | no-content
overflow-y: visible | hidden | scroll | auto |no-display | no-content
- visible: 默认值。表示不剪切容器中的任何内容、不添加滚动条,clip属性失效,内容超出容器高度会溢出容器
- auto:在内容溢出容器时剪切并添加滚动条。
- hidden:内容溢出容器时,所有内容都将隐藏,不显示滚动条。隐藏的内容还在知识不显示,不对其他元素布局产生作用。
- no-display 不常用,在谷歌火狐最新版浏览器不支持
- no-content 不常用,在谷歌火狐最新版浏览器不支持
4.CSS3自由缩放属性
resize: none | both | horizontal | vertical | inherit
textarea元素默认具有resize功能,设置为none后,无法改变文本框大小。
5.CSS3外轮廓属性
outline:[outline-color]|[outline-style] |
[outline-width] | [outline-offset] | inherit