JS&CSS

  • 各浏览器核心(js引擎及排版引擎)：IE—排版引擎Trident、JS引擎Chakra；FF—排版引擎Gecko、JS引擎JagerMonkey；GG/SF—排版引擎Webkit、JS引擎V8；OP—排版引擎Presto、JS引擎Carakan
  • 排版引擎不是直接就是css引擎了，里面包含了dtd模式规则和css引擎等，一个相当经典的问题，在html4的时候a标记内不应该包含块级元素，所以排版引擎还要根据自己的嵌套规则(跟dtd相关)来进行排版，对于支持html5的浏览器而言，对结构的探讨有了重大变化，例如a标记可以嵌套块级元素等。
  • 调用setTimeout函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间而非确切的时间。
  • 闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」。
  • 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中(不被垃圾回收机制(garbage collection)回收)。

———————————————————————————————————————————————————————————————

  • 对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
  • ‘inline-block’的基线是正常流中最后一个line box的基线, 除非，这个line box里面既没有line boxes或者本身’overflow’属性的计算值而不是’visible’, 这种情况下基线是margin底边缘。
  • 在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。例如，line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线。
  • 中线的定义为：中线位于基线的上方，与基线的距离为小写字母x高度（即ex）的一半。ex是CSS中的一个相对单位，指的的是小写字母x的高度，就是指”x-height”。
  • 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误。
  • 我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。
  • Repaint—屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
  • Reflow—意味着元素的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元素的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。
  • el.style.cssText += “; left: “ + left + “px; top: “ + top + “px;”。
  • Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。CSS2.1中只有BFC和IFC,CSS3中还增加了GFC和FFC。
  • BFC定义：BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
    BFC布局规则：
    • 内部的Box会在垂直方向，一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    • 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算BFC的高度时，浮动元素也参与计算。

      Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
      In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
      In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

  • th、td 标签：这两个标签就是承载信息的单元格。
  • 最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表，对象里图片大小不定时候，为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。
  • background-size：cover表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；contain表示把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
  • word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

    Flex布局

  • 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
  • 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。属性的角度：容器的属性(6个属性设置在容器上)、项目的属性(6个属性设置在项目上)。
  • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
  • 容器的flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。项目的flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。常见布局的Flex写法。
  • 容器属性align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。项目属性flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • display: flex;的嵌套使用。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size），它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。align-items属性定义项目在交叉轴上如何对齐，stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    rem/em单位

  • em也可以用来指定除了font-size的其它属性值。margin和padding属性也经常用em设置大小。
  • 我喜欢em帮助我完成模块化组件，但是讨厌它所带来的代码复杂性。我喜欢rem计算的便捷，但是讨厌他是我模块化组件的阻碍。事实证明。rem和em均有各自的优缺点。应给根据实际情况来判断其使用方式。这里我有两个简单的规则：1、如果这个属性根据它的font-size进行测量，则使用em；2、其他的一切事物均使用rem.

CSS3

  • CSS3被划分为模块。其中最重要的CSS3模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面。边框属性：border-radius、box-shadow、border-image；背景属性：background-size、background-origin；文本属性：text-shadow、word-wrap；CSS3转换是使元素改变形状、尺寸和位置的一种效果。您可以使用2D或3D转换来转换您的元素。在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。resize、box-sizing、outline-offset。
  • border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。background-origin 属性规定背景图片的定位区域。背景图片可以放置于content-box、padding-box 或 border-box 区域。
  • 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。

  • 其他

  • html的
    、
    、
    是一组合标签，使用了dt、dd最外层就必须使用dl包裹。如没有对dl、dt、dd标签初始CSS样式，默认dd列表内容会一定缩进。首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。
  • HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。目前各主流浏览器对此API提供了良好支持，IE需8+。

Comments

去留言
2016-03-13
⬆︎TOP