清除浮动带来的影响--.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+1element: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）条件级Hackif条件：是否、大于（gt）、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2）属性级Hack_: 选择IE及以下版本*：IE6、7\9: 选择IE6+\0: 选择IE8+、opera15
3）选择级Hack*html IE6及更早版本浏览器*+html IE7
Hack有风险，使用需谨慎！

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>定义figure中的标题</figcaption></figure>注意：在一个figure标签中只允许放一个figcaption标签
2）mark标签：定义带有标记的文本，目的吸引用户。默认自带背景颜色（黄色）和文字颜色（黑色），双标签
3）time标签：日期时间标签，定义公历时间，双标签<time>2020年2月27日</time><time pubdate="pubdate" datetime="2020-2-27"></time>pubdate属性：当前内容的发布时间注意：datetime属性定义日期时间，如果没有该属性，必须在元素内规定日期和时间
4）progress标签：进度条<progress></progress><progress max="100" value="50"></progress>max属性：最大值value属性：初始值
5）canvas标签：图形容器，如果绘制形状必须使用JavaScript来绘制

HTML5-新增多媒体标签

1）音频标签audio 标签<audio src="音频文件的路径">您的浏览器不支持audio元素播放音频。</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标签：可以链接不同格式的音频文件。浏览器使用第一个可以识别的格式<audio controls><source src="videoAudio/biubiubiu.ogg"><source src="videoAudio/hanmai.mp3"><source src="videoAudio/nada.wav">您的浏览器不支持audio元素播放音频。    </audio>2）视频标签video标签<video src="视频文件的路径">您的浏览器不支持video元素播放视频。</video>  IE8及更早版本的浏览器中不支持video元素HTML5中支持的视频格式：ogg 支持的浏览器Chrome、Firefox、OperaMEPG4 支持的浏览器Chrome、Firefox、Safari、IE9+WebM 支持的浏览器Chrome、Firefox、Opera常用属性：src属性：视频文件的路径controls属性：播放控件loop属性：重复播放muted属性：静音播放width属性、height属性 设置视频播放器的宽度和高度，单位像素poster属性：预览图片source标签：可以链接不同格式的视频文件。浏览器使用第一个可以识别的格式<video controls><source src="videoAudio/butterfly.ogg"><source src="videoAudio/movie.mp4"><source src="videoAudio/PPAP.webm">您的浏览器不支持video元素播放视频。</video>

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

新增表单标签--input类型input、button、select-option、textarea
1）url类型：包含访问协议的URL地址的输入域，在提交表单时，会自动验证URL域的内容
2）email类型：包含e-mail地址的输入域，在提交表单时，会自动验证e-mail地址3）search类型：用于检索关键字的输入域，多用于手机客户端
4）tel类型：用于输入电话号码的输入域，为移动端网页开发服务，在PC端网页中不生效，在移动端页面中点击tel类型的输入域时，跳出虚拟电话键盘（0-9、*、#）5）number类型：用于包含数值的输入域<input type="number" max="10" min="0" step="2" value="0">max属性：最大值    min属性：最小值   step属性：合法的数字间隔，默认值为1注意：当用户输入非法的数值时，会弹出相应提示信息，并阻止表单提交
6）range类型：生成一个数字滑动条<input type="range" max="10" min="0" step="2" value="0">
注意：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属性关联<input list="listCon"><datalist id="listCon"><option value="北京">北京</option><option value="重庆">重庆</option><option value="深圳">深圳</option><option value="上海">上海</option><option value="天津">天津</option></datalist>表单属性：
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新增元素的方式解决：<script>var ele = document.createElement("header"); //创建一个header元素，赋给ele变量var oBox = document.getElementById("box"); //通过id名称获取元素，赋给oBox变量oBox.appendChild(ele); //将新建元素追加到父元素中</script><style>header{display: block;}</style>2）使用谷歌提供的html5shiv.js解决兼容问题<!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]-->

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

