HTML 之 CSS 之脱离文档流、定位、过渡、2D形变
脱离文档流
文档流:
1、从左至右，从上至上的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。
脱离文档流:
让元素在文档流里飞起来,不再占用原来的空间。
也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素
不存在而进行定位。
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本
依然会为这个元素让出位置，环绕在周围。
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都
会无视它。
脱离文档流
body{
margin: 0;
}
.redDiv{
width: 200px;
height: 200px;
background: red;
}
.blueDiv{
width: 400px;
/*height: 100px;*/
background: blue;
}
.item{
width: 20px;
height: 150px;
background: yellow;
}
定位
定位
大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验
三番钟，里造会干我一样，爱象节款游戏。
/*群组选择器:样式对 red 和 blue 都生效*/
.redDiv, .blueDiv{
width: 200px;
height: 200px;
}
/*相对定位: 相对于自身的位置去移动*/
/*不脱离文档流,还占用原来的位置*/
/*position: static; 默认值: 不定位*/
/*position: relative; 相对定位*/
/*只有定位的元素才能使用: left top bottom right*/
.redDiv{
position: relative;
right: 10px;
bottom: 10px;
background: red;
}
.blueDiv{
background: blue;
position: relative;
}
/*绝对定位*/
/*如果父级只是做为定位父级使用,只需要使用 relative*/
/*相对于!定位!父级去定位*/
/*相对于带有position 属性(不包括 static) 的父级定位*/
/*如果父级没有position 属性,就去找父父级别,直到 html, 如果 html 也没有
position 就相对于 Document 窗口定位*/
/*绝对定位会脱离文档*/
.green{
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
background: green;
}
/*固定定位*/
/*相对于窗口的位置始终不变*/
/*left 0; 设置元素在距离窗口左边为0的地方*/
/*bottom 0; 设置元素在距离窗口下边为0的地方*/
/*会脱离文档流*/
.fixed{
width: 100px;
height: 380px;
background: gray;
color: white;
font-size: 20px;
position: fixed;
right: 0;
top: 50%;
margin-top: -190px;
}
/*对于定位的元素才可以使用 z-index*/
/*z-index 值越大,位置越靠前*/
/*z-index 可以为负值,负值情况下比正常元素靠后*/
/*z-index > 浮动 > 正常的元素*/
过渡效果
过渡
.redDiv{
margin: 100px auto;
width: 30px;
height: 50px;
background: red;
/* 过渡时间 */
transition-duration: 1s;
/* 过渡属性 */
/* 希望哪些样式变化的时候有过渡效果,多个属性用","隔开 */
/* 默认是 all */
transition-property: height, background;
/*
过渡的运动方式/速度变化
linear: ; 匀速
ease: ; 由快到慢,逐渐变慢
ease-in: ; 变快
ease-out: ; 变慢
ease-in-out: ; 先快再慢
*/
transition-timing-function: linear;
/*过渡延时*/
transition-delay: 1s;
/*复合写法*/
transition: all 1s 2s linear;
/*兼容性*/
/*谷歌 - webkit 内核*/
-webkit-transition: all 1s 2s linear;
/*火狐*/
-moz-transition: all 1s 2s linear;
/*IE*/
-ms-transition: all 1s 2s linear;
/*欧朋(Opera)*/
-o-transition: all 1s 2s linear;
}
.redDiv:hover{
height: 240px;
background: yellow;
}
2D形变
2D形变
旋转
平移
缩放
倾斜
div{
width: 200px;
height: 200px;
background: red;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
margin-left: 100px;
float: left;
transition: 2s linear;
}
.rotate{
/* 旋转 */
transform: rotate(45deg);
}
.rotate:hover{
transform: rotate(360deg);
}
.translate:hover{
transform: translate(0, 0);
}
.translate:hover{
transform: translate(50px, 50px);
}
.scale{
transform: scale(1);
}
.scale:hover{
transform: scale(0.5);
transform: scale(2, 0.5);
}
.skew{
/* skewX skewY skew */
transform: skew(0);
}
.skew:hover{
transform: skew(20deg);
}
/* 注意: 复合写法时,根据写的顺序,产生的效果并不相同!
例如: 先旋转,再平移和先平移,再旋转,产生的旋转一样,但是平移的位置不一样;
*/
双飞翼布局
双飞翼
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nemo maiores quia iure, voluptatibus ad, numquam,
obcaecati quisquam facilis exercitationem eligendi ratione.
Nihil neque consequatur esse, quas amet non possimus
laborum eos, illo unde adipisci, iusto fugiat repudiandae
odio quidem deleniti et eius nostrum itaque! Sed doloremque
ut est alias necessitatibus voluptates deleniti ea excepturi
reprehenderit atque saepe illo fuga expedita, culpa amet
nemo eos aperiam velit odit incidunt. Omnis voluptatem in
quibusdam, quaerat id facilis dolorum, nobis earum quis
officiis voluptatibus nisi cumque repellendus sint.
Qui nobis, aut eum ipsa? Voluptates eos similique
minima deserunt quidem, obcaecati dolorum ad a.
http://blog.csdn.net/huzongnan/article/list