美酒爱尔兰的博客

高度塌陷 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱 margin塌陷 指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值。 block formatting context即块级格式化上下文。它决定了块级...

把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。 两种盒模型： 1.标准模型（不包含border和padding） width：border+padding+content height:border+padding+content 2.IE模型：（包含border和padd...

语义化优点： 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐 标签： <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或...

Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术 Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案； SVG为矢量图，提供一系列图形元素（Rect，Path，Circle，Line...）；还有完整的动画，时间机制，本身就能独立使用，也可以嵌入到HTML中。 区别： Canvas 提供功能...

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> viewport 控制手机全屏width=device-width//强制让文档的宽度与设备的宽度保持1:1， initial-scale //文档初始化缩放比例是...

基础选择器 1、标签选择器：选择器的名字代表html页面上的标签 （1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。 （2）无论这个标签藏的多深，一定能够被选择上。 （3）选择的所有，而不是一个。 2、ID选择器：规定用#来定义（名字自定义） 3、类选择器：规定用圆点.来定义 4、通配符*：匹配任何标签 高级选择器 1、后代选择器: ...

css伪类 css伪类用于向某些选择器添加特殊的效果。:link, :visited, :hover, :focus, :active, :first-child, :lang css3新增的伪类：:last-child,:only-child,:first-of-type,:last-of-type,:only-of-type,:nth-child(n),:nth-last-...

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。 可以继承的css样式： azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant,...

Flex语法：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool Grid语法：https://www.cnblogs.com/xiaohuochai/p/7083153.html#anchor1 主要介绍flex. Grid还有待研究。 Flex 是 Flexible Box 的缩写，意为...

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 CSS 语法 /*filter: none | blur()高斯模糊 | brightness()亮度| contrast()对比度 | drop-shadow() 给图像设置一个阴影效果| grayscale() 转灰度图| hue-rotate()给图像应用色相旋转 | invert()反...

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 CSS 语法 @mediamediatypeand|not|only(media feature){ CSS-C...

rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 以下代码可以适配不同大小屏幕宽度。这种方式在浏览器中兼容性较差，但在...

transform 在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform在不同浏览器内核下的书写规则 //Mozilla内核浏览器：firefox3.5+ -moz-transform: rotate | scale | skew | translate ; //Web...

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。 引用数据类型：对象(Object)、数组(Array)、函数(Function)。 ...

在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。 a、JavaScript的变量作用域是基于其特有的作用域链的。 b、JavaScript没有块级作用域。 c、函数中声明的变量在整个函数中都有定义。 ...