本文共 21749 字，大约阅读时间需要 72 分钟。

清除浮动带来的影响--.clearfix

.clearfix{ *zoom:1; }.clearfix::after{    content: "";    display: block;    clear:both;    visibility: hidden;    height: 0;

文本换行

white-space: nowrap;强制不换行	 div内自动换行	word-break: break-all;  单词截断，下行接着显示	word-wrap: break-word;	单词不够放，放下一行限时

弹性盒子布局-flex

1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设备类型不同的时候，都能够确保元素拥有恰当的布局方式    弹性性盒模型的内容包括：弹性容器、弹性子元素（项目）    引入弹性盒布局的目的：用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间，即使弹性子元素的尺寸发生动态变化，弹性盒布局也能正常工作2）设置弹性盒子：    display: flex; 将元素设置为弹性盒容器    display: inline-flex; 将元素设置为弹性盒容器    注意：设置为flex布局之后，子元素的float、clear、vertical-align属性都会失效3）基本概念：    容器    项目    主轴：默认水平方向，向右           主轴的起点        主轴的终点    交叉轴：默认垂直方向，向下        交叉轴的起点        交叉轴的终点4）容器属性——添加弹性容器上    flex-direction属性：设置主轴的方向        flex-direction: row; /*默认值，设置主轴方向为水平方向，起点在左侧*/        flex-direction: row-reverse; /*设置主轴方向为水平方向，起点在右侧*/        flex-direction: column; /*设置主轴方向为垂直方向，起点在上方*/        flex-direction: column-reverse; /*设置主轴方向为垂直方向，起点在下方*/    justify-content属性：设置弹性子元素在主轴上的对齐方式        justify-content: flex-start; /*默认值，子元素位于弹性盒的开头*/        justify-content: flex-end; /*子元素位于弹性盒的结尾*/        justify-content: center; /*子元素位于弹性盒的中间*/        justify-content: space-around; /*子元素之前、之后、之间都有空白空间*/        justify-content: space-between; /*子元素和子元素之间有空白空间*/    align-items属性：设置弹性子元素在交叉轴上的对齐方式        align-items: stretch; /*默认值，如果子元素没有高度或高度为auto时，将占满整个容器的高*/        align-items: flex-start; /*子元素在交叉轴的起点对齐*/        align-items: flex-end; /*子元素在交叉轴的终点对齐*/        align-items: center; /*子元素在交叉轴的中点对齐*/        align-items: baseline; /*子元素在第一行文字的基线对齐*/    flex-wrap属性：设置弹性子元素在一根轴线上排不下的换行方式        flex-wrap: nowrap; /*默认值，不换行*/        flex-wrap: wrap; /*换行，第一行显示在上方*/        flex-wrap: wrap-reverse; /*换行，第一行显示在下方*/    align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效        align-content: stretch; /*默认值，轴线占满整个交叉轴*/        align-content: flex-start; /*与交叉轴的起点对齐*/        align-content: flex-end; /*与交叉轴的终点对齐*/        align-content: center; /*与交叉轴的中点对齐*/        align-content: space-around; /*每根轴线之上、之下、之间都有留白*/        align-content: space-between; /*每根轴线之间都有留白*/5）项目属性——添加在子元素上    order属性：调整子元素的排列次序        order: 数值; 数值不加单位，默认值为0，数值越大，排列越靠后    flex-grow属性：调整子元素的放大比例        flex-grow: 数值; 数值不加单位，默认值为0，表示不放大    flex-shrink属性：调整子元素的缩小比例        flex-shrink: 数值; 数值不加单位，默认值为1，表示当空间不足时，等比例缩小；值为0表示当空间不足时，不缩小    align-self属性：调整弹性容器中被选中的子元素的对齐方式        align-self: auto; /*默认值，继承了父容器的align-items属性，如果没有父元素值为stretch*/        align-self: stretch; /*占满整个容器的高度*/        align-self: flex-start; /*交叉轴起点对齐*/        align-self: flex-end; /*交叉轴终点对齐*/        align-self: center; /*交叉轴中点对齐*/        align-self: baseline; /*子元素的第一行文字的基线对齐*/

网格布局-Grid

flex布局——轴线，可以看成一维布局1、基本介绍    Grid网格布局——二维布局    可以将容器分成“行”、“列”，产生单元格2、基本概念    容器container——使用网格布局的区域    项目item——容器内使用网格定位的子元素    行row——容器中水平区域    列column——容器中垂直区域    单元格cell——行和列交叉区域，m行n列会产生的单元格数为m*n    网格线grid line——划分网格的线，m行有m+1根水平网格线3、相关属性：容器属性——写在父元素上1）display属性:    display: grid; 容器采用网格布局2）grid-template-rows属性、grid-template-columns属性 ——对容器的水平方向和垂直方向划分    属性值： 像素|百分比|auto|repeat()|fr|minmax()|网格线名称        repeat(),有两个参数，第一个参数表示重复的次数，第二个参数表示重复的值        minmax(),有两个参数，分别表示最大值和最小值		grid-template-rows: 100px 100px 100px;        grid-template-columns: 100px 25% 100px;		grid-template-columns: 100px auto 100px;		grid-template-rows: repeat(3, 30%);		grid-template-rows: 1fr 2fr 1fr;/*3个值的和必须大于等于1，否则会有空白空间*/		grid-template-rows: repeat(2,1fr) minmax(100px,300px);		grid-template-rows: 1fr 1fr minmax(100px,200px);		grid-template-rows: [r1] 100px [r2] auto [r3] 100px; /*网格名称*/        grid-template-columns: [c1] 100px [c2] auto [c3] 100px;				3）grid-row-gap属性、grid-column-gap属性、grid-gap属性  ——定义网格中的网格间隙    定义网格中的网格间隙    简写：grid-gap: grid-row-gap   grid-column-gap;		grid-row-gap: 10px; 行间距		grid-column-gap: 20px; 列间距				grid-gap: 10px 20px;	4）grid-auto-flow属性：  ——排列顺序    grid-auto-flow: row; 默认值，先行后列    grid-auto-flow: column; 先列后行		5）justify-items属性、align-items属性、place-items属性——内容分布    justify-items属性：水平呈现方式    align-items属性：垂直呈现方式        属性值：start|end|center|stretch				开始|结束|中间|默认    简写：place-items: align-items justify-items;			place-items: start end;		6）justify-content属性、align-content属性、place-content属性 --整体分布    justify-content属性：水平分布方式    align-content属性：垂直分布方式        属性值：start|end|center|space-between|space-around|space-evenly;				开始|结束|中间|元素间留白|元素之前之间之后留白|元素间隔相等	简写：place-content: justify-content align-content;			7）grid-template-areas属性：定义区域    应用在子项目的属性：grid-area属性，规定项目所在区域	    grid-template-areas: "box1 box1 box1"							 "box2 box2 box3"							 "box2 box2 box3";		划分三个区域box1、box2、box3		分配三个区域：		.wrap div:nth-child(1){            grid-area: box1;        }        .wrap div:nth-child(2){            grid-area: box2;        }        .wrap div:nth-child(3){            grid-area: box3;        }	项目属性：1）grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性-项目的位置    grid-column-start属性：水平填充，左边框所在的垂直网格线    grid-row-start属性：垂直方向填充，上边框所在的水平网格线	grid-column-end属性：右边框所在的垂直网格线    grid-row-end属性：下边框所在的水平网格线	简写：    grid-column: grid-column-start / grid-column-end;     grid-row：grid-row-start / grid-row-end;		grid-column-start: 2; 第二根垂直轴线开始	grid-row-end: 3;	第三根水平轴线结束	注：单位是第几条轴线，左-上，起始和结束可以决定项目的大小2）justify-self属性、align-self属性、place-self属性    justify-self属性：水平方向的对齐方式    align-self属性：垂直方向对齐方式        属性值：start|end|center|stretch				开始|结束|中间|默认

CSS选择器

0）伪元素选择器：    element::before{ content:"伪元素的内容"; 属性名称: 属性值; }         在element的内部，内容之前添加"伪元素的内容"    element::after{ content:"伪元素的内容"; 属性名称: 属性值; }         在element的内部，内容之后添加"伪元素的内容"1）属性选择器css2中的属性选择器：    element[attr]{ } 指定了属性名，但没有指定属性值得element元素    element[attr=value]{ } 指定了属性名，并且指定了属性值为value的element元素    element[attr~=value]{ } 指定了属性名，并且属性值可以为词列表中的包含指定属性值value的element元素css3中的属性选择器：    element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素    element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素    element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素2）结构性伪类选择器    :root{ } 匹配根元素    element:first-child{ } 选择一组相同元素中的第一个元素    element:last-child{ } 选择一组相同元素中的最后一个元素    element:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式        偶数：even  或  2n        奇数：odd  或   2n+1    element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式    element:nth-of-type(n){ } 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式    element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算3）状态伪类选择器    element:checked{ } 选择页面中处于选中状态的element元素    element:disabled{ } 选择页面中处于禁用状态的element元素    element:enabled{ } 选择页面中处于可用状态的element元素

图片下方间隙问题

将图片转成块级元素，解决下方间隙;为图片设置垂直对齐方式(vertical-align属性)，解决下方间隙；为图片的父元素设置高度，并添加overflow属性，解决下方间隙；为图片的父元素设置font-size属性或line-height属性，属性值为0，解决下方间隙问题：

文本框和按钮不对齐现象

为input元素设置vertical-align属性;为input元素设置浮动属性

生成BFC

根元素float: left|right;position: absolute|fixed;overflow: hidden|scroll|auto;display: inline-block;

盒子和文字阴影属性

1）盒子阴影box-shadow属性    box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的大小  阴影颜色 内阴影|外阴影(默认值)；        x轴偏移量--水平方向的偏移，正值向右偏，负值向左偏        y轴偏移量——垂直方向的偏移，正值向下偏，负值向上偏    注意：可以向一个元素中添加多个阴影，多组阴影之间用逗号隔开2）文字阴影text-shadow属性    text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影颜色；

文本属性

border-width: 边框属性    thin;//thin细边框、medium中等、thick粗outline属性：轮廓，不占位     outline: none; 去掉轮廓线     outline: 轮廓宽度  轮廓线型 轮廓颜色;     outline-offset属性：对轮廓进行偏移letter-spacing属性：字间距word-spacing属性：词间距1）单行文本溢出    text-overflow: clip;文字溢出后直接修剪    text-overflow: ellipsis; 文字溢出后用省略号代表被修剪的文本       text-overflow: string; 文字溢出后用给定的字符串表示被修剪的文本。只在火狐浏览器中生效     注意：要实现文本溢出处理，需要与white-space属性和overflow属性配合使用2）多行文本溢出显示省略号    （1）使用webkit的css扩展属性        .box1{            width: 200px;            border: 2px solid #000;            overflow: hidden;            text-overflow: ellipsis;            display: -webkit-box;/*将标签设置为弹性伸缩盒子*/            -webkit-line-clamp: 2;/*行数*/            -webkit-box-orient: vertical;/*伸缩盒子元素的排列方式*/        }    （2）使用伪元素模拟溢出显示省略号的效果        .box2{            width: 200px;            border: 2px solid #000;            height: 60px;            line-height: 30px;            overflow: hidden;            position: relative;        }        .box2::after{            content: "......";            position: absolute;            right: 0;            bottom: 0;            background: #fff;            padding-left: 4px;            padding-right: 10px;        }

边框圆角border-radius属性

border-radius: 20px; /*元素四周都有20px的圆角*/border-radius: 10px 30px;/*左上角和右下角各有10像素，右上角和左下角各有30像素的圆角*/border-radius: 10px 20px 30px;/*左上角有10像素，右上角和左下角各有20像素，右下角30像素的圆角*/border-radius: 10px 20px 30px 50px;/*左上角10像素，右上角20像素，右下角30像素，左下角50像素的圆角*/border-top-left-radius: 30px; /*左上角的圆角设置*/border-top-right-radius: 30px;/*右上角的圆角设置*/border-bottom-right-radius: 30px;/*右下角的圆角设置*/border-bottom-left-radius: 30px;/*左下角的圆角设置*/

鼠标指针形状

cursor: pointer;/*鼠标指针为手型*/cursor: crosshair;/*鼠标指针为十字形*/cursor: text;/*鼠标指针为文本的I型*/cursor: wait;/*程序正忙*/cursor: move;/*对象是可移动的*/cursor: help;/*可用的帮助信息*/cursor: default;/*默认光标*/cursor: auto;/*默认*/

css Hack技术

1）条件级Hack    if条件：是否、大于（gt）、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)2）属性级Hack    _: 选择IE及以下版本    *：IE6、7    \9: 选择IE6+    \0: 选择IE8+、opera153）选择级Hack    *html IE6及更早版本浏览器    *+html IE7Hack有风险，使用需谨慎！

