day 07

知識回顧

1、相對定位是相對於什麼進行定位的？

相對於自己原來的位置進行定位的

2、絕對定位是相對於什麼進行定位的？

相對於定位父元素來進行定位的

3、行級元素支持寬高的屬性有哪些？

• 左浮或者右浮
• 絕對定位 | 固定定位
• display：block
• display：inline-block

4、固定定位是相對於什麼進行定位的？

相對於瀏覽器窗口進行定位的

5、使用定位實現盒子水平垂直居中的關鍵代碼（兩種）

（1）margin負值實現盒子的絕對居中

（2）margin:auto實現盒子的絕對居中

6、哪些元素可以設置z-index

設置了相對定位、絕對定位和固定定位的元素可以設置z-index

7、浮動與定位異同點有哪些？

可以脱離文檔流的屬性： 左浮、右浮、絕對定位、固定定位

不同點：

• 浮動脱離文檔流，不脱離文本流
• 定位既脱離文檔流，又脱離文本流

8、列舉常見的表單元素（至少5個）

<input type="text">      /*單行文本框*/
<input type="image">      /*圖片提交按鈕*/
<input type="radio">      /*單選框*/
<input type="password">      /*密碼框*/
<input type="submit">      /*提交按鈕*/
<input type="checkbox">      /*多選框*/

9、設置單選框與多選框的默認選中用什麼屬性

checked屬性

10、設置下拉列表的默認選中用什麼屬性

selected屬性

一、其他常用屬性

1、vertical-align

設置元素的垂直對齊方式，對於行級元素和行塊級元素生效

vertical-align:baseline | top | bottom | middle;

（1）常用屬性值

• baseline 基線，將標籤放在父元素的基線上（默認值）
• top 頂部對齊，將標籤與父元素內最高標籤的頂端對齊
• bottom 底部對齊，將標籤與父元素內最低標籤的底部對齊
• middle 居中對齊，將標籤放在父元素的中間

（2）解決的問題

• 圖片下間隙問題
  盒子中放置一張圖片，圖片與盒子之間會有一個空白間隙

<div class="box">
    <img src="./images/timg.jpg" alt="">
</div>

img {
    width: 300px;
}
.box {
border: 1px solid red;
}

解決方案：

• 給圖片設置垂直對齊，值不為baseline就可以解決

.box>img {
    vertical-align: middle;
    vertical-align: top;
    vertical-align: bottom;
}

• 給圖片轉塊display:block

.box2>img {
    display: block;
}

• 給圖片的父元素設置font-size:0

.box3 {
    font-size: 0;
}

• 文本框與按鈕不對齊現象

文本框與按鈕之間高度不一致，有空白間隙，對不齊等現象

解決方案1：

• 給文本框與按鈕統一高度（height:20px），文本框顯示的高度為26像素，按鈕顯示的高度為20像素
• 調整按鈕的高度為26像素
• 空白間隙是因為行級元素及行塊級元素水平排列時有間隙
• 給文本框與按鈕添加垂直對齊方式，值不為baseline即可

<form class="form1" action="#">
    <!-- 文本框 -->
    <input type="text"><input type="submit" value="提交">
</form>

<style>
    .form1 input{
        height: 20px;
        vertical-align: middle;
        vertical-align: top;
        vertical-align: bottom;
    }
    /* 屬性選擇器 */
    input[type="submit"] {
        height: 26px;
    }
</style>

解決方案2：

先解決高度不一致問題（同上）

解決空白間隙和對不齊問題時，直接給文本框與按鈕設置浮動即可

.form2 input {
    float: left;
    height: 30px;
    border: 1px solid red;
}
.form2 input[type="submit"] {
    height: 34px;
}

2、顯示與隱藏

（1）display屬性

• display：none 隱藏（元素的佔位空間不存在了）
• display:block 顯示

（2）visibility屬性

• visibility:hidden 隱藏（元素佔位空間依然存在，相當於六娃"隱身"）
• visibility:visible 顯示

（3）opacity屬性

• opacity:0 隱藏（元素透明，佔位空間依然存在）
• opacity:1 顯示

3、border-radius

圓角屬性

（1）單邊圓角的設置

設置左上角的圓角

border-top-left-radius：px | %;

.box1 {
    background: pink;
    /* 單邊圓角 */
    /* 左上角圓角 */
    border-top-left-radius: 20px;
    /* 右上角 */
    border-top-right-radius: 50%;
    /* 右下角 */
    border-bottom-right-radius: 100px;
}

（2）複合用法

border-radius: 一個值 | 兩個值 | 三個值 | 四個值;

.box2 {
    background-color: aqua;
    /* 一個值： 四個角的圓角都是50% */
    border-radius: 50%;
}
.box3 {
    background-color: palevioletred;
    /* 兩個值： 左上角和右下角圓角都是100像素，左下角和右上角的圓角是60像素 */
    border-radius: 100px 60px;
}
.box4 {
    background-color: yellow;
    /* 三個值： 左上角圓角是100像素，左下角和右上角的圓角是60像素，右下角是40像素的圓角 */
    border-radius: 100px 60px 40px;
}
.box5 {
    background-color: green;
    /* 四個值： 左上角圓角是100像素，右上角的圓角是60像素，右下角是40像素,左下角的圓角是20像素 */
    border-radius: 100px 60px 40px 20px;
}

二、透明度屬性及兼容

1、rgba()

主要用於background-color、color、border-color等屬性的設置

alpha參數的取值是0-1，0代表是透明，1代表不透明，0-1代表半透明效果

