一.浮动布局
浮动布局:让块级(block)标签在父级的宽度限制下同行显示,一行显示不下,自动换行。
注:要到达一行显示个数固定,一定要固定父级的宽度
/* 语法: 子级 { float: left | right; } 出现的问题:子级不再撑开父级高度 (不完全脱离文档流) 脱离文档流:层次结构会上移,覆盖有位置重叠且没脱离文档流的标签 不完全:浮动布局后,可以重新让子级撑开父级高度 清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫清浮动 语法: 父级:after { content: '' ; display: block; clear: both; } */
二.定位布局
1.固定定位
/* 盒子相对于屏幕完成位置布局,不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的),且和页面内容发生重叠时,该布局下的内容显示层次更高(覆盖其他内容) 语法: position:fixed; 总结: 1.参考系为页面窗口 2.一旦设置定位属性,top|bottom|left|right 四个方位(是定位属性盒子特有的)均可以参与布局 3.上下同时出现取上,左右同时出现取左 4.固定定位会完全脱离文档流(永远不会撑开父级高度,布局中父级一定需要自己设置高度) 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离文档流盒子的显示层次可以通过z-index属性来设置(脱离文档流盒子特有的),来改变显示层次的顺序(值大者覆盖值小者)
2.绝对定位
/* 兄弟标签之间不互相影响,都参照父级的显示区域来完成布局 语法: position:absolute; 总结: 1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位) 2.一旦设置属性,top|bottom|left|right 四个方位(是定位属性盒子特有的)均可以参与布局 3.上下同时出现取上,左右同时出现取左 4.绝对定位会完全脱离文档流(永远不会撑开父级宽度,布局中父级一定需要自己设置高度) 5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离文档流盒子的显示层次可以通过设置z-index属性(脱离文档流盒子特有的)来改变显示层次的顺序(值大者覆盖值小者) */
3.相对定位
/* 它的核心用处:父相子绝 语法:position:relative; 总结: 1.参考系为自身原有位置 2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局 3.top = -bottom | left = -right (上下取上, 左右取左) 4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局 注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子 */
三.过渡动画
/*持续时间*/ /*transition-duration: 3s;*/ /*延迟时间: 0*/ /*transition-delay: 1s;*/ /*过渡属性: all | 属性1, ..., 属性n | eg:height, background-color */ /*transition-property: all;*/ /*过渡曲线: ease*/ /*ease | ease-in | ease-out | ease-in-out | linear cubic-bezier(0.83, 1.46, 0, -1.29)*/ /*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/ /* 简写 */ /* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/ /*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/ transition: .3s linear;