文本修改
text-transform 可以用来设置文本的大小写
可选值:
none 文本正常显示 默认值
capitalize 设置单词首字母大写
uppercase 设置单词大写
lowercase 设置单词小写
text-decoration 可以用来设置文本的修饰
可选值:
none 文本正常显示 默认值
underline 下划线
overline 上划线
line-through 删除线
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离
text-align用于设置文本的对齐方式
可选值:
left 文本左对齐
right 文本右对齐
center 文本居中对齐
justify 两端对齐
text-indent 设置首行缩进
单行省略
设置固定宽度 width: ;
设置文本不换行
white-space: nowrap;
裁剪多余文本
overflow: hidden;
多余文本以省略号的形式出现
text-overflow: ellipsis;
text-shadow: h-shadow v-shadow blur color;
参数:
h-shadow 阴影的水平位移距离 正值向右 负值向左 必写
v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写
blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px
color 阴影的颜色 一般用rgba形式 可选值 如果不写话,默认是字体的颜色
盒子阴影
box-shadow: h-shadow v-shadow blur color;
参数:
h-shadow 阴影的水平位移距离 正值向右 负值向左 必写
v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写
blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px
color 阴影的颜色 一般用rgba形式 可选值 如果不写话,默认是黑色
盒子介绍
盒子模型组成部分:标准盒子
![](https://i-blog.csdnimg.cn/blog_migrate/977017188b52e232d11962fccc1f48df.png)
从内向外:
1.内容区:content:分内容的
2.内边距:padding:设置内容与边框的距离
3.边框:border:设置区分盒子内外
4.外边距:margin:设置元素与元素之前的距离,设置元素的位置
用法与padding基本一致 -->
div盒子的属性
边框:
border-width 设置边框大小
(1)、可以跟多个值,值与值之间用空格隔开
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
(2)、可以单独设置某一边宽度
top right left bottom
border-XXXX-width:;
(3)、有默认值,默认值大小是1-3px
border-style 设置边框的样式
(1)可选值:
solid 实线
double 双线
dotted 圆点虚线
dashed 虚线
(2)可以单独设置某一边的样式
border-XXX-style: ;
top bottom left right
(3)、没有默认样式,设置边框必须要设置
border-color 设置边框的颜色
(1)、可以放多个颜色值 四个,三个,两个,一个
规则跟border-width是一样的
(2)、可以单独设置某一边颜色
border-XXX-color: ;
top bottom left right
(3)、有默认值,默认值是黑色
border 简写
(1)、 border: 边框的大小 边框的样式 边框的颜色;
三个参数以空格隔开,不分先分后顺序
(2)单独设置某一边边框
border-xxx:边框的大小 边框的样式 边框的颜色;
xxx:top bottom left right
(3):border:none;去除边框
内边距
padding-top:单独设置上内边距
padding-right:单独设置右内边距
padding-bottom:单独设置下内边距
padding-left:单独设置左内边距
外边距
margin-top 正值,盒子是向下移动,负值,盒子是向上移动
margin-right 设置是没有效果
margin-left 正值,盒子是向右移动,负值,盒子是向左移动
margin-bottom 盒子本身不动,盒子下方的元素,正值向下,负值向上