HTML5-新增的语义化标签

1、HTML5的新特性1）在网页上绘制图形的canvas元素2）多媒体相关video和audio元素3）对本地离线存储的更好支持    本地存储：提供了两种在客户端存储数据的新方法        localStorage 没有时间限制的数据存储        sessionStorage 针对session的数据存储    离线应用：用户可以在应用离线的时候查看网站信息4）新增的语义化的标签和表单控件新增的结构元素1）header标签：网页的头部区域或文档中某个内容区块的头部，双标签    一种具有引导和导航作用的结构元素，通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片等2）footer标签：网页的底部区域或文档中某个内容区块的底部，双标签    通常可以包含：网页中的版权信息、相关阅读链接、文档的作者、使用条款等3）nav标签：网页的导航区域，双标签    通常可以包含：网页中主要的导航链接组、传统的导航条、侧边栏导航、页内导航、翻页操作等4）article标签：网页中独立的完整的内容，可以包含header标签，双标签    通常可以包含：一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件5）section标签：网页中内容的章节，双标签    通常可以包含页面中内容的分区，文章中章节6）aside标签：侧边栏，表示当前网页或文章的附属信息，双标签    通常可以包含：与主要内容相关的引用、侧边栏、广告、链接组等7）hgroup标签：标题组，双标签    通常包含多个标题8）address标签：联系信息，双标签，文字自带斜体效果    通常包含：文档的作者或文档的编辑者名称、电子邮箱、地址、电话号码等新增其他标签：1）figure标签：自带间距    语法：
   
                被主体内容引用的，相对独立的内容块，可以包含：图片、图表、代码块等            
            
   
    注意：在一个figure标签中只允许放一个figcaption标签2）mark标签：定义带有标记的文本，目的吸引用户。默认自带背景颜色（黄色）和文字颜色（黑色），双标签3）time标签：日期时间标签，定义公历时间，双标签    2020年2月27日            pubdate属性：当前内容的发布时间    注意：datetime属性定义日期时间，如果没有该属性，必须在元素内规定日期和时间4）progress标签：进度条            max属性：最大值    value属性：初始值5）canvas标签：图形容器，如果绘制形状必须使用JavaScript来绘制

