Web前端开发笔记：CSS中经历（此片会不断更新~）_前端transition: all 1.5s;-优快云博客

.head_lab{
    position: relative;
    top: 0;
    height: 500px;
    width: 100%;
    background-color: antiquewhite;
}
.pic_back{
    background-image: url("../Media/Pic/pexels-eva-elijas-7254446.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    height: 100%;
    width: 100%;
}

背景图的拉伸自动适应的设置。

3.提示栏显示并定时消失功能实现：

css:
$("#info_bar").css('display', 'inline-block');
                    $("#info_bar").text("Your username or password was error!");
                    $("#info_bar").stop().animate({'width':'500px'},800);
                    var time=setInterval(function () {
                        $("#info_bar").stop().animate({'width':'0px'},800);
                        clearInterval(time);
                    },3000)

4.border边框线重合解决：

.table_PerLine{
    border: 1px solid black;
    overflow: hidden;
    margin-top: -1px;
}

-1px 可以向上移动-1px的距离。

5.盒子撑大解决：

box-sizing: border-box;

box-sizing属性可以解决padding和border撑大盒子的问题。

6.行内元素须知：

在使用行内元素时，我们要知道有关大小，内外边距等元素均会失去作用。

7.行内块元素换行存在空格须知：

在使用行内块时，编辑代码回车时会导致两个相邻元素之间存在空格。

解决方法：使用浮动。

8.主导栏、导航栏的编辑方法：

一般情况，我们会使用li>a的标签嵌套方法，来做导航栏。

这样的方式以用于提高其在浏览器上的可读性及效率。

9.元素层级问题：

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，并覆盖上面的元素

我们可以通过使用z-index改变层级关系。其默认值是0且需要配合定位使用。

10.使用CSS画三角形：

这里我们需要知道一个小概念，border其实是在各个边底部画底色三角形。如下图：

原图：

修改div为无边状态时：

.box{
            width: 0;
            height: 0;
            background-color: rgba(204, 204, 204, 0);
            border-top: 15px solid black;
            border-right: 15px solid red;
            border-bottom: 15px solid yellow;
            border-left: 15px solid pink;
        }

这时我们只需要选中想要的任何一个边的三角形，并隐藏其余部分的color就行。

11.last-child伪类选择器失效分析：

首先我们发现以下html代码可以实现CSS代码：

css:
.pathway:first-child:hover > div:first-child {
            transition: all 1.5s;
            transform: translate(1000px, 0);
        }

        .pathway:nth-child(2):hover > div:first-child {
            transition: all 1s;
            transform: rotate(360deg);
        }

        .pathway:last-child:hover > div:first-child {
            transition: all 1s;
            transform: scale(150%);
        }


HTML:
<div>
    <div class="pathway clearfix">
        <div>
            <img src="/Res/video&photo/Logo.png" alt="">
        </div>
    </div>

    <div class="pathway clearfix">
        <div>
            <img src="/Res/video&photo/Logo.png" alt="">
        </div>
    </div>

    <div class="pathway clearfix">
        <div>
            <img src="/Res/video&photo/Logo.png" alt="">
        </div>
    </div>
</div>

但是，我们将最外层的div去掉时，会使last-child失效。

原因是：在使用last-child时所有元素必须形成闭合区间。最简单的方法就是加一层div套住内部元素。