目录
文本样式
1text-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 设置首行缩进
可以直接跟长度单位 px em rem
7: white-space: ; 设置网页如何处理空白
8: text-overflow 文本溢出包含元素时发生的事情
设置单行文本省略号
/* 设置文本不换行 */
white-space: nowrap;
/* 裁剪多余文本 */
overflow: hidden;
/* 多余文本以省略号的形式出现 */
text-overflow: ellipsis;
9:vertical-align 作用一、设置图文对齐的方式
可选值：
baseline 默认值 基线对齐 以字母x最下方为参考标准
bottom 图文靠下对齐
middle 图文居中对齐
top 图文靠上对齐
10: text-shadow: h-shadow v-shadow blur color;
参数：
h-shadow 阴影的水平位移距离 正值向右 负值向左 必写
v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写
blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px
color 阴影的颜色 一般用rgba形式 可选值 如果不写话，默认是字体的颜色
11.box-shadow: h-shadow v-shadow blur color;
参数：
h-shadow 阴影的水平位移距离 正值向右 负值向左 必写
v-shadow 阴影的垂直位移距离 正值向下 负值向上 必写
blur 阴影的模糊半径 值越大阴影越模糊 可选值 默认是0px
color 阴影的颜色 一般用rgba形式 可选值 如果不写话，默认是黑色
文档流（normal flow）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素的分类前提是在文档流中，才分成块元素、行内块元素，行内元素，
一旦元素脱离文档流，就不再区分块元素、行内块元素，行内元素，
所对应的元素的特点自然也就没有，块元素也不会独占一行了，行内元素也可以设置宽高了，
行内块元素也没有三像素问题
元素在文档流中分类的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
兼具块元素和行内元素的特点，即不会独占一行，也可以设置宽高，而且有三像素问题
盒子模型：
就是将页面所有的元素都统一设置为一个个盒子，一个个矩形，在布局时，就不用考虑
元素的形状，只需要考虑元素的大小，大大的方便了页面的布局
盒模型、盒子模型、框模型（box model）
内容区（content）
内边距（padding）
边框 （border）
外边距（margin）
影响盒模型大小是：内容区、内边距、边框，外边距不会影响到盒子的大小
内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
默认情况下，设置的width、height就是内容区的大小
边框（border）
元素 设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式
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）：
内容区和边框之间的距离，它会影响到盒子的大小
（1）、分别给每边设置内边距
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
（2）padding简写
padding后可以写多个值
4个值
3个值
2个值
1个值
规则跟之前讲的border-width是一样
外边距 margin
可以控制元素的位置，它不会改变盒子的大小
（1）margin-top 正值，盒子是向下移动，负值，盒子是向上移动
margin-right 设置是没有效果
margin-left 正值，盒子是向右移动，负值，盒子是向左移动
margin-bottom 盒子本身不动，盒子下方的元素，正值向下，负值向上
(2)margin 简写
后也可跟4个值，3个值，2个值，1个值
规则跟border-width也是一样
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top
上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，其下边的元素会向下移动，挤别人
margin-left
左外边剧，设置一个正值，元素会向右移动
由于页面中的元素都是靠左靠上摆放的，
所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（挤别人）
外边距也可以指定为一个负值，
如果外边距设置的是负值，则元素会向反方向移动
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
元素之间的相互转换
块元素
行内元素
行内块元素
display样式可以进行元素类型的相互转换
可选值
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
none 隐藏元素
隐藏元素的两种写法,两者的区别是什么？
display:none;
visibility: hidden;
区别：
display:none; 从页面删除结构
visibility: hidden; 只是单纯隐藏元素，元素的位置依然保留
设置圆
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: pink;
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