HTML5-新增多媒体标签

1）音频标签    audio 标签    
       IE8及更早版本的浏览器中不支持audio元素    HTML5中支持的音频格式：        ogg   支持的浏览器Chrome、Firefox、Opera10+        MP3   支持的浏览器Chrome、Firefox、Opera10+、IE9+、Safari5+        wav   支持的浏览器Chrome、Firefox、opera、Safari    常用属性：        src属性：音频文件的URL地址        controls属性：播放控件        loop属性：重复播放        muted属性：静音播放    source标签：可以链接不同格式的音频文件。浏览器使用第一个可以识别的格式    
    2）视频标签    video标签    
         IE8及更早版本的浏览器中不支持video元素    HTML5中支持的视频格式：        ogg 支持的浏览器Chrome、Firefox、Opera        MEPG4 支持的浏览器Chrome、Firefox、Safari、IE9+        WebM 支持的浏览器Chrome、Firefox、Opera    常用属性：        src属性：视频文件的路径        controls属性：播放控件        loop属性：重复播放        muted属性：静音播放        width属性、height属性 设置视频播放器的宽度和高度，单位像素        poster属性：预览图片    source标签：可以链接不同格式的视频文件。浏览器使用第一个可以识别的格式    
   

HTML5-新增的表单元素和属性

