本次将要学习的是CSS如何操作图片与文字。
目录结构：
learning
--CSS
--learning.css
Images
--01.PNG
--02.PNG
--03.PNG
--04.PNG
--05.PNG
--06.PNG
--JS
--learning_js.js
--learning_html.html
内容1：learning_html.html
其他，都为空。
web展示：
〇、CSS初始化
1、去除默认的内边距和填充
ul {
padding-inline-start: 0px;
}
2、去掉默认的标记
li {
list-style-type:none
}
3、去掉超链接的下划线
a {
text-decoration:none
}
4、如图：
一、行内块元素
1、display，设置将段落(如<a>和<span>)生成一个行内框
1.1、如，none，隐藏其中一行内容
1.2、如，inline属性值，可以将两行内容变成一行内容：
1.2、如，block属性值，常用于<a>和<span>等不是块级元素的元素：
A、不设置
B、设置了，有效果
C、设置了，去掉display属性值，没效果
如，inline-block属性值，就是综合了inline和block的内容。
2、当前代码和web展示：
二、调整尺寸
1、图片需要设置尺寸
.photo_page li {
width: 120px;
height: 120px;
}
.photo_page img {
width: 100%;
height: 100%;
}
2、当前代码和web展示
三、定位的相对和绝对
1、position，定位
1.1、relative
相对定位，位置相对其原始位置
a {
position:relative
left: -20px
}
释义：a这个元素相对于原始位置向左减少20px，就相当于向左移动20px
b {
position:relative
left:20px
}
释义：b这个元素相对于原始位置向左增加20px，就相当于向右移动20px
菜鸟上说的更详细：
1.2、absolute
绝对定位，位置相对于最近已经定位的父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
a{
position: absolute;
letf: 10px;
top: 150px
}
释义：a元素相对于html向左增加10px（也就是向右移动10px），相对于html向上增加150px（也就是向下移动150px）
1.3、设置位置
.photo_page li {
position: relative;
}
.photo_page img {
position: absolute;
}
.photo_page a {
position: absolute;
}
2、当前代码和web展示
四、文字的位置
1、top
top属性，规定元素的顶部边缘。该属性定义了一个定位元素的上边距边界与其包含块上边界的偏移。如为120px,就相当于从原来的位置向下偏移120px，如为-120px,就相当于从原来位置向上偏移120px。当然，若position的属性值为static时，top就无效。
.photo_page li{
position:relative;
}
.photo_page a {
position: absolute;
top: 120px;
}
2、当前代码和web展示
五、文字等其他优化
1、大小
font-size: 12px;
2、居中
text-alifb: center;
3、截断内容为省略号
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
4、背景颜色
background-color: yellowgreen;
5、当前代码和web展示
六、新的挑战
1、html还有的东西
此篇结束，敬请期待下一篇。
