display的32种写法

你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。

从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类：

• 外部值
• 内部值
• 列表值
• 属性值
• 显示值
• 混合值
• 全局值

外部值

所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。

display: block;

这个值大家不陌生，我们最熟悉的

缺省就是这个值，最基本的块级元素，属于css入门初学者都知道的概念，只要是容器类型的元素基本都是这个值。除

之外，还有

到

，

，

，

，

，

，

天生都是这个值。

display: inline;

这个值大家也不陌生，行内元素嘛，只要是个行内元素都是这个值，最典型的是，还有，，以及古代html语言当中的，都属于这一类型。

display: run-in;

这个值有点奇怪，通常没人用它，但你可以知道它。因为除了IE和Opera支持它以外，其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。这东西说白了也没什么神秘，它的意思就是说如果我们命令一个元素run-in，中文意思就是『闯入』！那么这个元素就直接闯入下一行。比如说这样：

写起来大概就是这样：

aaa
bbb
.a {
  font-size: 36px;
  display: run-in;
}

这有什么用呢？我们拿span设置font-size一样可以实现这个效果，就让IE自己跟自己玩去吧！说实话，在人力资源如此宝贵的今天，IE的产品经理不知脑子是不是进水了，不派工程师去实现那么多比这重要的多得多的特性，却花时间做这么个没用的玩意儿，难道工程师的时间不是金钱吗？难怪市场占有率连年下滑。

内部值

谈完了外部值，我们来看看内部值。这一组值比较有意思了，在css3如火如荼的今天，你要玩不转这些值，怕是哪儿也找不到工作的。内部值主要是用来管束自己下属的儿子级元素的排布的，规定它们或者排成S形，或者排成B形这样的。

display: flow;

含义不清，实验室阶段产品，Chrome不支持。如果还不够说服你暂时不要碰它的话，试着理解以下英文原文：

If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

display: flow-root;

不同于刚才谈到的flow，现在用flow-root的渐渐多起来了，因为它可以撑起被你float掉的块级元素的高度。外容器本来是有高度的，就像这样：

    

      

      Example one
    
    .container {
        border: 2px solid #3bc9db;
        border-radius: 5px;
        background-color: #e3fafc;
        width: 400px;
        padding: 5px;
    }
    .item {
        height: 100px;
        width: 100px;
        background-color: #1098ad;
        border: 1px solid #0b7285;
        border-radius: 5px;
    }

结果因为你想让那一行字上去，于是你给.item加了一个float: left;结果就成这样了，外容器高度掉了，这不是很多人常犯的错误吗？

现在我们给.container加上display: flow-root;再看一下：

喏，外容器高度又回来了，这效果是不是杠杠的？

那位同学说，我们用clear: both;不是一样可以达到这效果吗？

.container::after {
    content: '';
    clear: both;
    display: table;
}

小明，请你出去！我们在讲display: flow-root;，不是在讲clear: both;！

display: table;

这一个属性，以及下面的另外8个与table相关的属性，都是用来控制如何把div显示成table样式的，因为我们不喜欢

这个标签嘛，所以我们想把所有的标签都换成

标签。

有什么好？无非就是能自动换行而已，但其实你完全可以做一个