新增表单标签--input类型    input、button、select-option、textarea1）url类型：包含访问协议的URL地址的输入域，在提交表单时，会自动验证URL域的内容2）email类型：包含e-mail地址的输入域，在提交表单时，会自动验证e-mail地址3）search类型：用于检索关键字的输入域，多用于手机客户端4）tel类型：用于输入电话号码的输入域，为移动端网页开发服务，在PC端网页中不生效，在移动端页面中点击tel类型的输入域时，跳出虚拟电话键盘（0-9、*、#）5）number类型：用于包含数值的输入域        max属性：最大值    min属性：最小值   step属性：合法的数字间隔，默认值为1    注意：当用户输入非法的数值时，会弹出相应提示信息，并阻止表单提交6）range类型：生成一个数字滑动条    注意：    range类型和number类型功能基本一致，    区别：外观样式不同、默认值不同。    range 类型的min属性默认值为0，max属性默认值为1007）color类型：生成一个颜色选择器，值为十六进制色值(六位十六进制数)8）date类型：日期选择器，包含年、月、日9）datetime类型：输入日期时间（UTC时间）——手动    UTC+8  东8区    UTC-10  西10区10）datetime-local类型：日期和时间选择器，包含年、月、日、时、分（无时区）11）month类型：月选择器，包含年、月12）time类型：时间选择器，包含时、分13）week类型：周选择器，包含年、周（全年的第几周）14）datalist类型：选项列表，与input元素配合使用    使用input元素的list属性和datalist的id属性关联        表单属性：1）min、max、step属性    输入域中所允许的最小值、最大值、步长    用于包含数字的input类型，如input的number、range类型2）placeholder属性    为输入域设置提示信息3）list属性    通过input元素和datalist元素实现可选的下拉列表；使用input元素的list属性和datalist的id属性关联4）autocomplete属性：是否启用自动完成功能    autocomplete = "off" 元素不采用自动完成功能    autocomplete = "on 元素启动自动完成功能5）autofocus属性：自动获取焦点6）form属性：定义表单元素所属的表单区域7）required属性：提交表单时，表单元素不能为空，如果设置value值，该属性失效8）pattern属性：对用户输入内容做验证（正则表达则）9）multiple属性：选择多个值    用于上传域和email类型的输入域

