Java前端基礎
阿新 • • 發佈：2018-08-11
box 分享 spl eas 遇到 css選擇器 html 屬性選擇器 pread 
標簽
行級標簽
- span
- a
- img
- em
- strong
- select / option
- textarea
- input
塊級標簽
- div
- h
- table / tr / td
- ul / li
- ol / li
- dl / dt / dd
- p
- br
- form
兩者主要區別
- 塊級標簽都可以設置寬、高和text-align
- 行級標簽由內容撐開，不能設置寬、高和text-align
部分行級標簽特殊屬性
- 行標簽 <img> 可以設置寬高
- 行標簽 <textarea> 可以設置寬、高和text-align
- 行標簽 <select> 單獨使用時可以設置寬高，比如 <select class="whb"> select標簽 </select> 可以，結合option使用時則不可以
- 行標簽 <input> 系列也可以設置寬高，並且除了type為checkbox、radio、file、hidden的標簽不可以設置text-align，其他標簽都可以（文字默認垂直居中）
一些常用的布局組合
- div > ul (ol) > li ： 常用於分類導航或者菜單
- div > dl > dt > dd ： 圖文混編
表格的直列化
table > colgroup
<colgroup span="直列化列數"> </colgroup> （col的功能與其一致）
這裏span相當於占位，即該標簽描述了幾列的屬性，類似於 colspan。
在開發中有時會遇到要對整個列的屬性進行修改的情況，對行的修改我們可以通過改 tr 的屬性來實現，但table中並沒有 tc 這樣的子標簽...所以我們需要間接通過 colgroup 標簽來實現功能。
例如：對列表的奇數列顏色加深
這裏我們使用 colgroup 標簽 + css選擇器可以非常方便的實現。
1 * { 2 margin: auto; 3 padding: 0; 4 } 5 table { 6 border: 1px solid #f7f7f7; 7 } 8 table td { 9 padding: 24px; 10 } 11css代碼table colgroup:nth-child(odd) { 12 background-color: #e0e0e0; 13 }
1 <table border="1" cellpadding="10" cellspacing="0"> 2 <colgroup></colgroup> 3 <colgroup></colgroup> 4 <colgroup></colgroup> 5 <colgroup></colgroup> 6 <colgroup></colgroup> 7 <colgroup></colgroup> 8 <colgroup></colgroup> 9 <colgroup></colgroup> 10 <tr> 11 <td>哈哈哈</td> 12 <td>哈哈哈</td> 13 <td>哈哈哈</td> 14 <td>哈哈哈</td> 15 <td>哈哈哈</td> 16 <td>哈哈哈</td> 17 <td>哈哈哈</td> 18 <td>哈哈哈</td> 19 </tr> 20 <tr> 21 <td>哈哈哈</td> 22 <td>哈哈哈</td> 23 <td>哈哈哈</td> 24 <td>哈哈哈</td> 25 <td>哈哈哈</td> 26 <td>哈哈哈</td> 27 <td>哈哈哈</td> 28 <td>哈哈哈</td> 29 </tr> 30 <tr> 31 <td>哈哈哈</td> 32 <td>哈哈哈</td> 33 <td>哈哈哈</td> 34 <td>哈哈哈</td> 35 <td>哈哈哈</td> 36 <td>哈哈哈</td> 37 <td>哈哈哈</td> 38 <td>哈哈哈</td> 39 </tr> 40 <tr> 41 <td>哈哈哈</td> 42 <td>哈哈哈</td> 43 <td>哈哈哈</td> 44 <td>哈哈哈</td> 45 <td>哈哈哈</td> 46 <td>哈哈哈</td> 47 <td>哈哈哈</td> 48 <td>哈哈哈</td> 49 </tr> 50 <tr> 51 <td>哈哈哈</td> 52 <td>哈哈哈</td> 53 <td>哈哈哈</td> 54 <td>哈哈哈</td> 55 <td>哈哈哈</td> 56 <td>哈哈哈</td> 57 <td>哈哈哈</td> 58 <td>哈哈哈</td> 59 </tr> 60 <tr> 61 <td>哈哈哈</td> 62 <td>哈哈哈</td> 63 <td>哈哈哈</td> 64 <td>哈哈哈</td> 65 <td>哈哈哈</td> 66 <td>哈哈哈</td> 67 <td>哈哈哈</td> 68 <td>哈哈哈</td> 69 </tr> 70 <tr> 71 <td>哈哈哈</td> 72 <td>哈哈哈</td> 73 <td>哈哈哈</td> 74 <td>哈哈哈</td> 75 <td>哈哈哈</td> 76 <td>哈哈哈</td> 77 <td>哈哈哈</td> 78 <td>哈哈哈</td> 79 </tr> 80 </table>html代碼
。。。有點蠢，為什麽要復制這麽多的 tr > td。
選擇 table 下的所有 colgroup 奇次子類，並對其設置樣式，便可以1達到操控整列樣式的效果。
CSS樣式
優先級
引入樣式
我們可以在三個不同的地方設置css樣式： 外部樣式（link+href），內部樣式（style標簽），行間樣式（<xxx style="css樣式">），對於這三中引入方式，通過就近原則來判斷優先級，從而決定哪個樣式被使用。
css選擇器
- ID 選擇器， 如：#data {}
- 類選擇器，如：.panel{}
- 標簽選擇器，如：p{}
- 屬性選擇器，如：input[type = "text"]
- 偽類選擇器，如：:hover{}
- 偽屬性選擇器，如：::before{}
- 通配選擇器，如： *{}
組合選擇器
- 後代選擇器（所有後代）： .father .child {}
- 子選擇器（第一層子代）： .father > .child{}
- 相鄰選擇器：.bro1 + .bro2{}
根據選擇器所使用的優先原則為：ID選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器
屬性後插有 !important 的屬性擁有最高優先級。
常見偽類選擇器
- 鼠標懸停： a : hover {}
- 鼠標點擊： a : active{}
- 未訪問狀態： a : link{}
- 訪問完成狀態： a : visited {}
- 獲取焦點： input : focus {}
盒子模型
margin：外邊距
border：邊框
padding：內邊距
content：盒子內容
當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。而這個盒子在頁面中所占據的位置，就是這四部分的和。
我們也可以通過 box-sizing 來自定義盒子模型： content-box 和 border-box。border-box讓我們在計算元素寬高時將邊框也考慮進去，而不用單獨計算。
一些常見CSS屬性
- line-height：行高，可用來調整文字垂直方向位置（居中）
- letter-spacing：字符間距
- text-decoration：文本修飾，下劃線、波浪線等。一般用來去除超鏈接樣式：text-decoration : none
- opacity：透明度。用的地方比較多，可聯合過渡實現淡入淡出的效果。
- border-radius：1-4length | % / 1-4length | %; （前四個代表水平，後四個代表垂直。計算順序為：左上、右上、右下、左下）
- border-image： border-image-source border-image-slice border-image-repeat
- box-shadow： [inset] x-offset y-offset blur-radius spread-radius color
- inset：陰影類型，此參數可選。如果不設值，則默認為外陰影。如取其唯一值 “inset” ，其投影為內陰影
- x-offset：陰影水平偏移量，其值可以是正負值，如果為正值，則陰影在對象右邊，否則在對象左邊
- y-offset：陰影垂直偏移量，其值可以是正負值，如果為正值，則陰影在對象底部，否則在對象頂部
- blur-radius：陰影模糊半徑，此參數可選，但其值只能是正值。如果為0，代表不具有模糊效果，其值越大，陰影邊緣越模糊
- spread-radius：陰影擴展半徑，此參數可選，其值可正可負。正值陰影延展擴大，反之縮小。
- color：陰影顏色，可選，取默認色。
- position： absolute | relative | fixed | static
- relative：相對定位。
- 不脫離文檔流，會繼續在文檔中占據一定位置
- 相對定位在同方向上（水平、垂直方向）只取一個
- 分行級和塊級標簽
- 使用padding和margin會影響定位的布局
- 應用： 1、網頁標簽微調； 2、與絕對定位聯合使用
- absolute：絕對定位
- 脫離文檔流
- 默認參照物為當前瀏覽器可視窗口
- 一個絕對定位元素會忽略掉祖先元素的padding
- 若要以祖先元素為參照物，則祖先元素必須為 relative 或 fixed 或 absolute 定位
- 應用：1、聯合相對定位，“子絕父相” 使用； 2、居中（{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
- fixed：固定定位
- 位置固定，參照物為當前瀏覽器可視窗口
- 不隨窗口的滾動而發生位置變化
- 應用：1、聯合錨點使用（回到頂部、回到底部）； 2、廣告欄、對話框等
- static：靜態定位（默認）
- relative：相對定位。
過渡 （transform、transition）
- transition-delay：延遲時間，延遲後執行過渡動畫
- transition-duration：過渡動畫執行時間
- transition-property：過渡使用的css3屬性，默認為all，一般也選擇all，可選值：all、none、指定樣式
- transition-timing-function：過渡時間函數，可選值：
- linear：規定以相同速度開始至結束的過渡效果
- ease：規定慢速開始，然後變快，然後慢速結束的過渡效果
- ease-in：規定以慢速開始的過渡效果
- ease-out：規定以慢速結束的過渡效果
- ease-in-out：規定以慢速開始和結束的過渡效果
- transform：
- translate(x, y)：2D水平、垂直移動
- scale(x, y)：2D縮放
- rotate(angle)：2D旋轉
- skew(x-angle, y-angle)：沿著x軸和y軸的旋轉（傾斜）
動畫（animation）
- animation-name：動畫名
- animation-duration：動畫持續時間
- animation-timing-function：動畫速度曲線
- animation-delay：動畫開始的延遲時間
- animation-direction：是否逆向播放，默認為normal
- animation-fill-mode：對象動畫之外的狀態
- none：不改變默認行為
- forwards：在動畫完成後，保持最後的css樣式
- backforwards：在動畫完成後，回到最初的css樣式
- both：向前向後填充的樣式都被應用
Java前端基礎