1.高度塌陷（一）高度塌陷的条件1）子元素浮动2）父元素未设置高度（2）解决方法1）添加overflow:hidden;(triggerBFC)totheparentelement缺点：会把父元素以外的元素隐藏2）在浮动元素后面添加一个块级元素（div），并给该元素设置clear属性。清除：左/右/两者；clearfloating（清除浮动元素对自身的影响），只对块级元素有效缺点：代码冗余3）使用伪元素的方法普遍清除高度折叠的元素::after{content:"";清除：两者；清除浮动显示效果：block；转换为块}2.伪元素将最后一个子元素添加到这个元素::after{content:"";这个属性必须包括在内，即使没有单词也需要加上引号}Element::after{content:url();insertpicture}添加第一个子元素到这个元素::before{content:"";该属性必须包含，没有的话必须加引号}Element::before{content:url();插入图片}选择第一个字符（中文：第一个字符，英文：第一个字母）element::first-letter{对应样式}选择第一行element::first-line{对应样式}3.线性渐变语法：背景图像/背景：线性渐变（方向，颜色值1，颜色值2）；方向tobottomdowntotopuptorighttorighttolefttothelefttorightbottomtotherightlowercornertorighttoptotheupperrightcornertolefttoptoleftupperleftcornertoleftbottomtothelowerleftcorner数值+deg(角度)标准写法:background-image:linear-gradient(30deg,yellow,red,blue)compatiblewriting/-moz-Firefox/background-image:-moz-linear-gradient();/-o-欧鹏/背景图e:-o-linear-gradient();/-webkit-Google/background-image:-webkit-linear-gradient();重复线性渐变background-image:repeating-linear-gradient(direction,colorvaluerange,colorvaluerange);背景图像：重复线性渐变（红色50px，蓝色55px）；/*0-50红色纯色50-150红色到蓝色的渐变范围150-200蓝色纯色*/4.Radialgradientbackground-image/background:radial-gradient(x轴方向，y轴方向，颜色值1，颜色值2)；方向与背景图片的位置设置相同，默认居中。如果要设置方向，必须添加浏览器前缀background-image:-webkit-radial-gradient(leftcenter,red,yellow,green);重复径向渐变背景图像：重复径向渐变（红色50px，黄色55px）；将50-55之间的渐变效果，重复显示5.Transitiontransition-property：需要transition的属性transition-duration：Transition执行时间值+s/ms1s=1000mstransition-delay：Transition延迟时间值+s/ms1s=1000mstransition-timing-function：transition执行的效果linearuniformspeed/easegraduallyslowing/ease-inacceleration/ease-outdeceleration复合写法：transition:attributesthatneedtotransition(all:所有属性)transitionexecutiontimetransition注意：属性值之间没有顺序。只有一次代表过渡执行时间。两次。第一个代表执行时间，第二个代表延迟时间。transition属性应该加在需要transition的原始元素上，不要加在hover上