HTML5-兼容

最新版本的Chrome、Firefox、Safari、Opera支持部分HTML5特性。IE9支持部分HTML5特性    HTML5新标签在IE低版本中有兼容问题：    1）使用JavaScript新增元素的方式解决：            2）使用谷歌提供的html5shiv.js解决兼容问题    
   

浏览器私有前缀——兼容性前缀

浏览器          内核     css兼容性前缀Chrome|Safari   webkit   -webkit-firefox         gecko    -moz-Opera           presto   -o-IE              trident  -ms-

css3背景属性

1）多背景    background-image: url(图片的路径), url(图片的路径);    多个背景图片之间用逗号隔开。背景图显示越靠前，书写顺序越靠前2）background-size属性：背景图尺寸设置    background-size: 数值;        background-size: 100px;/*等比例缩放*/        background-size: 100px 100px; /*根据尺寸缩放*/        background-size: 100% 100%;/*以元素的百分比来设置背景图片的宽、高*/    background-size: cover; 覆盖，等比例缩放到铺满整个盒子，但是背景图可能无法完整显示在盒子中    background-size: contain; 包含，等比例缩放到图片完整显示在盒子中，但是背景图可能无法铺满整个盒子3）background-origin属性：背景图片的定位区域    background-origin: content-box; 背景图片相对于内容区域定位    background-origin: padding-box; 背景图片相对于内填充区域定位    background-origin: border-box; 背景图片相对于边框区域定位4）background-clip属性：背景颜色的绘制区域    background-clip: content-box; 背景被裁剪到内容区域，仅在内容区显示    background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区域显示    background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示

