前端基础---audio/video音视频标签
摘要：autio 标签用来向页面中引入一个音频文件 音频文件引入时默认情况下不允许用户自己控制播放停止 属性: controls 是佛允许用户控制播放 autoplay 音效文件是否自动播放 如果设置了autoplay,则音乐在打开页面时会自动播放 但是目前来讲大部分浏览器不会自动对音乐自动播放 vide
阅读全文
摘要：媒体类型 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩色屏幕 speech “听觉”类似的媒体设备 tty 不适用像素的设备 tv 电视 媒体特性 min-width：分辨率宽度大于设置值的时候识
阅读全文
摘要：超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-* 隐藏 可见 隐藏 隐藏 .visible-md-* 隐藏 隐藏 可见 隐藏 .visible-lg-
阅读全文
摘要：Bootstrap的栅格源码 1.固定和流体容器的公共样式 // 固定和流体容器的公共样式 //@grid-gutter-widt：槽宽 .container-fixed(@gutter: @grid-gutter-width) { // margin-right: auto; margin-lef
阅读全文
摘要：LESS less编译工具 koala 官网:www.koala-app.com less中的注释 以//开头的注释，不会被编译到css文件中 以/**/包裹的注释会被编译到css文件中 less中的变量 使用@来申明一个变量 语法： @变量名 作为普通属性值只来使用: 直接使用@pink 语法:
阅读全文
摘要：column-width指定每一栏的宽度（这是多列布局的第一种分法） column-count指定要多少栏（这是多列布局的第二种分法） column-gap栏目间的距离 column-rule栏目间隔线 <!DOCTYPE html> <html> <head> <meta charset="utf
阅读全文
摘要：作用容器 1.flex基础点 什么是容器，什么是项目，什么是主轴，什么是侧轴？ 项目永远排列在主轴的正方向上 flex分新旧两个版本 -webkit-box -webkit-flex / flex 2.注意点 我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
阅读全文
摘要：关键帧@keyframes 语法： @keyframes animiationName{ keyframes-selector{ css-style; } } animiationName:必写项，定义动画的名称 keyframes-selector：必写项，动画持续时间的百分比 from：0% t
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：景深:让3D场景有近大远小的效果（我们肉眼距离屏幕的距离） 是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的） 原理： 景深越大 灭点越远 元素变形更小 景深越小 灭点越近 元素变形更大 景深基点 视角的位置 灭点 指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点 景深基点 默
阅读全文
摘要：在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外 景深 perspective(n)为 3D 转换元素定义透视视图 perspective的中文意思是：透视，视角。 没有透视定义，不成3D。 下图为透视的一张图： CSS3中3D transform的透视点是在浏览器的前方！ 需要设置该元素
阅读全文
摘要：transform 属性允许你修改CSS视觉格式模型的坐标空间transform 属性 , 只对 block 级元素生效！ 旋转（rotate） transform:rotate(angle); 正值:顺时针旋转 rotate(360deg) 负值:逆时针旋转 rotate(-360deg) 只能设
阅读全文
摘要：简写属性transition: transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。 CSS 过渡 由简写属性 transition 定义
阅读全文
摘要：transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 默认
阅读全文
摘要：radial-gradient() 函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变 -默认均匀分布 radial-gradient(red,blue); -不均匀分布 radial-gradient(red 50%,blue 70%); -改变渐变的形状 radial-gra
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：线性渐变 为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。 -默认从上到下发生渐变 linear-gradient(red,blue); -改变
阅读全文
摘要：background-size 设置背景图片大小 默认值：auto auto 不可继承 值： 百分比： 指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距 auto： 以背景图片的比例
阅读全文
摘要：border-box 指定背景延伸到边框的外部边缘。边框下方绘制了背景。这是默认值。 从边框开始剪裁 padding-box 指定背景延伸到填充的外部边缘。边框下方未绘制背景。 从填充区开始剪裁 content-box 指定仅在内容框内（剪切到）绘制背景。在边框和填充区域下方未绘制背景。从内容区开始
阅读全文
摘要：background-origin 设置背景的渲染的起始位置 可选值: border-box 从边框开始渲染 padding-box 从内填充区域开始渲染 content-box 从内容区开始渲染
阅读全文
摘要：百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小 如果定位区域大小是 height:200px width:200px 图片的大小是 width:100px height:120px 那么10%就是 (200px-100px)*10% 与 (200px-120px)*10%
阅读全文
摘要：background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。 默认值：scroll 不可继承 值： fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 。 相当于背景定位到了视口元素 scroll 此关键字表示背景相对
阅读全文
摘要：border-image CSS属性允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式 默认值： 不可继承 border-image-source: none border-image-sl
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：传统的圆角生成方案，必须使用多张图片作为背景图案 CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增
阅读全文
摘要：resize CSS 属性允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用） 默认值：none 不可继承 值： none 元素不能被用户缩放。 both 允许用户在水平和垂直方向上调整元素的大小。 horizontal 允许用户在水平方向上调整元素的大小。 vertica
阅读全文
摘要：box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。 默认值：content-box 不可继承 值 content-box 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，
阅读全文
摘要：/* left是倒影的方向 10px是倒影距离本体元素的距离 */ -webkit-box-reflect: left 10px;
阅读全文
摘要：vertical-align: middle; 属性设置元素的垂直对齐方式。 可选值: middle:把此元素放置在父元素的中部。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
阅读全文
摘要：div{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 100px; width: 100px; }
阅读全文
摘要：box-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。 默认值: none 不可继承 值： inset 默认阴影在边框外
阅读全文
摘要：direction:控制文字的方向一定要配合unicode-bidi:bidi-override;来使用 文本排列朝向 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div { wi
阅读全文
摘要：-webkit-text-stroke: red 1px;
阅读全文
摘要：用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊 /* 高斯模糊度 */ filter: blur(5px); 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度
阅读全文
摘要：说明： RGBA(R,G,B,A) 取值： R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alpha透明度。取值0~1之间。 .test{background-color:rgba(0,0,0,0.5);}
阅读全文
摘要：text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边） 默认值：none 不可继承 值 <color> 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。 <offset-x> <offset-y> 必
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @font-face { font-family:"MtFont"; src: url(font/BAUHS93.
阅读全文
摘要：注意： 目标伪类选择器是一个动态选择器，只有存在url指向该匹配元素时候，样式才会生效。 不使用js实现一个标签卡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:target 代表一个特殊的元素，这
阅读全文
摘要：###CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ CSS3选择最新选择器规范: https://www.w3.org/TR/selectors ! 问题 ! 1.css的全称是什么？ 2.样式
阅读全文
摘要：? IE ?]> HTML代码块 非到万不得已最好不用css hack 1. 条件Hack 语法： <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> ? IE ?]> HTML代码块 取值： <keywords> if条件共包含6种选择
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-image: url
阅读全文
摘要：框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面， 框架集可以同时引入多个页面，而内联框架只能引入一个， 在h5标准中，推荐使用框架集，而不使用内联框架 使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中 所以要使用框架集，页面中就不可以使
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 表单的作用就是用来将用户信息提交给服务器的 比如：百度的搜索框 注册 登录这些操作都需要填写表单 --> <!-- 使用f
阅读全文
摘要：.clearfix::after, .clearfix::before{ content: ""; display: table; clear: both; } * 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素 * 使用空的table标签可以隔离父子元素的外边距，阻止外边距
阅读全文
摘要：有一些情况下表格是非常的长的， 这时就需要将表格分为三个部分，表头，表格的主体，表格底部 在HTML中为我们提供了三个标签： thead 表头 tbody 表格主体 tfoot 表格底部 这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签， 都需要直接写到table中，tr需要写
阅读全文
摘要：* table和td边框之间默认有一个距离 * 通过border-spacing属性可以设置这个距离 * border-collapse可以用来设置表格的边框合并 * 如果设置了边框合并，则border-spacing自动失效 <!DOCTYPE html> <html> <head> <meta
阅读全文
摘要：表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具， 表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单 在网页中也可以来创建出不同的表格。 在HTML中，使用table标签来创建一个表格 在table标签中使用tr来表示表格中的一行，有几行就有几个tr 在tr中需要
阅读全文
摘要：* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁， * 这个闪烁会造成一次不佳的用户体验。 * 产生问题的原因： * 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求， * 但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
阅读全文
摘要：* 使用background-image来设置背景图片 * - 语法：background-image:url(相对路径); * * - 如果背景图片大于元素，默认会显示图片的左上角 * - 如果背景图片和元素一样大，则会将背景图片全部显示 * - 如果背景图片小于元素大小，则会默认将背景图片平铺以
阅读全文
摘要：* 如果定位元素的层级是一样，则下边的元素会盖住上边的 * 通过z-index属性可以用来设置元素的层级 * 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级 * 层级越高，越优先显示 * * 对于没有开启定位的元素不能使用z-index **** 父元素不管层级多高都不能盖住子
阅读全文
摘要：* 当元素的position属性设置fixed时，则开启了元素的固定定位 * 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样 * 不同的是： * 固定定位永远都会相对于浏览器窗口进行定位 * 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 * * IE6不支持固定定位 <!DOCTY
阅读全文
摘要：当position属性值设置为absolute时，则开启了元素的绝对定位绝对定位：1.开启绝对定位，会使元素脱离文档流2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对
阅读全文
摘要：/* * 定位： * - 定位指的就是将指定的元素摆放到页面的任意位置 * 通过定位可以任意的摆放元素 * - 通过position属性来设置元素的定位 * -可选值： * static：默认值，元素没有开启定位 * relative：开启元素的相对定位 * absolute：开启元素的绝对定位 *
阅读全文
摘要：.floatfix::after{ content: ""; display: block; clear: both; } .floatfix{ zoom: 1; }
阅读全文
摘要：/* 通过after伪类想元素最后添加一个空白的块元素,然后对齐清除浮动 这样做和添加一个div的原理一样,可以达到相同的效果 而且不会在页面中添加多余的div,这是我们最推荐的使用方式,几乎没有副作用 */ .clearfix::after{ content: ""; display: block
阅读全文
摘要：Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条练习</title> <link rel="stylesheet" type="text/css" href="css/清除默认样式.css"/> <l
阅读全文
摘要：1. overflow: hidden 2. IE8以下 zoom: 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ border: 10p
阅读全文
摘要：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ mar
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 如果希望块元素在页面中水平排列,可以使块元素脱离文档
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 文档流 文档流处在网页的最底层,他表示的是一个页面中的位置 我们所创建的元素都处在文档流中 元素在文档流中的特点 块元素
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #00
阅读全文