标签，把它全都替换成display: block;也可以自动折行，只不过略微麻烦而已。 关于display: table;的详细用法，大家可以参考这篇文章，这里就不细说了。 display: flex; 敲黑板，划重点！作为新一代的前端工程师，这个属性你必须烂熟于胸衣中，哦，错了，是胸中。display: flex;以及与它相关联的一系列属性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，并且包括所有这些属性的取值，都是你需要反复研磨的。2009年诞生的这个属性可以说是不亚于css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆。 关于它的详情，会中文的可以参考阮一峰的这篇文章，但我认为，格式编排的更好还是csstrick上的这篇文章。没有一张图能完整地展现flex的神韵，就放这张我比较喜欢的图片吧： display: grid; 会flex很吊吗？会grid更吊哦！也许这就是下次前端面试的重点哦！ grid布局，中文翻译为网格布局。学习grid布局有两个重点：一个重点是grid布局引入了一个全新的单位：fr，它是fraction（分数）的缩写，所以从此以后，你的兵器库里除了px, em, rem, 百分比这些常见兵器以及vw, vh这些新式武器之外，又多了一样旁门暗器fr，要想用好grid，必须充分掌握fr。另一个重点是斜杠操作符，这可不是分数哦。它表示的是起始位置和结束位置。比如说3 / 4，这可不是四分之三的意思，这是指一个元素从第3行开始，到第4行结束，但又不包括第4行。 同样，与grid相关联的也有一大堆旁门属性，是在学习display: grid;的同时必须掌握的。包括grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能详述，关于这个写起来又是一大篇文章。详情还是参考csstrick上这篇文章，讲得非常细致非常清楚。 display: ruby; ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西，但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之，display: ruby;的作用就是可以做出下面这样的东西： 很好的东西，对吧？如果可以用的话，对我国的小学教育可以有极大的促进。但可惜我们现在暂时还用不了。 ruby这个词在英语里的意思是红宝石，但在日语里是ルビ，翻译成中文是旁注标记的意思，我们中文的旁注标记就是汉语拼音。可以想见，这个标准的制定者肯定是日本人，如果是我们中国人的话，那这个标签就不是ruby，而是pinyin了。还有一个ruby语言，发明者也是一个日本人，和html里这个ruby是两码事，不要搞混了。 ruby的语法大致如下： display: subgrid; 2015年8月6日，W3C的级联样式单（CSS）工作组（Cascading Style Sheets Working Group）发布了CSS网格布局模块第一级（CSS Grid Layout Module Level 1）的工作草案。在这个草案里规定了上一节我们讲到的display: grid;的方案。而display: subgrid;是属于2017年11月9日发布的非正式的CSS网格布局模块第二级的内容。所以这是一个非常新的草案，并且围绕它的争议从来也没有断过。 subgrid总的思想是说大网格里还可以套小网格，互相不影响。但如果grid里可以再套subgrid的话，那我subgrid里还想再套subgrid怎么办？subsubgrid吗？况且，到底是grid: subgrid;还是display: subgrid;这个也没有达成共识，关于此一系列的争议，感兴趣的同学可以看看这篇文章，英语好的可以看这篇。 列表值 display: list-item; display: list-item;和display: table;一样，也是一帮痛恨各种html标签，而希望只使用 来写遍一切html的家伙搞出来的鬼东西，实际使用极少，效果就是这样： 看，你用 能实现的效果，他可以用 实现出来，就是这个作用。 属性值 属性值一般是附属于主值的，比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。 display: table-row-group; 详情参考display: table;。 display: table-header-group; 详情参考display: table;。 display: table-footer-group; 详情参考display: table;。 display: table-row; 详情参考display: table;。 display: table-cell; 详情参考display: table;。这个属性有必要详细说说，因为它完全可以单独应用，用在高度不固定元素的垂直居中上，详情请见张鑫旭的这篇文章。效果如下图所示： display: table-column-group; 详情参考display: table;。 display: table-column; 详情参考display: table;。 display: table-caption; 详情参考display: table;。 display: ruby-base; 详情参考display: ruby;。 display: ruby-text; 详情参考display: ruby;。 display: ruby-base-container; 详情参考display: ruby;。 display: ruby-text-container; 详情参考display: ruby;。 显示值 MDN里把它叫做 values（盒子值），我把它叫做显示值，主要是为了便于理解。 display: contents; 这大概是2018年年初最令人喜大普达的一件大事了：Chrome 65版本终于要支持display: contents;了！Firefox早就支持了，而Chrome直到现在才开始支持，这么重要的特性，它到底有什么功能呢？结果恐怕会令你大失所望。原来的布局是这样的： 你给中间那个div加上display: contents;之后，它就变成这样了： 这就是display: contents;的作用，它让子元素拥有和父元素一样的布局方式，仅此而已。 display: none; 这么著名的值还用多说吗？ 混合值 display: inline-block; 关于display: inline-block;的作用恐怕只要做过3天以上前端的工程师都应该知道。什么也不说了，上一张著名的图片作总结吧： display: inline-table; 你要能理解inline-block，你就能理解inline-table。在行内显示一个表格，就像这样： display: inline-flex; 这个就不用多说了吧？跟上面一样，在行内进行弹性布局，参考display: flex;。 display: inline-grid; 同上，在行内进行网格布局，参考display: grid;。 全局值 这些值不是display属性的专利，几乎其它任意属性都可以用，列在这里凑个数。 display: inherit; 继承父元素的display属性。 display: initial; 不管父元素怎么设定，恢复到浏览器最初始时的display属性。 display: unset; unset混合了inherit和initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设定。直接看图最明白： 总结 以上就是在css里display的32种写法。谈了这么多，不知道你记住了多少呢？其实，单纯理解每一个display属性的取值都不难，难的是融会贯通，在恰当的地方运用恰当的值，毕竟我们的目的是为了把代码写短，而不是把代码写长。如果你怕记不太清的话，就请你收藏这篇小文，也许将来的某一天，你会用得着。 你可能感兴趣的:(css,css3,flex,grid,inline-block) cocos creator从零开发2048(06)-格子移动逻辑和键盘控制移动 cocos 编辑scripts/Game.ts，添加_moving属性标识当前是否移动中。privategridsReversed:Grid[][]=[]private_moving=false添加move方法移动格子。privatemove(grids:Grid[]){letlastIdx=grids.length-1letlastNum=grids[lastIdx].numfor(leti=grids.l CSS中五种定位方式（position）对比分析 七公子77 csscss前端 在CSS中，定位方式（position）决定了元素如何相对于其参照物进行定位，同时影响文档流的布局。以下是五种定位方式的对比、参照物说明及代码示例：1.position:static（默认定位）参照物：无，元素位于默认文档流中。文档流：元素按照HTML顺序自然排列。特点：top、right、bottom、left和z-index属性无效。示例：Box1Box2.box{width:100px;he 揭秘 CSS Houdini：用浏览器魔法解锁 CSS 的终极潜力 寒鸦xxx csshoudini前端 一、为什么我们需要CSSHoudini？1.1传统CSS的困境当我们试图用CSS实现一个波浪形边框时，通常会经历这样的挣扎：/*传统实现方案*/.wave-border{position:relative;overflow:hidden;}.wave-border::after{content:'';position:absolute;/*需要复杂计算和多个伪元素拼接*/}这种实现方式存在三个致命 python制作登陆窗口_python登陆界面 weixin_39758494 python制作登陆窗口 广告关闭腾讯云11.11云上盛惠，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！print(账号密码错误！请重试。)returnfalsebutton(master,text=登陆,width=10,command=test).grid(row=3,column=0,sticky=w,padx=10,pady=5)button(master,text=退出,wid Python+Playwright常用元素定位方法 HAMYHF python功能测试 CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ JavaScript网页设计案例：打造交互式个人简历网站 程序媛小果 前端javascript开发语言ecmascript 在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和 CSS 滚动条样式修改（详细） mr_cmx csscss3html 1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 安全web安全网络网络安全CTF 目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5. 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 网络安全web安全linux密码学CTF 目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5. dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript) weixin_39979245 dreamweaverhtml语言 Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978 html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作 律保阁-Michael html5中css的含义 HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48 html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准 vvv666s ②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入 前端开发入门指南：HTML、CSS和JavaScript基础知识 方向感超强的 javascriptcsshtml前端 引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与 网页中加载 SVG 的七大方式 前端熊猫 Svgjavascripthtmlsvgvue 一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100 jQuery UI CSS 框架 API lly202406 开发语言 jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工 部署前端项目2 augenstern416 前端 前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V CSS属性 augenstern416 CSScss前端 1.CSS定位方式initial：设置该属性为浏览器默认值inherit：规定应该从父元素继承position属性的值。static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。absolute：生成绝对定位 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 网安詹姆斯 web安全CTF网络安全大赛pythonlinux 【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S 前端基础入门：HTML、CSS 和 JavaScript 阿绵 前端前端htmlcssjs 在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元 网页制作03-html,css,javascript初认识のhtml的图像设置 Ama_tor 网页制作专栏htmlcss前端 一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持 CSS 修改 SVG图标的颜色 小达学徒 htmlcsssvg图标颜色改变 方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh i css svg,如何设置 CSS 背景图中的 SVG 的颜色 魔法少女皮皮瞎 icsssvg ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很 css给网页添加 黑白滤镜 nqxcwl 前端css给网页添加黑白滤镜 /*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);} 【layui】layui表格过滤 weixin_43250628 layui前端layuijavascript前端 1.除了引用必要的layui的js和css，还需引入tableFilter.js。2.然后就是代码展示部分；layui.config({base:'../../layui/plugins2/',//扩展路径version:'v1.0.0'}).extend({tableFilter:'tableFilter'//模块别名});functionsetGridData(data){layui.use( Electron学习 星空0107 electronjavascriptecmascript Electron的简介Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序Electron的安装运行cmd,输入npminit，然后一直按enter换行即可输入cnpmielectron-S（如果电脑没有安装cnpm会报错，需要安装 electron学习笔记 weixin_46452138 electron学习javascript electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基 本地运行 DeepSeek-R1 的成本究竟多高？ 前端javascript ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高？DeepSeek让人们对大规模生成式模型的追求更进一步，甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”，可不是闹着玩的：光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下，如果真想在个人电脑上运行DeepSeek-R1，可能需 构建 Next.js 应用时的安全保障与风险防范措施 前端javascript ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js作为一款备受欢迎的React框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。一、Next.js安全问题概述尽管Next.js为构建安全应用提 写轮眼按钮特效：打造炫酷网页按钮 孤客网络科技工作室 html+css网页开发html 写轮眼按钮特效：打造炫酷网页按钮引言在网页设计中，按钮是用户交互的重要元素之一。一个炫酷的按钮特效不仅能提升用户体验，还能为网页增添独特的视觉吸引力。今天，我们将通过CSS和JavaScript来实现一个“写轮眼”按钮特效，灵感来源于《火影忍者》中的经典元素——写轮眼。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创建一个简单的HTML结构 今日-Vue框架 幼儿园口算大王 vue.js前端javascriptjava 什么是VUE框架？Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。Vue的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue也被称为 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解 一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或 mysql优化特定类型的查询 annan211 java工作mysql 本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统 MAC下安装多版本JDK和切换几种方式 棋子chessman jdk 环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav javaScript （1） Array_06 JavaScriptjava浏览器 JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP        现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      & Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎   IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配 mac os 系统科研软件总结 张亚雄 mac os 1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb Maven实战（四）生命周期 AdyZhang maven 1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post Linux下Jenkins迁移 aijuans Jenkins 1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com & request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream 问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化 网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where jsonObject的使用 bijian1013 javajson         在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p 【Scala十三】Scala核心七：部分应用函数 bit1129 scala 何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p Tomcat Error listenerStart 终极大法 ronin47 tomcat Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa 不用加减符号实现加减法 BrokenDreams 实现         今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。     读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式 声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在 CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA 调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700 maven环境快速搭建 daizj 安装mavne环境配置 一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多 PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP 对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th Java集合对象和数组对象的转换 dyy_gusi java集合     在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过 nginx同一主机部署多个应用 geeksun nginx 近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 # ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：   第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua   JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成 Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器 原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav Linux下df与du两个命令的差别？ pda158 linux 　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor 在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中 该学习笔记用到的Employee表 vipbooks oraclesql工作     这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓 按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.