5月29日学前端携程网1

1.使用伪元素插入，就不用建很多div了

.box::before{

    content:"";
    display: block;

}

这里可以看成两行的结构

如果想用两列的结构

.search::before{
    content: "";
     position: absolute;

然后的问题是第二列的元素怎么写

解决办法设置padding-left即可

 

2.绝对定位和相对定位

总结：

Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

 

3.line-height和height关系

如果line-height==height居中

如果line-height>height偏下

反之偏上

案例：设定盒子height为26px，设定上下边框为1px

这里的line-height要用26-2=24px

4.box-shadow

    box-shadow: 0 2px 4px rgba(0,0,0, 0.2);

x轴偏移0，y轴偏移2px(指底部阴影2px) 模糊4px  后面是颜色选择灰色

 

5.伪元素插入时，伪元素可以使用margin-left= - 5px使右边元素靠近过来

 

6