用css实现元素居中的方法

水平居中 行内或类行内元素,text-align: center; 块级父容器中让行内元素居中.这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。 让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto(使用前提:元素设置了适当的 width 宽度,否则块级元素的宽度会被拉伸为父级容器的宽度) 多个块级元素:修改它们的 display 值。详见:http://codepen.io/chriscoyi...

ES6之解构 destructuring

简化从数据结构中获取相关子集的操作。 1 2 3 let options = { 4 repeat: true, 5 save: false 6 }; 7 // 从对象中提取数据 8 let repeat = options.repeat, 9 save = options.save; 10 11 对象结构语法在赋值语句的左侧使用 对象字面量。 在解构中使用var、let、const声明变量的时候,必须有初始化操作。 1 2 3 let node = { 4 type: "Identifier", 5 name: "foo" 6 }; 7 let { typ...

ES6 中的let与const

基础 变量的创建方式取决于你如何声明他。 var声明的变量,会被视为在函数级作用域内顶部的位置(不在函数内部则全局) function getValue(condition) { //var value; if (condition) { var value = "blue";//value="blue"; // other code return value; } else { // value exists here with a value of undefined return null; } // value ex...

CSS3实现气泡特效(CSS2D、3D等)

之前用到过部分功能,今天把慕课网这个教程又重新敲了遍。 Github源代码:https://github.com/zxhycxq/mooc-ToolTips 需要注意的几个地方 1.字体库的使用: @font-face:路径。bootstrap自带有,但是对于其他的图标没怎么注意过,还有loading图标,可以考虑使用。 2.写属性的时候考虑后续扩展性:X/Y/Z轴,transform-origin 写成百分比。 3.几个动画旋转,设置旋转中心。 4.transform :多个属性过渡的写法...

JavaScript中的跨域

ajax:XMLHttpRequest():不能跨域 1.主域与子域之间 document.domain='a.com'; 等于主域的网站 2.服务器代理:XMLHttpRequest代理文件 缺点‘:增加服务器压力。 3.script标签:jsonp jsonp:json+padding(内填充) 4.location.hash: iframe双域 b网站 <iframe src="123.php#key1=value1&key2=value3"> </iframe  > parent.location.hash=self.location.hash; 5.window.nam...

一张图了解HTML

刚开始学html的时候,在网上看过一些教程,但是不算非常系统,有些点记忆不是很清楚,这两天抽空又在w3school上面大致看了一遍。 在线预览:http://www.xmind.net/m/7jnN 部分代码:http://jsbin.com/xesimo/edit?html,output #gallery-1 { margin: auto; } #gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #galler...

用css媒体查询、js等实现手机、平板横竖屏判断

//此为平板竖屏 @media (min-width: 768px) and (orientation: portrait) { body { background-color:cyan; } }   function judgeDirection(){ if(window.orientation==180||window.orientation === 0){ alert("手机为竖屏!"); } if(window.orientation==90||window.orientation==-90){ alert("手机为横屏!"); } } window.addEventListener("onorientationchange" in window ? "orientationchange" ...

CSS之overflow

overflow-x:hidden; 如果overflow-x和overflow-y的值相同,则等同于overflow。 如果overflow-x和overflow-y的值不同,且其中一个值被赋值为visible,另外一个被赋值为hidden,auto,scroll,则visible会被重置为auto。垂直方向会有滚动条的原因。 让overflow起作用: 1.非display:inline水平 2.对应尺寸的方位限制:width/height/max-width/max-height/absolute拉伸。 3.对应单元格td等,还需为table设置t...

CSS中的calc()函数

如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。 calculate   用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空...
Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality

用户登录