css3渐变属性

1）线性渐变 linear-gradient    background-image: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);        方向：ndeg(n为数值)、left|right|top|bottom|left top|left bottom|right top|right bottom    重复线性渐变：        background-image: repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);2）径向渐变 radial-gradient    background-image: radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);        中心点的位置：x y| left|right|center|top|bottom|left top|left center|left bottom ...    background-image: -webkit-repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);    background-image: repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);

用户界面

1）resize属性：用户是否可以对元素进项调整    resize: none; 不允许用户调整元素尺寸    resize: both; 用户可以调整元素的宽度和高度    resize: horizontal;只允许用户调整元素的宽度    resize: vertical; 只允许用户调整元素的高度    注意：如果要使resize属性生效，必须与overflow属性配合使用，overflow的属性值可以是auto|hidden|scroll2）box-sizing属性：允许以特定的方式定义匹配某个区域的特定元素    box-sizing: content-box; 默认值，在width属性和height属性之外增加padding属性和border属性    box-sizing: border-box; 内容的宽度和高度的得到，通过width属性和height属性减去padding属性值，减去border属性值

多列布局-多栏布局

1）column-count属性：元素被分隔的列数    column-count: n; 元素内容被分隔成n列    column-count: auto; 由其他属性决定列数2）column-width属性：列的宽度    column-width: npx; 每一列的宽度    column-width: auto; 由其他属性确定列宽3）column-gap属性：列与列之间的间隔    column-gap: npx; 两列之间的间隔    column-gap: normal; 两列之间的间隔为常规间隔，W3C建议值为1em4）column-rule属性：列边框--列与列之间的分隔线    column-rule: column-rule-width  column-rule-style  column-rule-color;        column-rule-width属性：分割线的宽度        column-rule-style属性：分割线的线型（solid|double|dotted|dashed）        column-rule-color属性：分割线的颜色（关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)）5）column-span属性：跨列合并    column-span: all; 横跨所有列合并

transition过渡属性

transition: transition-property transition-duration transition-timing-function transition-delay;transition: css样式（属性名称） 动画的执行时间（单位秒|毫秒） 速度类型 动画的延迟时间（单位秒|毫秒）;    css样式: all表示所有属性    动画的执行时间：默认0    速度类型：        ease 默认值，平滑过渡        linear 匀速        ease-in 加速        ease-out 减速        ease-in-out 先加速后减速注意：必须要设置transition-duration属性动画的执行时间，否则动画的执行时间为0，不会产生过渡效果transition: width 2s, background 10s;

css3变形-transform属性

