EzCook

本篇中的”伪元素”特指”:before”和”:after” 语法和浏览器支持早起的伪元素是使用一个冒号声明的”:”, 在 CSS3中修订后伪元素的声明使用两个冒号”::”, 但是为了目前的兼容性考虑(IE8), 建议使用”:”声明. 伪元素会在内容元素的前后插入额外的元素, 技术上等同于 <p> <span>:before</span> This is the main content. <span>:after</span> 当然, 这些元素无法在文档的源码中找到

1. Keep Your Personal Life in a Separate RoomYou should never work in your comfort zone. For example: the kitchen is for eating, the common space is for socializing, the bedroom is for sleeping and so the office is for working.You need to establish those boundaries early on, because they can quickly become bad habits. 2. Establish Boundaries with Your HousematesHousemates need to understand that there are boundaries, that you can not be distracted or take on responsibilities such as housework or ...

通常一个前端构建流程包括: 文件清理: gulp-clear 文件拷贝: gulp-copy 文件转换: gulp-webpack 文件合并: gulp-concat 文件压缩: gulp-minify 文件服务: gulp-connect 文件监控: gulp-watch css 相关: less, sass 转换(gulp-less, gulp-sass) css 自动添加前缀(gulp-autoprefixer) js 相关: jslint(gulp-jshint) html 转换 html 模板(gulp-jade, gulp-ejs) html prettify html validator html min Gulp 通过定义gulpfile.js配置文件的方式定义流程, gulp.js 会通过调用 Node.js 来执行流程. 引入插件var gulp = require("gulp"), ... `</pre> ### 设定路径 <pre>`var paths = { styles:{ ...

HTML 和 CSS 本身的性能问题并不突出, 在提高可读性和可维护性的前提下, 如果能让代码运行和解析的速度更快, 则是锦上添花.使用高效的 CSS 选择器首先要知道浏览器如何解析 CSS以 .nav ul.list li div{} 为例浏览器遍历 div, 然后从遍历结果中寻找父集为 li 的对象, 依次进行选择器搜索. 所以如果选择器层级过多, 会导致性能低下.解决方法: 令第一次匹配时的数量最少, 并让整体的匹配查找次数更少.具体做法: 避免使用通配符 避免使用标签选择器和单个属性选择器作为关键选择器 不要在 id 选择器前加标签名 不要设定过多层级, 降低 CSS 和 DOM 结构的耦合度 CSS 相关的图片处理 不给图片设置尺寸: 有时候同一张图会在页面不同低昂多次使用, 比如缩略图, 正常图, 大图等. 如果图片的原始尺寸与实际需求不同, 在使用时通过缩放会给 CPU 带来额外的计算过程, 增加了图片在浏览器中的渲染时间. 网络传输过程也会占用更多带宽, 增加下载时间. 最佳做法是为需要的部分单独做一套图片, 初始页面加载时就能更快显示. 使用雪碧图, 利用 cs ...

Box: CSS 布局的基本单位Box 是 CSS 布局的对象, 和基本单位, 直观点来说, 就是一个页面是由很多个 Box 组成的. 元素的类型和 display 属性, 决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器), 因此 Box 内的元素会以不同方式渲染.盒子的类型: block-level: display:block的 block, list-item, table 元素会形成 block-level box, 并参与 Block formatting context. inline-level box: display:inline的 inline-block, inline-table 元素会形成 inline-level box, 并参与 inline formatting context; run-in box: CSS3 才有, 略; Formatting ContextFormatting Context 是 W3C CSS2.1 规范中的一个概念, 是页面中的一块渲染区域 ...

外边距合并的意思是两个垂直排列的块的外边距可能发生(坍塌)合并, 仅保留较大的边距. 情况一:两元素上下排列 情况二:两元素是父子关系, 若此时父元素没有设定 border, margin(或者宽度为 0), 他们的上下边距也会发生合并. 情况三:自身是一个有上下外边距的空元素, 如果没有 border 和 margin, 自身的上下外边距也会合并 如果这个空元素还与另一个元素垂直排列, 会继续发生合并 对象只有普通文档流中的块元素会发生外边距合并, 如果是浮动块, 或者是绝对定位块, 他的外边距是不会合并的.

语法 mix-blend-mode: &lt;mode&gt; normal: 默认值, 正常 multiply: 正片叠底 - 查看对应像素的颜色信息, 并将基色和混合色复合, 结果色总是比较暗的颜色, 任何颜色与黑色正片叠底都产生黑色, 任何颜色与白色正片叠底都保持不变. 正片就是常见的幻灯片, 正片叠底的效果就是把基色和混合色的图像都做成幻灯片, 把他们叠放在一起, 凑近亮处显示的效果, 由于两张幻灯片都有内容, 所以重叠起来的图像比单张要暗 screen: 滤色 - 滤色原理和显示器成像原理相同, 将两副幻灯片分别放在不同投影仪上, 打向同一个屏幕, 由于光线的叠加效应, 得到的是一个更明亮的图像. 基色的反相与混合色的反相相乘, 得到的结果除以 255 后再反相. overlay: 叠加 lighten: 变量 darken: 变暗 color-dodge: 颜色减淡 color-blur: 颜色加深 hard-light: 强光 soft-light: 柔光 difference: 差值 - 混合色与基色相减后取绝对值 exclusion: 排除 hue: ...

$ npm install —g gulp全局安装 安装前保证已经安装了 ruby $ npm install —save-dev- gulp作为项目的开发依赖( devDependence)安装到项目目录 在项目根目录下创建一个名为gulpfile.js的文件: //引用 gulp plugin var gulp = require(‘gulp’);//建立 gulp taskgulp.task(‘default’, function(){//任务代码})</pre> 在项目根目录运行 gulp 时, gulp 会直接读取gulpfile.js`中定义的任务并执行. gulp 可以将每一个你要执行的工作命名, 而默认运行的 task 名为default $ gulp`运行 gulp, 运行默认的名为’ default’ 的任务( task) gulp &lt;task&gt; &lt;othertask&gt;运行指定 task gulp 基本 API gulp.src(globs[, options]) ...

获得文件路径: var filePath = document.getElementById("file").value 截取文件名: 保留后缀: * `var fileName = filePath.split('\\').pop()` var fileName = filePath.substring(filePath.lastIndexOf('\\')+1) 不保留后缀: * `var fileName = filePath.split(/\.|\\/).slice(-2,-1)[0]` var fileName = filePath.substring(filePath.lastIndexOf("\\")+1,filePath.lastIndexPathOf("\."))

In HTML &lt;p&gt;0&lt;/p&gt; &lt;div&gt;1&lt;/div&gt; &lt;div&gt;2&lt;/div&gt; &lt;p&gt;3&lt;/p&gt; &lt;div&gt;4&lt;/div&gt; &lt;div&gt;5&lt;/div&gt; &lt;div&gt;6&lt;/div&gt; The Selector div:nth-child(3) will choose the 3rd element from all elements in the level where div is, then check if the 3rd element is a ‘div’. In this case, the 3rd element is a ‘div’, so it works(&lt;div&am ...

基本语法border-image: none|&lt;image&gt;[&lt;slice&gt;|&lt;width&gt;|&lt;repeat&gt;] border-image-source: url("…"); border-image-slice:[&lt;number&gt;|&lt;percentage] * 用于分解引入的图片, px 是默认单位, 如果用 number 则一定不能加上 px percentage 是相对于引入的 image 而言的, 例如 image 的大小为 300 x 240, 若设定 slice: 25%, 30%, 15%, 20%, 等于截取了图片外侧的 60px, 90px, 36px, 60px 的部分作为边框 实际上 CSS3 将该图片划分成 9 个部分, 再根据 width 和 repeat 进行处理后拼接成边框 四个角不会受到 repeat 的影响而产生变形, 四个边会受到 repeat 的影响而变形. b ...

英语原文: MDN:filter 总结Filter 属性用于实现”模糊”, “锐化”, “颜色替换”等图像渲染效果. Filter 通常用于调整图像, 背景, 边框的呈现. 语法filter: url("filter.svg#filter-id"); filter:blur(5px); filter:brightness(.4); filter:contrast(200%); filter:drop-shadow(16px 16px 20px blue); filter:grayscale(50%); filter:hue-rotate(90deg); filter:invert(75%); filter:opacity(25%); filter:saturate(30%); filter:sepia(60%); /*Apply multiple filters*/ filter: contrast(75%) brightness(3%); /*Global Values*/ filter: inherit; filter:initial; filter:uns ...

box-shadow 常规用法基础语法box-shadow 属性向边框添加一个或多个阴影; box-shadow: (inset) x-offset, y-offset, blur, spread color; 模拟多边框div{ width: 100px; height: 100px; margin: 100px; border:5px solid ; box-shadow: inset 0 0 0 5px #ccc, 0 0 0 5px #333; } `</pre> 要注意: box-shadow 毕竟不是实际边框, 不占据实际空间, 也不属于 `box-sizing`范围 ### 模拟半透明遮罩层 <pre>`#foo{ width:200px; height:200px; background:#FFF; box-shadow:0 0 0 1920px rgba(0,0,0,.5); } `</pre> ### 多重 box-shadow 绘制简图案 ...

语义化命名 语义化的 HTML 能够直接表示出某个 Tag 的业务功能; 语义化的 CSS 可以提高样式的抽象程度, 方便复用; 模块化 提高代码复用程度; 使业务逻辑更加清晰; 选择一个好的命名约定遵循单一职责原则SRP 原则即每个模块或者类应当只承担系统中的某一个单一功能, 并且该功能应当完整封装起来. 比如 CSS 组织结构中的 Carousel, NavigationBar 等, 要做成独立的 CSS Component.

The ‘method’ attribute in form element specifies how to send form-data(the form-data is sent to the page specified in the ‘action’ attribute). The form-data can be sent as URL variables(with method='get') or as HTTP Post transaction(with method='post'). Notes on GET: Appends form-data into the URL in name-value pairs; The length of a URL is limited(about 3000 characters); Never use GET to send sensitive data cause they will be visible in the URL; Useful for form submissions where ...

.container{ overflow-y:scroll; overflow-x:hidden; perspective:1px; transform-style:preserve-3d; color:yellow; text-align:center; } .bg{ width: 100vw; height: 40vh; position:relative; } h1{ padding:100px; } .bg:before{ position:absolute; top: 0; left: 0; right: 0; bottom: 0; content:""; display:block; background: url("http://7xu8mu.com1.z0.glb.clouddn.com/katong_1.jpg"); background-size:cover; z-index: -1; transform:translateZ(-1px) scale(2); } ...

_,_:before,*:after{ box-sizing: border-box; } .wrapper{ padding-top: 40px; padding-bottom: 40px; } .wrapper:focus{ outline:0; } .clash-card{ background-color: #fff; width: 300px; display: inline-block; margin:auto; border-radius: 20px; position:relative; text-align: center; box-shadow: -1px 15px 3 ...

.accordion{ margin:50px auto; width: 380px; cursor:pointer; } .accordion .item{ height:100px; } .accordion .item h3{ display:inline-block; vertical-align:middle; height: 100%; padding-left: 50px; font-size: 20px; font-weight: 400; } .accordion .item h3:before{ content:""; display:inline-block; vertical-align:middle; height: 100%; } .accordion .item:first-of-type{ background-color: #620808; color:#f4ce74; } .accordion .item:nth-of-type(2){ background-color: #a5 ...

section{ margin:0 auto; } .button{ display:inline-block; font-size:30px; border:1px solid maroon; padding:10px 20px; color:maroon; position:relative; } .button:before{ position:absolute; top: 50%; left: 50%; color:transparent; content:"·"; text-shadow:0 0 transparent; font-size: 1.2em; transition: text-shadow .3s,color .3s; transform:translateX(-50%); } .button:hover:before{ color:maroon; text-shadow: 10px 0 maroon, -10px 0 maroon; } Button Use text-shado ...

.st-container{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .st-container &gt; input, .st-container &gt; a{ position:fixed; bottom: 0; width: 20%; cursor:pointer; font-size: 16px; height: 34px; line-height: 34px; } .st-container &gt; input{ opacity: 0; z-index: 1000; } .st-container &gt; a{ z-index: 10; font-weight: 700; background: #e23a6e; color:#fff; ...