浏览器          内核     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-gradientbackground-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-gradientbackground-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|scroll
2）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建议值为1em
4）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); 元素沿着水平方向和垂直方向倾斜，单位degtransform: 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）引入文件：<link rel="stylesheet" href="css/animate.css">2）使用：<div class="animated bounce">内容</div>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: @变量名; }作为属性名称使用——<div class="box left"></div>@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为了解决移动端屏幕分辨率大小问题提出
移动端视口：布局视口、视觉视口、理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放。content：width--虚拟窗口的宽度，device-width设备宽度initial-scale--初始缩放比例maximum-scale--最大缩放比minimum-scale--最小缩放比user-scalable--是否允许用户手动缩放user-scalable=no 不允许用户手动缩放user-scalable=yes 允许用户手动缩放，默认值ie8新加强制浏览器按照最新的标准去渲染<meta http-equiv="X-UA-Compatible" content="ie=edge" />

媒体查询

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标签引入：<link rel="stylesheet" media="mediaType  and  (media feature)and  (media feature)" href="*.css">响应式布局设置：meta标签的设置<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">IE8及更早版本的浏览器中不支持媒体查询，需要使用media-queries.js或respond.js增加IE对媒体查询的支持：<!--[if lt IE 9]><script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script><![endif]--><meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">调用Chrome浏览器或者是IE高版本浏览器<meta name="HandheldFriendly" content="true">兼容不支持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属性调整背景图的尺寸

前端常用属性知识点--文档相关推荐

20个面向前端开发人员的文档和指南（第4号）
It's that time again to get learning! Well, in this industry, that time is always I suppose. This is ...
面向对象的前端开发_20多种面向前端开发人员的文档和指南（第9号）
面向对象的前端开发 It's that time again to get learning! As before, I've collected a number of different lear ...
前端框架：AntdUI 文档入门
目录前端框架:Ant Design UI 文档入门官方文档 · 在线地址: Ant Design Pro 版本文档更多入口:`[如下图所示]` 前端框架:Ant Design UI 文档入门你 ...
电子计算机常用面试题,计算机常用面试题文档.doc
计算机常用面试题文档用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要这样分层??答: 从下至上分别为:数据访问层.业务逻辑层(又或成为领域层).表示层?数据访问层:有 ...
dede flag php,织梦dede:list按flag属性调用文档
织梦dede:list默认在栏目列表页是不支持按flag输出的,想要按flag调用指定属性的文档和分页,我们可以这样做伸手党直接下载如果不想改的小伙伴可以直接下载我已经改好的这个文件,先备份你的 ...
前端预览word文档实现
记录前端预览word文档的需求实现方案一:XDOC文档预览可以使用XDOC文档预览云服务来进行word文件的在线预览,直接去网站体验就知道怎么用了. https://view.xdocin.com ...
网上下载论文时，如何转换成常用的word文档？
在网上下载论文的时候,大多数下载的是CAJ文件,不少人都不知道这种文档吧?这种类型需要专门的软件才可以打开,并且也不好修改,那么是否可以转换成我们常用的word文档呢?今天和大家分享一个免费简单的方法 ...
js、jq知识点文档
JavaScript知识点第一章JavaScript概述 1.了解JavaScript的作用表单验证实现网页动态效果 2.了解JavaScript的特点概念:Javascript是一种基于对象 ...
div+css知识点文档
第一章xhtml+css入门 1.HTML:超文本标记语言 2.XHTML:可扩展超文本标记语言 3.CSS: 层叠样式表或级联样式表 4.主流浏览器: IE(美国微软).Firefox(谋智).op ...

前端常用属性知识点--文档

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

文本换行

弹性盒子布局-flex

网格布局-Grid

CSS选择器

图片下方间隙问题

文本框和按钮不对齐现象

生成BFC

盒子和文字阴影属性

文本属性

边框圆角border-radius属性

鼠标指针形状

css Hack技术

HTML5-新增的语义化标签

HTML5-新增多媒体标签

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

HTML5-兼容

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

css3背景属性

css3渐变属性

用户界面

多列布局-多栏布局

transition过渡属性

css3变形-transform属性

帧动画

css预处理-less

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

viewport设置-虚拟窗口

媒体查询

前端常用属性知识点--文档相关推荐

最新文章

热门文章