- header背景全屏顯示
html, body {
height:100%;
}
#header {
height:100%;
background: url();
}
- 塊級元素垂直水平居中問題
- 首先要知道vertical-align: middle;屬性對塊級元素是沒用的，對inline-block可以用
- 這個HTML結構下
<div class="warp">
<div class="div1">
<h5>123</h5>
</div>
</div>
- table-cell到底是什么! 我們發現父級table，子元素table-cell后子元素的寬高其實沒用了，子元素的寬高就是父級的寬高，完全充滿在父級元素里。并且被設置了table-cell屬性的子元素會出現一個下填充的padding，給子元素設置vertical-align:middle;就會出現上下填充padding并垂直居中。
- 父級table-cell，子元素inline-block這個方法父級必須要有固定寬度，使用100%繼承父類不行，因為父級設置為table-cell后不具有塊級元素的特性，不能繼承寬高
.warp {
width:100px;
height:100px;
border:3px solid yellow;
display:table;
margin: 30px auto;
}
.div1 {
border: 1px solid;
display: table-cell;
text-align:center;
vertical-align: middle;
}
- 曾經任務中使用的塊元素垂直居中方法有定位法和inline-block，這里列出inlineblock對照父級table，子級table-cell的方法。
.warp {
width:500px;
height:500px;
border:1px solid;
display:table-cell;
text-align:center;
vertical-align: middle;
}
div1 {
width:200px;
height:200px;
background-color:black;
display: inline-block;
}
這里只是針對了vertical-align屬性的不同設置方法
區別：一個是父級設置為table-cell，子元素設置為inline-block;在父級上設置了vertical-align屬性。一個是父級設置為table，子元素設置table-cell屬性并且寬高充滿父級,vertical-align屬性設置在了子元素上。這里說一下為什么實戰14沒用使用inline-block方法。因為用了這個方法，container類父元素就要設置成table-cell，這個屬性不能使用margin居中，而設置成table就可以。為了結構上的簡潔
-
背景蒙層
-
絕對定位，設置一個背景有透明度的背景色，top，left，bottom，right都設置為0，蒙層不要設置寬高
box3蒙層 -
給box2居中絕對定位后設置z-index
蒙層中間彈框
這是結構 -
position: sticky; 只支持火狐
Paste_Image.png - 過渡屬性
-
transition-property: background-color;
transition-duration: 0.6s;
設置一下placeholder的樣式，如：
input::-webkit-input-placeholder { /* WebKit browsers /
font-size: 24px;
}
input:-moz-placeholder { / Mozilla Firefox 4 to 18 /
font-size: 24px;
}
input::-moz-placeholder { / Mozilla Firefox 19+ /
font-size: 24px;
}
input :-ms-input-placeholder { / Internet Explorer 10+ */
font-size: 24px;
}
-
做實戰3里面的時間線的時候發現給ul相對定位，ul:before絕對定位，沒left 50%也居中，審查元素發現ul:before竟然繼承了text-align:center，原因是ul:before沒有display為塊級元素.
這里是設置了塊級的
這里沒有設置為塊級元素沒有left50%也居中了 做時間線的時候，線沒有設置高度，只是絕對定位后設置了top:0;bottom:0; 這是蒙層的技巧。
-
不僅inline-block之間會有4px的縫隙，inline元素跟著block元素換行后也有4px的縫隙
img后跟div
