CSS3样式基础之盒子模型

盒子模型是网页布局的基础

网页的整个页面可以分割成若干个矩形小块，以此实现网页的布局

< div>标记

< div>与< /div>之间相当于一个盒子，可以设置外边距，内边距，宽和高，同时内部可以容纳段落，表格，标题，图像等各种网页元素，大多数HTML标记都可以嵌套在< div>中，< div>还可以嵌套多层< div>

< div>标记非常的好用，通过id、class等属性配合设置CSS样式，可以代替大多数块级文本标记(如< h> < p>等)

盒子的宽与高

即盒子的大小
复合属性：border
border：边框宽度 边框样式 边框颜色；

控制盒子内的段落文本

width	段落的宽度(常用px)
height	段落的高度(常用px)

边框属性

边框样式

border-style:上边 右边 下边 左边；

solid	边框为单实线
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

设置边框样式必须按照上右下左的顺时针顺序，省略时采用值复制的原则

一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下

边框宽度

border-width:上边 右边 下边 左边；

取值单位为像素px

设置边框宽度必须按照上右下左的顺时针顺序，省略时采用值复制的原则

一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下

边框颜色

border-color:上边 右边 下边 左边；

设置边框颜色必须按照上右下左的顺时针顺序，省略时采用值复制的原则

一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下

如果想使边框颜色出现渐变色

border-top-colors	上
border-right-colors	右
border-bottom-colors	下
border-left-colors	左

渐变规则按照边框宽度，每种颜色占1px

例：border-width:5px;

则 四个方向都可以输入5种颜色

如果不想输入5种颜色，则会将最后一个颜色占据剩余的宽度

圆角边框

将矩形边框圆角化

border-radius:参数1/参数2;

参数1表示圆角的水平半径，参数2表示圆角的垂直半径

参数1和参数2取值单位为px或者百分比

如果只设置一个参数则两个参数都默认相同

此外参数1参数2可以分别设置1-4个参数用来表示4角圆角半径

参数1和参数2分别设置参数值数	说明
1个	表示四角的圆角半径
2个	第一个参数值表示左上和右下圆角半径，第二个表示右上和左下圆角半径
3个	一个参数值表示左上圆角半径，第二个表示右上和左下圆角半径，第三个代表右下圆角半径
4个	1-4分别代表左上右上右下左下圆角半径

图片边框

border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;

属性	说明	取值
border-image-source	指定图片路径	路径
border-image-slice	指定边框图像顶部、右侧、底部、左侧内偏移量	数值/百分比
border-image-width	指定边框宽度	数值
border-image-outset	指定边框背景向盒子外部延伸的距离	数值+单位(常用px)
border-image-repeat	指定背景图片的平铺方式	rouded(铺满)、stretch(拉伸)、repeat(平铺)

边距属性

内边距

内边距指的是元素内容与边框之间的距离

语法：padding:上内边距 右内边距 下内边距 左内边距;

也可以分开写：

padding-top	上内边距	值+单位(px,百分比)
padding-right	右内边距	值+单位(px,百分比)
padding-bottom	下内边距	值+单位(px,百分比)
padding-left	左内边距	值+单位(px,百分比)

不允许使用负值，常用像素值(px)

百分比意思为：相对于父元素(或浏览器)宽度的百分比(若设置内外边距为百分比则会根据父元素width的变化而变化)

外边距

外边距指元素边框和相邻元素之间的距离

(简单来说就是使盒子与盒子之间拉开距离)

margin:上外边距 右外边距 下外边距 左外边距;

margin-top	上外边距	值+单位(px)
margin-right	右外边距	值+单位(px)
margin-bottom	下外边距	值+单位(px)
margin-left	左外边距	值+单位(px)

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，如下

选择器{width:900px;margin:0 auto;}

有部分元素默认存在内边距和外边距样式：body，h1-h6，p 等

可以清除默认的内外边距，重新定义

