css 认识-排版与动画

1.float与position的差异

 

float网页元素中的排版属性，float 有左浮动left与右浮动right 以及none, 默认none 不浮动 ,元素float会脱离文档流，当排版时候元素浮动了，应当及时清除浮动（clearfix），避免影响其他元素布局.float 与position 也有不同地方，float是传统css布局手段,position是真正的定位.能定位元素在文档中的任意位置,一些小的元素定位常常用position来解决。

 

2.CSS position（定位）：

 

CSS 种Position定位分为 relative:相对定位，absolute 绝对定位以及static ：默认值。

relative:元素将按照正常文档流规则排列，相对定位元素仍然处于正常文档流当中，但可以通过left、top、right和bottom来改变元素的位置，元素原来位置将保留，不被其他元素所占据;

 

absolute ：绝对定位元素脱离文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置，元素将不再占用原有位置，方向值根据left,top,righth和bottom 来改变

 

 absolute 根据父及元素relative来定位，父及没有设置relative，安文档body来。 

 

fixed ：固定定位，元素脱离正常文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置

 

元素不在占用原有位置，已浏览器可视区的的4个角度做参考

 

引用场景很多如 nav 栏目跟随滚动而滚动，电商网站贴边栏目

 

 

3.元素居中，可通过设置CSS来设置元素居中

 

<div class=”text-C”>元素内容</div>

 

<div class=”marg-C”>元素居中</div>

 

text-C{ text-align:center; height:200px;line-height:200px; }

 

marg-C{ width:500px; margin:0 auto; }

 

4.css3动画:css3种动画有下面这不下

有transition,@keyframes myfirst,animation

<div class=”anima”></div>

.Anima{ width:200px; height:100px; transition:width .5s ease .1s ； -webkit-transition: width.5s ease .1s;}

.Anima:hover{ width:100px; }

想要东西更细致一点可用这个属性

可以通过 @keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@keyframes myfirst

{

0% {

    margin-left: 100px;

    background:green;

  }

  40% {

    margin-left:150px;

    background:orange;

  }

  60% {

    margin-left: 75px;

    background: blue;

  }

  100% {

    margin-left: 100px;

    background: red;

  }

}

Div:hover{ animation:myfirst 3s ease .1s }