css盒子模型
盒子模型
盒子模型就是把HTML 页面中的元素看作是一个矩形的盒子,也就是一个盛装盒子的容器,每个矩形都是由元素的内容、内边距(padding)、边距(border)和外边距(margin)组成。
<div>标记
div是英文 division 的缩写,意为“分割、区域”。<div>是一个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。大多数 HTML 标签都可以嵌套在 <div> 中,<div> 中还可以嵌套多层<div>。
盒子的宽与高
边框属性
设置内容 | 样式属性 | 常用属性 |
边框样式 | border-style:上边[右边 下边 左边]; | none 无(默认)、solid 单实线、dashed 虚线、dotted 点线、double 双实线 |
边框宽度 | border-width:上边[右边 下边 左边]; | 像素值 |
边框颜色 |
border-color:上边[右边 下边 左边]; | 颜色值、#十六进制、rgb(r%,g%,b%) |
综合设置边框 | border:四边宽度 四边样式 四边颜色 | |
圆角边框 | border-radius:水平半径参数/垂直半径参数; | 像素值或百分比 |
图片边框 | border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式; |
1.边框样式(border-style)
其基本语法格式:border-style:上边 [右边 下边 左边];
设置边框样式时可以针对四条边分别设置,也可以综合设置四条边框样式:
* solid:边框为单实线
* dashed:边框为点线
* dotted:边框为点线
* double:边框为双实线
* dashed:边框为虚线
一个值是为四边全部设置,两个值的顺序是上下 左右,三个值的顺序是上 左右 下,四个值的顺序是上 右 下 左。
2.边框宽度
其基本语法格式:border-width:上边 右边 下边 左边;
3.边框颜色
其基本语法格式:border-color:上边 [右边 下边 左边];
border-color 的属性值可为预定义的颜色值、十六进制#RRGGBB(最常用)或 RGB 代码 rgb(r,g,b)。border-color 的属性值同样可以设置为1个、2个、3个、4个,遵循值复制的原则。
例如设置段落的边框样式为实线,上下边灰色,左右边红色:
CSS3中对边框颜色进行了增强,运用该属性可以制作渐变等绚丽的边框效果。CSS3在原边框颜色属性的基础上派生了4个边框属性:
* border-top-coloers
* border-right-colors
* border-bottom-colors
* border-left-colors
上面的四个边框属性的属性值同样可为预定义的颜色值、十六进制#RRGGBB或RGB代码 rgb(r,g,b)。并且,每个属性最多可以设置的边框颜色数和其边框宽度相等,这时,每种边框颜色占 1px 宽度,边框颜色从外向内渲染。例如边框宽度是10px,那么它最多可以设置10种边框颜色。如果边框宽度为10px,却只设置了8种边框颜色,那么最后一个边框颜色将自动渲染剩余的宽度。
需要注意的是目前只有 Firefox3.0 版本以上的浏览器才支持CSS3的新边框颜色属性,所以才会在使用时加上 "-moz" 火狐浏览器私有前缀。
4.综合设置边框
其基本语法格式:border: 宽度 样式 颜色;
上面的设置方式中,宽度、样式、颜色的顺序不分先后。
每一侧的边框样式都不相同或者只需要单独定义某一侧的边框时,可以使用单侧边框的综合属性。当四条边框都相同时,可以使用 border 属性进行综合设置。
5.圆角边框
其基本语法格式:border-radius:参数1/参数2
其中 “参数1” 表示圆角的水平半径,“参数2” 表示圆角的垂直半径,两个参数之间用 “/” 隔开。
边距属性
1.内边距
指元素内容与边框之间的距离,也常常称为内填充。
* padding-top:上内边距
* padding-right:右内边距
* padding-bottom:下内边距
* padding-left:左内边距
* padding:上内边距 [右内边距 下内边距 左内边距]
padding 相关属性的取值可为 auto自动(默认值)、不同单位的数值、相对于父元素(或浏览器)宽度的百分比%,实际中最常用的是像素值(px),不允许使用负值。
2.外边距
网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布局网页,就需要为盒子设置外边距,外边距指的是元素边框与相邻元素之间的距离。
* margin-top:上外边距
* margin-right:右外边距
* margin-bottom:下外边距
* margin-left:左外边距
当对块级元素应用宽度属性 width,并将左右的外边距都设置为auto,可使块级元素水平居中,实际中常用这种方式进行网页布局:
3.box-shadow 属性
其基本语法格式:box-shadow:像素值1像素值2像素值3像素值4 颜色值 阴影类型;
参数值 | 说明 |
像素值1 | 表示元素水平阴影位置,可以为负值(必选属性) |
像素值 2 | 表示元素垂直阴影位置,可以为负值(必选属性) |
像素值 3 | 阴影模糊半径(可选属性) |
像素值 4 | 阴影扩展半径,不能为负值(可选属性) |
颜色值 | 阴影颜色(可选属性) |
阴影类型 | 内阴影(inset)/外阴影(默认)(可选属性) |
其中 “像素值1” 和 “像素值2” 为必选参数值不可以忽略,其余为可选参数值。不设置 “阴影类型” 参数时默认为 “外阴影”,设置 “inset” 参数后,阴影类型变为内阴影。如果是外侧阴影不写,写的话就是错误的。
4.box-sizing 属性
box-sizing 属性用于定义盒子的宽度和高度值是否包含元素的内边距和边框,其基本语法格式如下:
box-sizing:content-box/border-box;
* content-box:浏览器对盒子的解释遵从 W3C 标准,当定义 width 和height 时,它的参数值不包括 border 和 padding。
* border-box:当定义 width 和 height 时,border 和 padding 的参数值被包含在 width 和 height 之内。