- 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
