html文本+盒子

1. 文本修改

1. text-transform 可以用来设置文本的大小写

可选值：

none 文本正常显示 默认值

capitalize 设置单词首字母大写

uppercase 设置单词大写

lowercase 设置单词小写

2. text-decoration 可以用来设置文本的修饰

可选值：

none 文本正常显示 默认值

underline 下划线

overline 上划线

line-through 删除线

3. letter-spacing可以指定字符间距

4. word-spacing可以设置单词之间的距离

5. text-align用于设置文本的对齐方式

可选值：

left 文本左对齐

right 文本右对齐

center 文本居中对齐

justify 两端对齐

6. text-indent 设置首行缩进

7. 单行省略

设置固定宽度 width: ;

设置文本不换行

white-space: nowrap;

裁剪多余文本

overflow: hidden;

多余文本以省略号的形式出现

text-overflow: ellipsis;

8. text-shadow: h-shadow v-shadow blur color;

参数：

h-shadow 阴影的水平位移距离 正值向右 负值向左 必写

v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写

blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px

color 阴影的颜色 一般用rgba形式 可选值 如果不写话，默认是字体的颜色

9. 盒子阴影

box-shadow: h-shadow v-shadow blur color;

参数：

h-shadow 阴影的水平位移距离 正值向右 负值向左 必写

v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写

blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px

color 阴影的颜色 一般用rgba形式 可选值 如果不写话，默认是黑色

2. 盒子介绍

盒子模型组成部分：标准盒子

从内向外：

1.内容区：content：分内容的

2.内边距：padding：设置内容与边框的距离

3.边框：border：设置区分盒子内外

4.外边距：margin：设置元素与元素之前的距离，设置元素的位置

用法与padding基本一致 -->

3. div盒子的属性

1. 边框：

1. border-width 设置边框大小

（1）、可以跟多个值，值与值之间用空格隔开

四个值 上 右 下 左

三个值 上 左右 下

二个值 上下 左右

一个值 上下左右

（2）、可以单独设置某一边宽度

top right left bottom

border-XXXX-width:;

（3）、有默认值，默认值大小是1-3px

2. border-style 设置边框的样式

(1)可选值：

solid 实线

double 双线

dotted 圆点虚线

dashed 虚线

(2)可以单独设置某一边的样式

border-XXX-style: ;

top bottom left right

（3）、没有默认样式，设置边框必须要设置

3. border-color 设置边框的颜色

（1）、可以放多个颜色值 四个，三个，两个，一个

规则跟border-width是一样的

（2）、可以单独设置某一边颜色

border-XXX-color: ;

top bottom left right

（3）、有默认值，默认值是黑色

4. border 简写

(1)、 border: 边框的大小 边框的样式 边框的颜色;

三个参数以空格隔开，不分先分后顺序

（2）单独设置某一边边框

border-xxx:边框的大小 边框的样式 边框的颜色;

xxx：top bottom left right

(3):border:none;去除边框

2. 内边距

padding-top:单独设置上内边距

padding-right:单独设置右内边距

padding-bottom:单独设置下内边距

padding-left:单独设置左内边距

3. 外边距

margin-top 正值，盒子是向下移动，负值，盒子是向上移动

margin-right 设置是没有效果

margin-left 正值，盒子是向右移动，负值，盒子是向左移动

margin-bottom 盒子本身不动，盒子下方的元素，正值向下，负值向上