2D变形：    1）平移    transform: translate(x,y);  元素从当前位置移动到给定的x轴和y轴的坐标位置    transform: translateX(x); 沿着x轴的方向移动    transform: translateY(y); 沿着y轴的方向移动    注意：水平向右值为正，垂直向下值为正值    transform: translate(50px);沿着x轴方向移动    2）旋转    transform: rotate(ndeg);     角度为正值，元素沿着顺时针方向旋转n度；角度为负值，沿着逆时针方向旋转    3）缩放    transform: scale(x,y); 元素沿着x轴和y轴做缩放    transform: scaleX(x); 沿着x轴方向缩放    transform: scaleY(y); 沿着y轴方向缩放    x和y的取值：0-1缩小，1表示正常大小，1以上表示放大，负值时，先翻转后缩放    transform: scale(0.5); x轴和y轴等比例缩放    4）倾斜    transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜，单位deg    transform: skewX(x); 沿着x轴方向倾斜    transform: skewY(y); 沿着y轴方向倾斜    transform: skew(30deg);沿着x轴方向倾斜    注意：transform: rotate(360deg) scale(3);元素既要旋转又要缩放transform-origin属性：元素基点位置的调整，必须与transform属性配合使用3D变形必备属性：    1）transform-style属性：        transform-style: preserve-3d; 创建3D空间    2）perspective属性：透视属性，近大远小，单位像素    注意：以上两个属性均需要写在父元素中    3D空间的轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）3D变形效果：    1）平移    transform: translateZ(z); 沿着z轴平移    transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动    2）旋转    transform: rotateX(xdeg); 沿着x轴方向旋转    transform: rotateY(ydeg); 沿着y轴方向旋转    transform: rotateZ(zdeg); 沿着z轴方向旋转	transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转    3）缩放：    transform: scaleZ(); 沿着z轴缩放    transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放

帧动画

