CSS3盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

简单的盒子模型

弹性盒子模型

简单的盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了一个简单的盒子模型:


简单的盒子模型

不同部分的说明:



元素的宽度和高度

当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.

下面的例子中的元素的总宽度为210px:

实例

div{width:100px;border:5px solid green;padding:15px;margin:35px;}

让我们自己算算盒子总宽度:
100px (宽)
+ 30px (左填充 + 右填充)
+ 10px (左边框 + 右边框)
+ 70px (左边距 + 右边距)
= 210px

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

属性介绍

父元素设置

/* Firefox */

display:-moz-box;

/* W3C */

display:box

/* Safari, Opera, and Chrome */

display:-webkit-box;

box-orient 定义盒模型的布局方向 horizontal 水平显示, vertical 垂直显示

box-direction 元素排列顺序 normal 正常, reverse 反序

box-ordinal-group 属性规定框中子元素的显示次序,值更低的元素会显示在值更高的元素前面显示。

box-flex ?定义盒子的弹性空间 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值得和

box-pack:对盒子富裕的空间进行管理

start:所有子元素在据顶

end 所有子元素在据底

center 所有子元素居中

box-shadow:[inset] x y blur [spread] color

start 所有子元素在盒子左侧显示,富裕空间在右侧

end 所有子元素在盒子右侧显示,富裕空间在左侧

center 所有子元素居中

justify 富裕空间在子元素之间平均分布

box-align 在垂直方向上对元素的位置进行管理

inset:投影方式 ?inset:内投影 ?不给:外投影

x、y 阴影偏移

blur:模糊半径

spread 扩展阴影半径 先扩展原有形状,再开始画阴影

color:阴影颜色

box-reflect 倒影 -webkit-支持 ?direction方向 above/below/left/right

resize 自由缩放 ?Both/horizontal vertical(与overflow:auto一块使用只有水平方向可以缩放)


弹性盒子模型

web开发框架中弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。


弹性布局用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{display:flex;}

行内元素也可以使用Flex布局。

.box{display:inline-flex;}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{display:-webkit-flex;/* Safari */display:flex;}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

box-sizing是CSS3的box属性之一,那他当然也遵循CSS的box model原理
box-sizing: content-box|border-box|inherit;
CSS3中的box-sizing属性的值有3种

box-sizing:border-box
border-box的width的大小是border以内的,即content+padding+border

box-sizing:inherit;
inherit规定应从父元素继承 box-sizing 属性的值。

box-sizing:content-box
box-sizing的默认属性值:content-box的width的大小只是content的大小

注:offsetWidth的大小: content+padding+border

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » CSS3盒子模型
本文标题:CSS3盒子模型
本文地址:http://www.hocode.com/OrgTec/UI/0015.html

相关文章: Web框架MVC页面布局

电话
电话 18718672256

扫一扫
二维码