CSS中position和display transition的一些用法

今天，我们简单谈一下CSS当中的三个属性的用法，这些东西用得好的话，话让你的网页布局更加的简单和美观。
首先，说一下position。position我们设置的属性值可以有relative fixed absolute等等一系列值，这些值我们都通常见的，但是组合起来应用的话会有想不到的效果。首先，看看absolute吧，absolute必须建立在relative的父级基础上，所以，首先给absolute元素的父级设置一个relative的属性值吧。我们如果想要一个框水平垂直居中，css的方法也可以一个absolute，配合一个上下左右的距离为0 ，设置一个margin为auto，就能实现单个元素的居中。fixed我们一般用在header上面，但是要注意后续的padding值得调整，保证不要遮住内容。
2、我们也可以了聊一聊display，这个函数可以可以改变一个标签的行内 行内块 块元素的属性，也可以让你的内容什么也不是（浏览器界面看不到），这样的话，就可以配合一些伪类选择器做一些导航之类的。当然，也可以配合after，将增加元素定义为块元素，消除浮动影响。
3、谈一下渐变，渐变主要有4个属性，分别是transition-property transition-duration transition-timing-function transition-delay（第三个是时间函数，一般叫做贝塞尔曲线，其他的都可以根据英语翻译过来理解），当然我们想要实现渐变，必选有两个状态才能实现。今天就说到这里，会后大家可以尝试一下用后面两个写一下一些网页，实现一些功能。下面是一个简单的恶作剧画面。

}.shuai2:hover ~main>.impression2{ display: inline-block; opacity: 100; border: 0.2rem dashed blanchedalmond; font: bolder italic 20rem “微软雅黑”; margin: auto; margin-right: 2rem; background: gray; border-radius: 1rem; padding: 1rem; color: azure; text-shadow: 1rem 0rem 0.3rem blue;

}.shuai3:hover ~main>.impression3{ display: inline-block; opacity: 100; border: 0.2rem dashed blanchedalmond; font: bolder italic 20rem “微软雅黑”; margin: auto; margin-right: 2rem; background: gray; border-radius: 1rem; padding: 1rem; color: azure; text-shadow: 1rem 0rem 0.3rem blue;

}.shuai4:hover ~main>.conclution{ display: inline-block; opacity: 100; border: 0.2rem dashed blanchedalmond; font: bolder italic 10rem “微软雅黑”; margin: auto; margin-right: 2rem; background: gray; border-radius: 1rem; padding: 1rem; color: azure; text-shadow: 1rem 0rem 0.3rem blue;

}

  <div class="shuai1">       点击这里了解****    </div>    <div class="shuai2">            点击这里了解****    </div>    <div class="shuai3">            点击这里了解****    </div>    <div class="shuai4">          总结    </div>

       <main>     <div class="impression1">*</div>     <div class="impression2">*</div>     <div class="impression3">*</div>     <div class="conclution">*************</div>


       </main></body>