CSS2浮动简介最初浮动是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一元素浮动后的特点1、脱离文档流2、不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高3、不会独占一行可以与其他元素共用一行4、不会margin合并也不会margin塌陷能够完美的设置四个方向的margin和padding5、不会像行内块一样被当做文本处理没有行内块的空白问题浮动后的影响1、对兄弟元素的影响后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响2、对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素解决方案1、给父元素指定高度2、给父元素也设置浮动带来其它影响3、给父元素设置overflowhidden4、在所有浮动元素的后面添加一个块级元素并给该块级元素设置clearboth5、给浮动元素的父元素设置伪元素通过伪元素清除浮动原理与4相同推荐.parent::after {content: ;display: block;clear: both}注布局原则设置浮动时兄弟元素要么全部浮动要么全部不浮动快捷输入标签.class类名tab直接输入有类名的标签标签#id属性名tab直接输入有id属性的标签定位1、相对定位1、如何设置给元素设置positionrelative可以用left、right、top、bottom四个属性调整位置2、相对定位的参考点是相对于自己原来的位置3、特点1、不会脱离文档流元素位置的变化只是视觉效果上的变化不会对其他元素产生任何影响2、定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的默认规则定位的元素会盖在普通元素之上都发生定位的两个元素后来者居上3、left不能和right一起设置top和bottom不能一起设置4、相对定位的元素也能继续浮动不推荐5、相对行为的元素也能通过margin调整位置不推荐注绝大对数情况下相对定位会与绝对定位配合使用2、绝对定位1、如何设置给元素设置positionabsolute可以用left、right、top、bottom四个属性调整位置2、绝对定位的参考点是参考它的包含块包含块1、对于没有脱离文档流的元素包含块就是父元素2、对于脱离文档流的元素包含块是第一个拥有定位属性的·祖先元素若所有祖先元素都没定位那包含块就是整个页面3、特点1、脱离文档流会对后面的兄弟元素、父元素有影响2、left不能和right一起设置top和bottom不能一起设置3、绝对定位、浮动不能同时设置如果同时设置则浮动失效以定位为主4、绝对定位的元素也能通过margin调整位置不推荐5、无论是什么元素行内、行内块、块级设置为绝对定位之后都变成了定位元素定位元素默认宽高都被内容所撑开且能自由设置宽高3、固定定位1、如何设置给元素设置positionfixed可以使用left、right、top、bottom四个属性调整位置2、固定定位的参考点是参考它的视口视口对于PC浏览器来说视口就是看网页的那扇“窗户”3、特点1、脱离文档流会对后面的兄弟元素、父元素有影响2、left不能和right一起设置top和bottom不能一起设置3、固定定位和浮动不能同时设置如果同时设置则浮动生效以固定定位为主4、固定定位的元素也能通过margin调整位置不推荐5、无论是什么元素行内、行内块、块级设置为固定定位之后都变成了定位元素4、粘性定位1、如何设置给元素设置positionsticky可以用left、right、top、bottom四个属性调整位置常用的是top2、粘性定位的参考点是离它最近的一个拥有“滚动机制”的祖先元素添加滚动用overflowscroll或auto若没有则为body3、特点1、不会脱离文档流它是一种专门用于窗口滚动时的新的定位方式2、最常用的值是top值3、粘性定位和浮动可以同时设置不推荐4、粘性定位的元素也能通过margin调整位置不推荐注粘性定位与相对定位的不同点粘性定位可以在元素到达某个位置时将其固定5、定位层级1、定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的2、如果位置发生重叠默认情况是后面的元素会显示在前面元素之上3、可以通过css属性z-index调整元素的显示层级4、z-index的属性值是数字没有单位值越大显示层级越高5、只有定位的元素设置z-index才有效6、如果z-index值大的元素依然没有覆盖掉z-index值小的元素那么请检查其包含块的层级6、定位可以越过padding7、定位的特殊应用注1、发生固定定位、绝对定位后元素都变成了定位元素默认宽高被内容撑开且依然可以设置宽高2、发生相对定位后元素依然是之前的显示模式3、以下所说的特殊应用只针对绝对定位和固定定位的元素不包括相对定位的元素1、让定位元素的宽充满包含块1块宽想与包含块一致可以给定位元素同时设置left和right为02、高度想与包含块一致top和bottom设置为02、让定位元素在包含块中居中注该定位的元素必须设置宽高布局1、版心在PC端网页中一般都会有一个固定宽度且水平居中的盒子来显示网页的主要内容版心的宽度一般是960~1200像素之间版心可以是一个也可以是多个2、常用布局名词3、重置默认样式1、使用全局选择器2、reset.css选择到具有默认样式的元素清空其默认样式语法link relstylesheet href./reset.css3、Normalize.css在清除默认样式的基础上保留了一些有价值的默认样式语法同reset.css官网地址Normalize.css Make browsers render all elements more consistently相对于reset.css,Normalize.css有如下优点1、保护了有价值的默认样式而不是完全去掉它们2、为大部分HTML元素提供一般化的样式3、新增对HTML5元素的设置4、对并集选择器的使用比较谨慎有效避免挑食工具杂乱注Normalize.css的重置和reset.css相比更加温和开发时可根据实际情况进行选择CSS3动画1、帧一段动画就是一段时间内连续播放n个画面。每一张画面就是一帧同样的时间内播放的帧数越多画面看起来越流畅2、关键帧在构成一段动画的若干帧中起到决定性作用的2~3帧3、动画的基本使用第一步定义关键帧定义动画1、简单定义2、完整定义第二步给元素应用动画用到的属性如下1、animation-name给元素指定具体的动画具体的关键帧2、animation-duration设置动画所需时间3、animation-delay设置动画延迟4、动画的其他属性最后一个关键帧内可用background-position水平方向要动的像素距离左负右正 垂直方向要动的像素距离上负下正表示背景图连续的动画效果5、动画复合属性6、多列布局常用属性注除了column-span要指定到跨列的元素其余都是加到容器上变换transformscale缩放倍数伸缩盒模型1、简介1、2009年W3C提出了一种新的盒子模型——Flexible Box伸缩盒模型又称弹性盒子2、它可以控制元素分布方式、元素对齐方式、元素视觉顺序3、截至目前除了在部分IE浏览器不支持其他浏览器均已全部支持4、伸缩盒模型的出现逐渐演变出了一套新的布局方案——flex布局注1、传统布局是指基于传统盒状模型主要靠display属性position属性float属性2、flex布局目前在移动端应用比较广泛因为传统布局不能很好的呈现在移动设备上2、伸缩容器、伸缩项目伸缩容器开启了flex的元素1、给元素设置displayflex或displayinline-flex该元素就变为了伸缩容器2、displayinline-flex很少使用因为可以给多个伸缩容器的父容器也设置为伸缩容器3、一个元素可以同时是伸缩容器、伸缩项目伸缩项目伸缩容器所有子元素自动成为了伸缩项目1、仅伸缩容器的子元素成为了伸缩项目孙子元素、重孙子元素等后代不是伸缩项目2、无论原来是哪种元素块、行内块、行内一旦成为了伸缩项目全都会“块状化”3、主轴与侧轴主轴伸缩项目沿着主轴排列主轴默认是水平的默认方向是从左到右侧轴与主轴垂直的就是侧轴侧轴默认是垂直的默认方向是从上到下4、主轴方向属性名flex-direction常用值注侧轴方向随着主轴方向改变而改变5、主轴换行方式属性名flex-wrap常用值如下6、flex-flow是一个符合属性复合了flex-direction和flex-wrap两个属性值没有顺序要求不推荐作业代码实现效果