*{
              padding:0;  /*清除内边距*/
              margin:0;   /*清除外边距*/
          }

盒子的阴影效果

box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;

像素值1	表示元素水平阴影位置，可以为负值(必选)
像素值2	表示元素垂直阴影位置，可以为负值(必选)
像素值3	阴影模糊半径(可选)
像素值4	阴影扩展半径，必须为正值(可选)
颜色值	阴影颜色(可选)
阴影类型	内阴影(inset)/外阴影(默认)(可选)

盒子总宽度与边框内边距的统一

当一个盒子的总宽度确定后，要想给盒子添加边框或内边距，往往要修改width属性值，才能保证盒子大小不改变，但box-sizing可以实现不用修改width属性值也能添加边框或内边距

box-sizing:content-box/border-box;

取值可以是content-box或者border-box

content-box	当定义width和height时，它们的参数值不包括border和padding
border-box	当定义width和height时，它们的参数值包括border和padding

背景属性

背景图像

background-image:url(图像的路径);

背景颜色

background:属性值;

属性值可以是颜色的单词，RGB代码，十六进制

背景与图片的不透明度设置

1. RGBA模式

   rgba(r,g,b,alpha);

   r,g,b是指红,绿,蓝(数值范围是0~255) alpha参数是一个介于0.0(完全透明)~1.0(完全不透明)之间的数字

2. opacity属性

   opacity属性可以使任何元素呈现出透明效果

   opacity:opacity Value;

   opacity Value是一个介于0.0(完全透明)~1.0(完全不透明)之间的数字

设置背景图像平铺

默认情况下，背景图像会自动沿着水平和竖直两个方向平铺

可以通过background-repeat 来控制

repeat	none
no-repeat	不平铺(图像位于元素的左上角，只显示一个)
repeat-x	只沿水平方向平铺
repeat-y	只沿竖直方向平铺

设置背景图像的位置

如果希望背景图像出现在其他位置 可用

background-position:属性值1 属性值2

属性值：

  1. 使用像素值(常用)
  2. 使用关键字指定背景图像在元素中的对齐方式(两个关键字顺序任意，若只有一个值则另一个默认为center)

水平方向：left、center、right

垂直方向：top、center、bottom

  3. 使用百分比：按背景图像和元素的指定点对齐(若只有一个百分数则视为水平值，另一个垂直值默认为50%)

0%0%	图像左上角与元素的右上角对齐
50%50%	图像50%50%的中心点与元素50%50%的中心点对齐
20%30%	图像20%30%的点与元素20%30%的点对齐
100%100%	图像右下角与元素的右下角对齐

背景图像的固定

background-attachment:属性值;

scroll	图像随页面元素一起滚动(默认)
fixed	图像固定在页面屏幕上，不随页面元素滚动

背景图像大小

background-size:属性值1 属性值2;

属性值	说明
像素值	设置背景图像的高度和宽度。1为宽，2为高，若只设置一个值则另外一个默认为auto
百分比	以父元素的百分比来设置背景图像的宽度和高度。1为宽，2为高，若只设置一个值则另外一个默认为auto
cover	背景图像完全覆盖背景区域，背景图像某些部分也许无法显示在背景定位区域中
contain	扩大图像至最大尺寸，以使其宽度和高度完全适应内容区域

设置背景显示区域

background-origin:属性值;

padding-box	背景图像相对于内边距区域来定位
border-box	背景图像相对于边框来定位
content-box	背景图像相对于内容来定位

设置背景图像的裁剪区域

background-clip:属性值;

属性值	说明
border-box	none，从边框区域向外裁剪背景
padding-box	从内边距区域向外裁剪背景
content-box	从内容区域向外裁剪背景

设置多重背景

通过background-image、background-repeat、background-position、background-size 综合使用实现

各属性值之间用逗号隔开

背景复合属性

语法格式：

background:background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin;

不需要的样式可以省略，各样式顺序任意