实战发现的问题

• header背景全屏显示

html, body {
  height:100%;
}
#header {
  height:100%; 
  background: url();
}

• 块级元素垂直水平居中问题
• 首先要知道vertical-align: middle;属性对块级元素是没用的，对inline-block可以用
• 这个HTML结构下

    

    
123
    

• 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;
}

table-cell其实不设置宽高也填充满了父级

当设置了table-cell时子元素会出现一个下padding

子元素设置了table-cell并使用垂直居中出现上下padding

• 曾经任务中使用的块元素垂直居中方法有定位法和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;
}

用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