七、vertical-align屬性、透明度屬性及相容、ps常用工具、常見的圖片格式、專案規範、命名參考、iconfont的使用
此文轉載自：https://blog.csdn.net/qq_52426181/article/details/110228561
一、css其他屬性
1、vertical-align屬性
設定元素的垂直對齊方式，適用於行級元素、行塊級元素。
（1）語法
vertical-align: top | bottom | middle | baseline;
- top 頂部對齊，將元素與父元素中最高的元素的頂部對齊
- bottom 底部對齊，將元素與父元素中最低的元素的底部對齊
- middle 居中對齊，將元素放在父元素的中間
- baseline 基線對齊，將元素放置在父元素的基線的位置上（預設值）
（2）解決問題
-
圖片下間隙問題
解決方案一： 給圖片設定vertical-align屬性，值不為baseline就可以了
.box { width: 640px; border: 1px solid red; } .box1 img { /* vertical-align: baseline; */ vertical-align: top; vertical-align: bottom; vertical-align: middle; }解決方案二： 給圖片轉塊
.box2 img { display: block; }解決方案三： 給圖片的父元素設定font-size為0
.box3 { font-size: 0; } -
文字框與按鈕不對齊問題
解決方案一：給input設定vertical-align屬性，值不為baseline就可以了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .form1 input{ height: 30px; border: 1px solid red; vertical-align: top; vertical-align: bottom; vertical-align: middle; } /* 屬性選擇器 element[attr=value] */ .form1 input[type="submit"] { height: 34px; } </style> </head> <body> <form action="#" class="form1"> <input type="text"><input type="submit"> </form> </body> </html>解決方案二：給input標籤設定左浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*清浮動*/ .clearfix::after { content: ""; display: block; clear: both; } .clearfix { *zoom: 1; } .form2 input { float: left; height: 20px; border: 1px solid blue; } .form2 input[type="submit"] { height: 24px; } </style> </head> <body> <form action="#" class="form2 clearfix"> <input type="text"> <input type="submit"> </form> </body> </html>
2、border-radius屬性
（1）單邊圓角的設定
border-top-left-radius 左上角的圓角
border-bottom-right-radius 右下角的圓角
（2）複合寫法
border-radius:一個值 | 兩個值 | 三個值 | 四個值;
一個值： 代表四個角的圓角
兩個值： 第一個值是代表左上和右下， 第二個值是右上角和左下角的圓角
三個值： 第一個是左上角， 第二個值是右上和左下角的圓角，第三個值是右下角的圓角
四個值： 第一個值是左上角，第二個值是右上角，第三個值是右下角，第四個值是左下角的圓角
3、顯示與隱藏
（1）display屬性
- none 隱藏（元素隱藏，並且佔位空間不存在了）
- block 顯示
（2）visibility屬性
- hidden 隱藏（元素隱藏，但是佔位空間存在的，“隱身”效果）
- visible 顯示
（3）opacity屬性
- 0 隱藏（元素透明，同時元素的佔位空間是存在的）
- 1 顯示
二、透明度屬性及相容
1、rgba()
- a-----alpha引數，取值0-1之間取值，0代表完全透明，1代表完全不透明，0-1之間是半透明效果
- 主要用於設定background-color、color、border-color等
- 相容性：ie6、7、8不相容的，ie9+及標準瀏覽器最新版是支援的
2、opacity屬性
opacity:x;
-
x取值是0-1，0代表完全透明，1代表完全不透明，0-1之間是半透明效果
-
主要用於設定整個模組的透明度，或者圖片透明度的調整
-
opacity如果設定在父元素身上，不僅自己會擁有透明度的效果，同時下面的所有後代元素也會擁有透明度的效果
-
相容性：ie6、7、8不相容的，ie9+及標準瀏覽器最新版是支援的
3、IE專屬濾鏡
filter:Alpha(opacity=x)
-
x的取值0-100之間取值，0代表完全透明，100代表完全不透明，0-100之間是半透明效果
-
相容性： ie6、7、8、9下支援，ie10被廢除了
注意：
-
ie專屬屬性，問題比較多
-
如果在ie6和ie7中設定filter屬性不生效，加以下程式碼
*zoom:1; /*啟用ie瀏覽器的haslayout*/ -
如果父元素擁有透明度效果，但是子元素沒有透明度效果時，可以給父元素設定靜態定位（static），給不擁有透明度效果的這個子元素設定相對定位（relative）
.box3 { position: static; width: 500px; height: 300px; background-color: rgb(255,0,0); opacity: 0.5; filter:Alpha(opacity=50); } .box3 p { position: relative; } .box3 img { position: relative; }
-
三、ps常用工具
1、移動工具
移動工具主要負責圖層、選區、等的移動、複製操作
快捷鍵：v
原位複製： ctrl+j
移動複製： alt不鬆手，滑鼠拖拽就可以
2、放大鏡工具
放大鏡工具可以放大或縮小影象。
放大：
-
點選放大工具，點選影象。
-
Ctrl+加號。
-
按住alt+滑鼠滾動滾輪。
縮小：
- 點選縮小工具，點選影象。
- Ctrl+減號。
- 按住alt+滑鼠滾動滾輪。
3、抓手工具
快捷鍵：h
空格+滑鼠左鍵拖動，空格鍵可臨時轉換為抓手工
4、文字工具
快捷鍵：t
文字工具是用來輸入文字的
5、吸管工具
快捷鍵：i
吸管工具可以用於拾取影象中某個位置的顏色，一般用來取前景色或用該顏色填充某個選區，或者取色用繪圖工具（如畫筆工具、鉛筆工具等）來繪製圖形。
6、標尺工具
找到吸管工具，組內切換就可以找到標尺工具了
標尺工具可以用來測量影象的高度或者寬度
7、切片工具
快捷鍵：c
根據使用者需求截出圖片中的任何一部分，同時一張圖上可以切多個地方。另存為web所用格式的時候能將所切的各個部分分別儲存成一張圖片，完全區分開來。儲存時可選擇圖片格式以及切片型別。
儲存為web所有格式： ctrl+ shift+alt+s 選中的切片
四、常見的圖片格式
.jpg .png
五、專案規範
1、reset.css（樣式重置）的作用
因為瀏覽器的相容問題，不同瀏覽器對某些標籤預設值的解析是不同的，如果沒對 CSS 初始化往往會出現不同瀏覽器之間的頁面顯示差異。為了避免這種差異需要使用樣式重置。
哪些樣式需要重置？
2、頁面tdk
t-------title 網頁的標題
d-----description 網頁描述
k------keywords 網頁關鍵詞
<!-- 網頁標題 -->
<title>京東商城---jd.com(正品保證、配送及時)</title>
<!-- 網頁關鍵詞 -->
<meta name="keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東">
<!-- 網頁描述 -->
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!">
放在head標籤中
3、icon圖示
在瀏覽器中開啟某一個網頁時，會在瀏覽器的標籤欄處顯示該網頁的圖示和標題，當網頁被新增到收藏夾或者書籤中時也會出現網頁的圖示。
icon圖示轉換工具：http://www.bitbug.net/
favicon.ico一般用於作為縮略的網站標誌,它顯示位於瀏覽器的位址列或者在標籤上,用於顯示網站的logo,如圖紅圈的位置， 目前主要的瀏覽器都支援favicon.ico圖示.
在html頁面中引入icon圖示
vs code中使用link:favicon+tab生成，修改href裡面的路徑就可以了
<!-- 引入icon圖示 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
4、合理巢狀HTML標籤
合理巢狀 HTML 標籤，ul 和 li 是固定巢狀，ul 直接子元素必須是 li，dl 和 dt、dd 是固定巢狀，dl 的直接子元素必須是 dt 和 dd。
p 標籤不允許巢狀 p 標籤。a 標籤不允許巢狀 a 標籤和其他互動性元素，比如 button。
儘可能的控制元素巢狀層級，不合理的巢狀會影響頁面效能。
5、css書寫順序
建議遵循 : 佈局定位屬性 –> 自身屬性 –> 文字屬性 –> 其他屬性。也可根據自身習慣書寫，但儘量保證同類屬性寫在一起。
佈局定位屬性主要包括：display、 position（相應的 top、right、bottom、
left）、float 等。
自身屬性主要包括 : width 、height 、background、 margin 、 padding 和 border 等。
文字屬性主要包括：color、font、text-decoration、text-align、vertical-align 等
六、命名參考
登入條：loginBar
標誌：logo
側邊欄：sideBar
廣告：banner
子導航：subNav
導航：nav
選單：menu
子選單：subMenu
搜尋：search
滾動：scroll
頁面主體：main
內容：content
標籤頁：tab
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
熱點：hot
新聞：news
按鈕：btn
投票：vote
狀態：status
合作伙伴：partner
外套：wrap
商標：label
標題：title
頂導航：topnav
左導航：leftsideBar
橫幅：banner
右導航：rightsideBar
子選單：subMenur
註釋：note
版 權：copyRight
選單內容： menuContent
友情連結：friendLink
頁尾：footer
選單容器：menuContainer
當前：current
啟用：acitve
邊導航圖示：sidebarIcon
購物車：shop
搜尋：search
下載：download
登陸：login
容器：container
註冊：regsiter
麵包屑：breadCrumb
七、iconfont的使用
阿里巴巴向量圖示庫
1、使用步驟：
下載程式碼後的操作步驟：
-
需要將下載好的資料夾中的字尾名為.eot .ttf .woff .woff2 .svg的5個檔案複製到專案檔案中的fonts中
-
將下載好的資料夾中的iconfont.css檔案複製到專案css資料夾中
-
將iconfont.css檔案中的字型路徑修改成正確路徑即可
-
在html中引入iconfont.css
-
直接使用
-
unicode
-
font class
<!-- unicode --> <p class="iconfont text"></p> <div class="iconfont"></div> <!-- font class --> <b class="iconfont icon-dingwei"></b>
-