1）定义关键帧    @keyframes 动画名称（英文）{        0%{  }  动画的开始        50%{ }        100%{ } 动画的结束    }    @keyframes 动画名称（英文）{        from{ } 动画的开始        to{ } 动画的结束    }2）引用关键帧    animation: animation-name animation-duration [animation-timing-funciton] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];    animation: 动画名称 动画的执行时间（s|ms） 动画的类型(linear|ease|ease-in|ease-out|ease-in-out) 延迟时间 播放次数(默认为1次,infinite无限循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束之后显示的状态(forwards动画结束时的状态|both动画结束或开始时的状态|backwards动画开始时的状态)3）animate.css动画库    在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut    使用步骤：        1）引入文件：
           2）使用：
   
    内容
   
            animated类名是基本类名，必须添加；第二个类名为实现指定动画的样式名

css预处理-less

1）less：拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别    编译的方法：命令行编译、编译器编译、在线编译、第三方编译工具等    好处：结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码2）编写less文件   新建less文件：*.less  3）less的基本语法注释：    标准css注释： /* 注释内容 */  会保留到编译后的文件中    单行注释：//注释内容    只保留到less源文件中，编译后会被省略导入样式: @import  可以导入css文件，导入less文件    @import "*.css";    @import url(*.css);    @import url("*.css");    注意：分号是必不可少的，文件的后缀名也是必不可少的    @import和link的区别变量：    定义变量：@变量名: 值;    使用：        作为属性值使用——.box{ background: @变量名; }        作为属性名称使用——            
   
            @le: left;            .box{ border-@{le}: 5px solid #000; }        作为选择器名称使用——            .@{le}{ height: 20px; }    SyntaxError语法错误混入：将一种或一系列的属性从一个规则集引入到另一个规则集    混入类名：        定义通用属性：.bw{ width: 100px; } 在解析后的css文件中可以看到                     .bw(){ width: 100px; } 在解析后的css文件中看不到        调用定义好的属性：.wrap{ .bw; }    混入参数：        定义：.boRa(@radius){ border-radius: @radius; }        调用：.box{ .boRa(20px); }        注意：混入参数没有设置默认，调用时必须传入参数        定义：.boRa(@radius:20px){ border-radius: @radius; }        调用：.box{ .boRa;}             .box{ .boRa(30px);}        注意：混入参数并且设置了默认值，调用的时候如果不写参数，使用默认值作为显示的值                使用@arguments来引用所有传入的参数：        .boSha(@bx,@by,@bb,@bc){ box-shadow: @arguments;}        .bo(@bwi:10px,@bs:solid,@bcol:#0f0){ border: @arguments; }        .box{             .boSha(10px,10px,20px,#000);            .bo;            .bo(5px);            .bo(5px,dotted);            .bo(5px,dashed,#000);        }		嵌套：模仿HTML结构    选择器嵌套    &表示引用父元素继承：extend伪类实现样式的继承    .ftStyle{ font-style: italic; }    .box{        h3{            font-size: 50px;            &:extend(.ftStyle);        }    }    .box{        h3:extend(.ftStyle){            font-size: 50px;        }    }运算：任何数值、颜色、变量都可以运算    1）变量    2）数值    3）颜色色值：先将颜色色值转换成rgb模式，进行计算，然后再将rgb模式转回十六进制色值并返回        rgb模式的取值范围0-255，如果计算时超过这个区间，使用超过后的接近的范围值呈现

calc()函数：动态计算长度值的函数

语法：calc(数学表达式)支持+、-、*、/运算，先算括号里面的注意：运算符前后添加空格兼容性IE9+less文件内容height: calc(~"100% - 1.286rem");less编译bug,加~""即可避免编译对于css内容height:calc(100%-1.286rem);

viewport设置-虚拟窗口

Apple为了解决移动端屏幕分辨率大小问题提出移动端视口：布局视口、视觉视口、理想视口
   自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放。    content：        width--虚拟窗口的宽度，device-width设备宽度        initial-scale--初始缩放比例        maximum-scale--最大缩放比        minimum-scale--最小缩放比        user-scalable--是否允许用户手动缩放            user-scalable=no 不允许用户手动缩放            user-scalable=yes 允许用户手动缩放，默认值ie8新加强制浏览器按照最新的标准去渲染    
   

媒体查询

1）什么是媒体查询    可以根据设备显示器特性为它设置css样式    媒体查询可以检测的内容：viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率2）引入方式    在样式表中引入——在style标签对中引入、在外部样式表中引入    @media mediaType  and  (media feature){        选择器{ 属性: 属性值; }    }    mediaType设备类型：        all 适用于所有多媒体类型设备        print 适用于打印机或打印预览        screen 电脑屏幕、平板电脑、智能手机等        speech 屏幕阅读器等    media feature媒体特性表达式：        width 浏览器宽度  height浏览器的高度        max-width最大宽度   min-width最小宽度        device-width设备宽度   device-height设备高度   max-device-width最大设备宽        orientation 设备方向	orientation:landscape|portrait 横屏|竖屏	        aspect-ratio: 1/2;可见区宽度和高度的比率        device-aspect-ratio: 1/1; 输出设备的屏幕可见区宽度和高度的比率    使用link标签引入：        
   响应式布局设置：meta标签的设置        
                    IE8及更早版本的浏览器中不支持媒体查询，需要使用media-queries.js或respond.js增加IE对媒体查询的支持：        
            
               调用Chrome浏览器或者是IE高版本浏览器                 
               兼容不支持viewport的设备3）使用媒体查询适配对应样式 常用屏幕尺寸查询：  超小屏幕下   手机    <768px  小屏幕       平板    >= 768px  中等屏幕     桌面    >= 992px  大屏幕       桌面    >=1200px 移动端优先：超小型设备    手机   768px以下     @media screen and (min-width: 768px){ 平板电脑 }     @media screen and (min-width: 992px){ 台式电脑 }     @media screen and (min-width: 1200px){ 大台式电脑 } 大屏幕优先：大台式电脑   1200px以上     @media screen and (max-width: 1200px){ 台式电脑 }     @media screen and (max-width: 992px){ 平板电脑 }     @media screen and (max-width: 768px){ 手机 }4）响应式字体设置 rem单位相对于html的font-size值做调整 em单位相对于父元素的font-size值做调整百分比布局： 宽度不固定，可以使用百分比；内外间距（左右方向）也可以使用百分比 在实现的过程中需要布局容器：     手机  <768px   布局容器的宽度100%     平板  >=768px    设置宽度为750px     桌面  >=992px     设置宽度970px     大屏   >=1200px    设置宽度1170px 浮动、定位、弹性盒子 响应式内容：     img标签：前景图，可以通过max-width属性控制图片的大小，height: auto;     响应式背景图片： background-size属性调整背景图的尺寸

转载地址：https://jackiehao.blog.csdn.net/article/details/104740936 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！