HTML&CSS.md

• 给行内元素设置padding和margin是否有效[ ! important ]

  对行内元素，左右设置优先，上下设置无效，包括padding-top/bottom, margin-top/bottom, 从显示效果上增加了，但其实设置无效，不影响周围的元素，盒子模型并未被撑开。（对img有效）

• 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局[ ! important ]

  vw, wh： 相对于视窗长宽的百分比

  vmin和vmax：vw和vh中较小和较大的那个

  建议综合 固定宽度、字体大小可用rem、px；其他可结合vw %

• CSS层叠上下文、层叠等级、层叠顺序、z-index

  

  首先先看要比较的两个元素是否处于同一个层叠上下文中： 1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。 1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。 2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

• 浅谈script标签中的async和defer

  defer会异步地按照顺序执行，async并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

• 由 flex: 1引发的思考

  flex 是 flex-grow、flex-shrink、flex-basis的缩写。

  .item {flex: 1;}
  .item {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0%;
  }

• 响应式布局[ ! important ]

  1. 设置 Meta 标签

  2. 通过媒介查询来设置样式 Media Queries

     @media screen and (max-width: 980px) {
       #head { … }
       #content { … }
       #footer { … }
     }

• 行内元素和块状元素的区别

  当把行内元素设置为float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了中间莫名的空白。