前端学习笔记-html基础(3)

浮动与定位

网页基本布局

网页组成部分由来网站导航、网页主体、网页底部、侧边栏来组成协调，构成一个完整的网页布局。

标准文档流：根据块元素或行内元素特性从上到下、从左到右自然排序。

块元素：<h1>~<h6>、<p></p>     内联元素：<span></span> <a></a> 

display:显示方式 block/inline/inline-block/none

浮动与清除浮动

float：浮动方向 left/right/none(默认)

clear：清除方向 left/right/both/none

overflow：溢出处理方式 visible/hidden/scroll/auto

解决父级边框塌陷

1.设置父元素高度 2.浮动元素后添加空div，使用clear属性清除浮动 3.添加after伪类 4.添加overflow属性

定位

position：定位方式  static(默认)/relative(相对)/absolute(绝对)/fixed(固定)

网页元素透明度

opacity：a

CSS动画

变形

transform：none 变形函数 

2D： translate()位移/scale()缩放/skew()倾斜/rotate()旋转

3D：translate3d()位移/scale3d()缩放/rotate3d()旋转

CSS3过渡

transition：过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间

transition-property：过渡属性

transition-duration：过渡所需时间

transition-timing-function：过渡动画函数

transition-delay：过渡延迟时间

过渡触发机制

伪类触发 媒体查询 JavaScript触发

CSS3动画
animation：动画名称 动画时间 动画方式 延迟时间 播放次数 播放方向 播放状态 动画时间外的状态

animation-name：动画名称

animation-duration：动画时间

animation-timing-function：动画方式

animation-delay：延迟时间

animation-iteration-count：播放次数

animation-direction：播放方向

animation-play-state：播放状态

animation-fil1-mode：动画时间外的状态