遇到的問題：
製作 animation 時，希望hover 主項目後，子項目動畫淡出；
但子項目在未出現前，不希望被滑鼠偵測到，也就是希望子項目元素 hover 不存在
下列為使用 visibility 達成以上需求的範例
visibility :
隱藏元素但保持元素的浮動位置
被設置為 hidden 的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置，
會影響後續元素的版面配置
display :
移除元素
被設置 none，這時元素實際上就從頁面中移除，它下面所在的元素就會被自動補齊，
後續元素不會受其影響
Reference
實例分析CSS屬性Display與Visibility不同
Animation CSS3: display + opacity
根據 MDN說明：
You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of
-1. As this is lower than 0 the item will always be displayed first.
由平面y軸來看，由上而下的順序為，負整數（-2） > 負整數 -1 > 零 > 正整數 (1) > 正整數 (2)
*負整數越大越前面
如果數字相等，則由圖層概念來看，依照 element 順序排列
ex:
<div> First Element </div>
<div> Second Element</div>
則 First Element 會在上面，Second Element 會在下面
<p>这是上面代码的实现<br />
我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
<span data-descr="small popups which also hide again">提示</span>。<br />
把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}content: " 內容有無值，決定此元素是否會出現
attr() : 於css中，用以取得特定element值的function
搭配自定義element, data-xx
content中·得已取得父元件的data-xx，接著再彈性的操控此data-xx的值
即可達成動態文字
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after
https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
http://www.webhek.com/post/css-content-and-attr.html
**不支援input
*{
box-sizing:border-box;
}
https://www.w3schools.com/css/css3_box-sizing.asp
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
The box-sizing property allows us to include the padding and border in an element’s total width and height.
If you set box-sizing: border-box; on an element padding and border are included in the width and height:
我們必須在網頁裡
面加入viewport 的設定來設定行動裝置顯示網頁的方式
| 1 | width | 寬& device‐width | 設定畫面寬度 |
| 2 | height | 高 & device‐ height | 設定畫面高度 |
| 3 | initial‐scale | 最小0.25，最大5 | 設定畫面的初始縮放比例 |
| 4 | minimum‐scale | 最小0.25，最大5 | 設定畫面的最小縮放比例 |
| 5 | maximum‐scale | 最小0.25，最大5 | 設定畫面的最大縮放比例 |
| 6 | user‐scalable | 1 or 0 (yes or no) | 設定是否允許使用者改變縮放比例 |
| 7 | shrink‐to‐fit | yes or no | 設定ios 是否放大縮小(只有ios 有) |
/* 在 iOS 旋轉手機畫面時鎖定文字不縮放 */
–webkit-text-size-adjust: none;
header{
width:100%
height:auto;
overflow:hidden; [備註一]
}
header > img{
width:50%;
height:auto; /*Default, can skip*/
margin:0 auto;
}
[備註一]
RWD觀念中，不得出現橫向卷軸(left scroll)
overflow:hidden => 超出範圍的皆蓋住、隱藏
Reference – CSS overflow property
article{
width: 100%;
height: auto;
overflow: hidden;
}
article > p {
color: #888;
font-size: 16px;
padding: 20px;
line-height: 32px; //font-size的兩倍
}
footer{
width:100%;
height:auto;
overflow:hidden;
line-height: 50px;
background-color: #008888;
text-align: center;
}
View
1.PC (1024px以上)
2.Pad (415~1024px)
3.mobile (414px以下)
**放在同一隻css中 @import url("reset.css"); /*PC版*/ *{ box-sizing: border-box; } header{ width: 100%; height: 100px; background-color: red; line-height: 100px; } nav{ width: 100%; height: 60px; background-color: #ccc; } nav > a{ display: block; width: 25%; height: 100%; background-color: blue; float: left; text-align: center; line-height: 60px; border: solid 1px black; color: black; } aside{ width: 30%; height: 200px; background-color: red; float: left; } article{ width: 70%; height: 200px; background-color: blue; float: left; } footer{ clear: both; width: 100%; height: 100px; line-height: 100px; text-align: center; background-color: #ccc; } /*Pad版，CSS後者會覆蓋前者，因此僅需寫欲改變的區塊*/ @media screen and (min-width:415px) and (max-width: 1024px) { nav{ width: 100%; height: auto; overflow: hidden; background-color: #ccc; } nav > a{ display: block; width: 50%; height: 60px; background-color: blue; float: left; text-align: center; line-height: 60px; border: solid 1px black; color: black; } aside{ width: 30%; height: 200px; background-color: red; float: right; } article{ width: 70%; height: 200px; background-color: blue; float: left; } } /*Mobile版*/ @media screen and (max-width:414px) { aside{ width: 100%; height: 150px; background-color: red; float:none; } article{ width: 100%; height: 100px; background-color: blue; float:none; } }
跟著節奏搖擺的工程師 