兼容性：ie9+及標準瀏覽器最新版下是支持的

2、opacity屬性

opacity：x;

x取值0-1之間，0代表透明，1代表不透明，0-1代表半透明效果

opacity屬性如果設置給父元素，不僅父元素會有透明的效果，連下面的子孫後代的元素也會擁有透明度效果

主要用於整個圖片或者整個模塊的整體透明

兼容性：ie9+及標準瀏覽器最新版下是支持的

3、IE專屬濾鏡（解決opacity兼容）

filter:Alpha(opacity=x)

x取值是0-100之間，0代表透明，100代表不透明，0-100之間表示半透明效果

IE專屬屬性，問題比較多，比如：

• 如果filter屬性在ie6、7下不生效，可以添加以下代碼：

*zoom：1;

• 如果只想讓父元素擁有背景透明，而子孫後代的元素不擁有透明度效果，可以給父元素設置靜態定位，再給子元素設置相對定位，就可以實現子元素不透明的效果

.box2 {
    position: static;
    width: 500px;
    height: 300px;
    background-color:rgb(0,0,0);
    opacity: 0.3;
    /* opacity在ie6,7,8不兼容 */
    filter: Alpha(opacity=30);
}
.box2>p {
    position: relative;
}

三、ps常用工具

1、移動工具

移動工具主要負責圖層、選區、等的移動、複製操作
快捷鍵：v

2、抓手工具

快捷鍵：h
空格+鼠標左鍵拖動，空格鍵可臨時轉換為抓手工

3、放大鏡工具

放大鏡工具可以放大或縮小圖像。

放大：

• 點擊放大工具，點擊圖像。
• Ctrl+加號。
• 按住alt+鼠標滾動滾輪。

縮小：

• 點擊縮小工具，點擊圖像。
• Ctrl+減號。
• 按住alt+鼠標滾動滾輪。

4、文字工具

快捷鍵：t

5、吸管工具

快捷鍵：i
吸管工具可以用於拾取圖像中某個位置的顏色，一般用來取前景色或用該顏色填充某個選區，或者取色用繪圖工具（如畫筆工具、鉛筆工具等）來繪製圖形。

6、標尺工具

吸管工具組內切換找到標尺工具

標尺工具可以用來測量圖像的高度或者寬度

測量的方式：

使用選框工具和參考線進行測量

選框工具的快捷鍵是m

參考線需要先調出標尺，視圖----標尺，需要將標尺的單位調成像素

7、顏色疊加

顏色疊加可以將原有顏色改變為指定顏色，並通過調整其混合模式和不透明度來控偶之顏色疊加的效果，也能夠更加完善圖片的色彩度，使圖片變為指定的某一種顏色

8、切片工具

快捷鍵：c
根據用户需求截出圖片中的任何一部分，同時一張圖上可以切多個地方。另存為web所用格式的時候能將所切的各個部分分別保存成一張圖片，完全區分開來。保存時可選擇圖片格式以及切片類型。

四、常見圖片格式及特點

五、項目規範

1、項目文件夾的創建

首頁的命名以index.html，其他頁面按照功能進行命名（英文）

2、重置樣式表（reset.css的作用）

因為瀏覽器的兼容問題，不同瀏覽器對某些標籤默認值的解析是不同的，如果沒對 CSS 初始化往往會出現不同瀏覽器之間的頁面顯示差異。為了避免這種差異需要使用樣式重置。

3、頁面TDK

TDK 是一個縮寫，其中“T”表示為網頁定義標題，“D”表示為網頁定義描述 description，“K”表示為搜索引擎定義關鍵詞 keywords。

<title> 標題：只強調重點即可，儘量把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘量做到每個頁面的 <title> 標題中不要設置相同的內容。
<meta keywords> 標籤：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
<meta description> 標籤：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。

<!-- 網頁的標題 -->
    <title>小u商城--正品低價、品質保證、無中間商賺差價</title>
    <!-- 網頁描述 -->
    <meta name="description" content="小u商城-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悦的網上購物體驗!">
    <!-- 網頁關鍵詞 -->
    <meta name="keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡">

4、icon圖標

官網：http://www.bitbug.net/

引用icon圖標

在vs code中使用快捷鍵 link:favicon+tab，修改href中的路徑即可

<link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon">

5、合理嵌套HTML標籤

合理嵌套 HTML 標籤，ul 和 li 是固定嵌套，ul 直接子元素必須是 li，dl 和 dt、dd 是固定嵌套，dl 的直接子元素必須是 dt 和 dd。p 標籤不允許嵌套 p 標籤。a 標籤不允許嵌套 a 標籤和其他交互性元素，比如 button。

儘可能的控制元素嵌套層級，不合理的嵌套會影響頁面性能。

6、css書寫順序

建議遵循 : 佈局定位屬性 –> 自身屬性 –> 文本屬性 –> 其他屬性。也可根據自身習慣書寫，但儘量保證同類屬性寫在一起。
佈局定位屬性主要包括：display、 position（相應的 top、right、bottom、
left）、float 等。
自身屬性主要包括 : width 、height 、background、 margin 、 padding 和 border 等。
文本屬性主要包括：color、font、text-decoration、text-align、vertical-align 等

六、iconfont的使用

1、下載至本地，解壓文件夾

2、在項目文件夾中創建fonts文件夾，將解壓文件夾中的以下文件複製到fonts文件夾中

.eot .woff .woff2 .svg .ttf

3、將iconfont.css文件複製到css文件夾中去

4、修改iconfont.css中的字體路徑，如下：

5、將iconfont.css文件引入到當前html中

6、使用