CSS--使用CSS操作圖片與文字
本次將要學習的是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、背景顏色
5、當前程式碼和web展示
六、新的挑戰
1、html還有的東西
此篇結束，敬請期待下一篇。