前端知识杂烩（HTML[5]?+CSS篇）

标签：

1. CSS 优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式以最后载入的定位为准;
  优先级为:!important > id > class > tag
  important 比 内联优先级高

2.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

• 给div设置一个宽度，然后添加margin:0 auto属性

.div{
    width:200px;
    margin:0 auto;
 }

• 居中一个浮动元素
  确定容器的宽高 宽500 高 300 的层
  设置层的外边距为负的宽和高的一半

 .div {
      float: left;
      width:500px ; height:300px;//高度可以不设
      margin: -150px 0 0 -250px;
      position:relative;         //相对定位
      background-color:red;     //方便看效果
      left:50%;
      top:50%;
 }

• 让绝对定位的div居中

  .div {
        position: absolute;
        width: 1200px;
        background-color: red;
        margin: 0 auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

3.用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

具体原理参考：
https://www.zhihu.com/question/35180018
The Shapes of CSS

4. 如何解决inline-block元素的空白间距（i与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

）
这个原因是因为li元素的换行引起的，你可以把所有的li写成一行： <li>1</li><li>1</li><li>1</li> ，一定不要换行。

或者用注释符号链接：

<li>1</li><!--
--><li>1</li><!--
--><li>1</li>

或者用 html 5 不闭合的写法：

<li>1
<li>1
<li>1

还有个解决方案就是设置 父级元素的字体大小 font-size: 0px;
更具体参考：
如何解决inline-block空白间距
去除inline-block元素间间距的N种方法

5.CSS强制文本在一行内显示若有多余字符则使用省略号表示

<style>
.div{
   width:100px;
   height:20px;
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
}
</style>

同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果：

6.css中伪类属性修改a标签的样式：

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

7. HTML dl 标签

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

注意用法：<dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

8. 置换元素与不可置换元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据<img>标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的<img>、<input>、<textarea>、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

b) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。
例如：<label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。

9.HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
• 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

10. 详说 Cookie, LocalStorage 与 SessionStorage

基本概念

• Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

• localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

• sessionStorage
  sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清

先来介绍一下localStorage和cookie的区别：

（1）localStorage的存储容量比cookie更大；localStorage用于持久化的本地存储，除非手动删除数据，否则会一直保存。

（2）cookie作为http规范的一部分，它的主要作用是与服务器进行交互，使http保持连接状态。也就是你每次请求一个新的页面的时候，cookie都会被发送过去，这样无形中就浪费了宽带。cookie过期删除

（3)cookie保存是能指定可以访问该cookie的范围；localStorage的访问范围就是当前整个网站，不存在访问范围这个概念。且，两者都不支持跨域调用。

(4) sessionStorage用于本地存储一个会话的数据，当会话结束时，存储的数据也会自动销毁（即当页面关闭的同时也销毁数据），因此，sessionStorage不是一个持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非手动删除数据，否则会一直保存。
三者的异同

补充：
cookie 和session 的区别：这里所说的session是服务器端的session

 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
     考虑到减轻服务器性能方面，应当使用COOKIE。
 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
 5、所以个人建议：
    将登陆信息等重要信息存放为SESSION
    其他信息如果需要保留，可以放在COOKIE中

11.CSS3新增伪类选择器、伪元素

总的来说

• 基本选择器：element1~element2为CSS3新增
• 属性选择器：[attribute^=value]、[attribute$=value]、[attribute*=value]为CSS3新增
• 动态伪类选择器：link、:visited、:hover、:active、:focus这些伪类选择器CSS2就全部支持了。
• 目标伪类选择器：:targetCSS3新增
• 语言伪类选择器：:langCSS2已经支持
• UI元素状态伪类选择器：：enabled、:disabled、:checked为CSS3新增
• 结构伪类选择器：:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child p:last-child、:root、:empty为CSS3新增。first-child为之前就支持。
• 否定伪类选择器：E:not(F)为CSS3新增
• 伪元素：::first-line、::first-letter、::bofore、::after、::selection

  伪元素可用于定位文档中包含的文本，但无法在文档树中定位，伪元素之前就存在，如“:first-line、:first-letter、:bofore、:after”，CSS3标准在前面又加了一个冒号，以区分伪类和伪元素。

12.“渐进增强”与“优雅降级”的理解

• 渐进增强 （progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。比如CSS3的圆角效果，首先保证在低版本浏览器就显示方方正正的不影响基本结构功能，其次可以添加圆角效果，使其在高版本浏览器更美观。
• 优雅降级 （graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
  平稳退化：还有一个类似的说法叫做“平稳退化”，大概的思想是即便浏览器缺失某些功能，例如在 js /css的加载失败/被禁用时，也不影响用户的相应功能。例如：xxxx即使js功能被禁用，浏览器也可以沿着href属性给出的链接显示图片。

13.css居中问题

• 方法一：表格布局

/*css*/
.content{
    display:table;
}
.cell{
   display:table-cell;
   vertical-align:middle;
}

• 方法二：绝对定位加负的外边距(下列是基于视口水平垂直居中）
  如果不是视口（body或者html）做包裹元素的话就要显式的定义包裹元素的position:relative属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>居中</title>
    <style type="text/css">
    body,html{
        //content包围元素为视口宽度
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
      .content{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -250px;
        margin-top: -250px;
        width: 500px;
        height:500px;
        border: 2px solid red; 
}      
    </style>
</head>
<body>   
<div class="content">
    your content
</div>
</body>
</html>

• 方法三、绝对定位+transform反向偏移
  还是上面的例子将内部元素的设置负的外边距的那两句改成
  tansform:translate(-50%,-50%)

• 方法四：使用css3弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }    
        body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body里的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;        
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

对于方法四，也可将align-items: center;justify-content: center;去掉，在.content中加入：margin:auto

• 方法五：单行文本时，可以利用line-height属性与元素高度相同，如下：

<div class="content">
    your content
</div>
/*css*/
.content{
    height:20px;
    line-height:20px;
}

14.用margin还是用padding

CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南
关于什么时候用margin什么时候用padding，网上有许许多多的讨论，大多数似乎讨论到点上面，却又有些隔靴搔痒的感觉，总是答不到点上。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
参考：http://www.hicss.net/use-margin-or-padding/

15.display属性的常用的三个取值block，inline和inlinke-block细节对比

display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
除了上面三种常用的取值，display还可以取值table、list-item、none、inherit

16.HTML5和CSS3新特性

1.HTML5

• 新增语义化更好的元素，比如：article、footer、header、nav、section;
• 绘画canvas
• HTML5原生的拖放
• 用于媒介播放的video和audio元素;
• 新的表单元素和表单属性以及新的Input类型:新增表单元素（datalist、keygen、output）;表单属性（autocomplete、autofocus、placehold等）；新的输入类型（color、date、time、email、url、search等）;
• Web存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
• 离线web应用（应用程序缓存）
• 新的技术webworker, SSE 与websocket, Geolocation;

2.CSS3

• 新增部分属性选择器和很多伪类选择器,具体参考11题
• 边框效果：圆角效果（border-radius:8px）、渐变与多颜色边框效果、盒子阴影效果（（box-shadow:10px）、图片边框（border-image）
• 多背景
• 渐变（linear-gradient、radial-gradient）
• 文字特效（text-shadow、word-break、word-wrap等）
• 转换与变形（transform）
• 过度效果（transition）
• 动画（@keyframes定义动画，animation执行动画）
• 多列布局（columns）
• 盒模型（bix-sizing、outline）
• 弹性盒模型（flexbox）
• 媒体查询与响应式设计
• 自定义字体（@font-face）

具体请参考我的博文：
HTML5和CSS3新特性一览

17.CSS实现等高布局

• 大padding和负margin法
  设置大的底内边距，然后用数值相似的负外边距消除这个高度。同时设置容器元素overflow属性为hidden。（具体参考《精通CSS(第二版)8.6节》）
• 使用表格布局
  table元素中的table-cell元素默认就是等高的，可以设置容器元素为display:table,等高的几个元素设置display:table-cell
• FlexBox布局
  flex中的伸缩项目默认都拉伸为父元素的高度，也实现了等高效果，可以设置容器元素dispaly:flex,等高的几个元素的flex:1

18.使用css隐藏元素常用的四种方法

• Opacity设置一个元素的透明度

.hide {
    opacity: 0;
}

它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

• Visibility

.hide {
     visibility: hidden;
}

将它的值设为 hidden 将隐藏我们的元素。如同opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。

• Display

.hide {
     display: none;
}

display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display 设为 none 任何对该元素直接打用户交互操作都不可能生效。

• Position

.hide {
      position: absolute;
      top: -9999px;
      left: -9999px;
}

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。

• 其他技巧性方法

.hide{
            width: 0px;
            height: 0px;
            overflow: hidden;
        }

参考
Five Ways to Hide Elements in CSS

19.Quirks模式（怪异模式）是什么？它和Standards模式（标准模式）有什么区别？

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的文档类型声明直接相关，文档类型声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，文档开头未添加文档类型声明或者声明错误,将使网页进入怪异模式(quirks mode)。
区别：

• 1.盒模型
  标准模式的高宽只包含内容；怪异模式盒模型的高宽包含内补丁和边框

• 2.行内元素的高宽
  怪异模式中非置换内联元素的尺寸（比如，默认的span元素）受宽度和高度属性的影响；但是在标准模式中设置的宽高会被忽略。

• 3.百分比的高度
  在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

• 4.用margin:0 auto设置水平居
  使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

• 5.怪异模式中设置图片的padding会失效

20.HTML5中的微格式（微数据）

微格式：建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microformats.org官方定义）。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定，是兼顾人机可读性设计的数据表达方式，对Web网页进行语义注解的方法。这种方法依托于标准的Web页面写作技术，例如，XHTML，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面，在XHTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理XHTML文档的软件，例如，浏览器等，如果不认识这些属性可以跳过，并不造成任何不良影响。

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是<span itemprop="name">王富强</span>，
  但大家叫我<span itemprop="nickname">小强</span>。
  我的个人首页是：
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在上海市富贵新村。我是<span itemprop="title">工程师</span>，
  目前在<span itemprop="affiliation">财富科技公司</span>上班。
</div>

21.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
　那么问题来了，浏览器还有默认的天生inline-block元素**（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？(基本上内联可置换元素就属于inline-block)
　　答案：<input> 、<img> 、<button> 、<textarea> 、<label>。

22.Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

23.一个简单的CSS Reset样式。

html{ -webkit-text-size-adjust:none; -webkit-user-select:none; -webkit-touch-callout: none font-family: Helvetica; } 
body{font-size:12px;} 
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;} 
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;} 
em{font-style:normal} 
li{list-style:none} 
a{text-decoration:none;} 
img{border:none; vertical-align:top;} 
table{border-collapse:collapse;}/*边框会合并为一个单一的边框*/
textarea{ resize:none; overflow:auto;} 

24.几个通用CSS样式

/* public */ 
    /* 清除浮动 */ 
    .clear { *zoom:1; } 
    .clear:after { content:‘.‘; display:block;visibility: hidden; height:0;clear:both; } 
    /* 定义盒模型为怪异盒模型（宽高不受边框影响） */
     .boxSiz{ 
         -webkit-box-sizing: border-box; 
         -moz-box-sizing: border-box; 
         -ms-box-sizing: border-box; 
         -o-box-sizing: border-box; 
         box-sizing: border-box; 
     } 
     /* 强制换行 */ 
     .toWrap{ 
         word-break: break-all; /* 只对英文起作用，以字母作为换行依据。 */ 
         word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据。*/ 
         white-space: pre-wrap; /* 只对中文起作用，强制换行。*/ 
         } 
     /* 禁止换行 */ 
     .noWrap{ white-space:nowrap; } 
     /* 禁止换行,超出省略号 */ 
     .noWrapEllipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 
     /* 文字两端对齐 */ 
     .text-justify{ text-align:justify; text-justify:inter-ideograph; } 
     /* 定义盒模型为 flex布局兼容写法并让内容水平垂直居中 */ 
     .flex-center{ 
         display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; 
         -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; 
         -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center; } /* public end */

25.图片背景位置background-position

设定背景位置时可以使用三种值：关键字、百分比、绝对或相对单位的数值。可以使用两个值
分别设定水平和垂直位置。
关键字指的顺序不重要， left bottom 和 bottom left 意思相同。为了设定的值在所有浏览器
中都有效，最好不要混用关键字值与数字值。
使用数值（比如 40% 30%）时，第一个值表示水平位置，第二个值表示垂直位置。要是只设定
一个值，则将其用来设定水平位置，而垂直位置会被设为 center。
在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。换句话说，如果设定了33% 33%，则图片水平 33%的位置与元素水平 33%的位置对齐。垂直方面也一样，可以通过 center center 把图片的中心点定位在了元素的中心点。像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。
有意思的是，还可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只
能看到部分图片。当然，给图片设定足够大的正值，也可以把图片的右下角推到元素外部，从
而在元素中也只能看到部分图片。位于元素外部的那部分图片不会显示。

26.CSS3伸缩盒模型简介

下面的介绍仅仅针对CSS3最新标准，没有涉及旧的版本与过度版本，CSS3伸缩盒模型博大精深，也不是三言两语能说清，这里只是简要列举了一些属性。

• 应用在父类伸缩容器元素上的属性

1. display: flex | inline-flex

flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

2.flex-direction: row | row-reverse | column | column-reverse
主要用来创建主轴，定义伸缩项目在伸缩容易中的排列方向

row：ltr排版中横向从左到右排列，默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

3.flex-wrap: nowrap | wrap | wrap-reverse
设置伸缩盒容器的子项目超出父容器时是否换行。

nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。ltr排版下，伸缩项目换行后从右向左

4.flex-flow: <‘flex-direction’> || <‘flex-wrap’>
复合属性，2和3两个属性的复合写法

5.justify-content: flex-start | flex-end | center | space-between | space-around
设置伸缩项目在主轴（横轴）方向上的对齐方式，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。（对方不想说话，并直接扔给你一张图）

6.align-items: flex-start | flex-end | center | baseline | stretch

设置伸缩项目在侧轴上的对其方式

7.align-content: flex-start | flex-end | center | space-between | space-around | stretch
设置弹性盒伸缩行在伸缩容器中的对齐方式。

• 应用在子元素伸缩伸缩项目上的属性

1.order: <integer>
用整数值来定义排列顺序，数值小的排在前面。可以为负值。

2.flex-grow: <number> (default 0)
根据弹性盒伸缩项目所设置的扩展因子作为比率来分配剩余空间。不允许负值,，如果没有显示定义该属性，是不会拥有分配剩余空间权利的

3.flex-shrink: <number> (default 1)
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
4.flex-basis: <length> | auto (default auto)
设置伸缩项目的伸缩基准值。

5.flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
复合属性。设置伸缩项目如何分配空间。

举个例子：定义父容器宽（即主轴宽）为800px，三个子元素设置了伸缩基准值flex-basis，相加300+500+600=1400，那么子元素将会溢出1400-800=600px；同时设置了收缩因子分别为1、2、3；所以加权综合可得3001+5002+6003=3100px；
于是我们可以计算三个伸缩项目a,b,c将被移除的溢出量是多少：
a被移除溢出量：3001/3100600=3/31，即约等于58px
b被移除溢出量：5002/3100600=10/31，即约等于194px
c被移除溢出量：6003/3100*600=18/31，即约等于348px
最后a,b,c的实际宽度分别为：300-58=242px, 500-194=306px, 600-348=252px

6.align-self: auto | flex-start | flex-end | center | baseline | stretch
设置某个伸缩项目自身在侧轴（纵轴）方向上的对齐方式。逐一与align-items区别。

参考
A Complete Guide to Flexbox
flexbox-CSS3弹性盒模型flexbox完整版教程

27.CSS颜色表示体系

哪些属性可以设置颜色

• 文本的颜色 color:red
• 元素的背景色 background-color:red （包含各类渐变）
• 元素的边框 border-color:red
• 元素的盒阴影或文字阴影 box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red
• 运用在一些滤镜当中 filter: drop-shadow(16px 16px 20px red)
• <hr /> 水平线的颜色
  一些无法直接设置，但是可以被得到或者继承当前元素 currentColor 的属性：
• <img> 的 alt 文本。也就是，当无法显示图像时，代替图像出现的文本，会继承这个颜色值。
• ul 列表项的小点

色彩关键字
譬如这样 color:red 的 red 即是一个色彩关键字。CSS2标准中有17个，CSS3中扩展到了147个
transparent
transparent 的字面意思就是透明。它用来表示一个完全透明的颜色，即该颜色看上去将是背景色。也可以理解为它是 rgba(0,0,0,0) 的简写。
currentColor
很多人都不知道还有 currentColor 这个东东。和 transparent 一样，它也是一个关键字，顾名思义，它表示当前颜色。它来自自属性或者继承于它的父属性。可以简单的理解为当前 CSS 标签所继承或设定的文本颜色，即 color 的值。
rgb() 与 rgba()
颜色表示模型的话，简单了解一下。
rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式，rgba() 多一个 a ，表示其透明度，取值为 0-1。
hsl() 与 hsla()
除了 rgb 表示法，颜色也可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla() 多一个 a ，表示其透明度，取值为 0-1。。
hsl 相比 rgb 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。

• 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等，取值从0-360,0和360都表示红色，大致是按照彩虹的赤橙黄绿青蓝紫来排列的。
• 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
• 明度（V），亮度（L），取0-100%。

十六进制表示法
具体参考：
CSS 颜色体系详解

28.li多列显示

1. CSS浮动

    ul{
        width: 100%; //不设置亦达到效果
    }
    li{
        width: 33%; //三列显示，两列、四列分别为50%、25%
        float: left; 
        list-style: none; //消除li前的实心圆，也可以通过设置display: block;来实现
    }

2. CSS3多列

    ul{
        column-count: 3;
        -webkit-column-count: 3; //chrome safari
    }
    li{    
        list-style: none; //去掉li前的实心圆，也可以通过设置display: block;来实现
    }

29.CSS背景属性

详情参考： 你不知道的CSS背景—css背景属性全解

• background-attachment :scroll ||fixed
  你懂得不解释
• background-color:hsla(120,65%,75%,0.3)
  可以使用十六进制颜色、RGB颜色、RGBA颜色、HSL色彩、HSLA颜色
  预定义/跨浏览器的颜色名称表示的背景颜色
  背景颜色会铺满:元素内容+padding+border
• background-image:none || <url>
background-image:url(‘paper.gif‘)
  元素的背景是元素的总大小，包括padding和border（但不包括margin）。默认情况下，background-image放置在元素的左上角(因为background-position默认值为0% 0%,这里所说的左上角是指从padding区域开始铺背景，而边框部分是没有背景图片的，这与background-color的默认覆盖范围是不同的)，并重复垂直和水平方向。
• backgroud-positon:%x %y|| xpos ypos||关键字
  关键字为left、right、与top、bottom、center的组合
  注意：在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。换句话说，如果设定了33% 33%，则图片水平 33%的位置与元素水平 33%的位置对齐。垂直方面也一样。图 3-37 所示也是一个例子，那是通过 center center 把图片的中心点定位在了元素的中心点。像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。
• background-repeat:repeat(默认)||repeat-x||repeat-y||no-repeat
  你懂得，不解释

• background-clip:border-box||padding-box||content-box
  分别对应背景被裁剪到边框盒、背景被裁剪到内边距框、背景被裁剪到内容框。
  注意:CSS2元素颜色背景的显示范围与CSS2.1、CSS3并不相同。在CSS2中，颜色背景的显示范围是指内部留白（包括padding）之内的范围（在IE6环境中测试确实是这样的），不包括边框；在CSS2.1和CSS3中（包括IE8以上测试），背景在整个盒模型中，它是布满整个元素的盒子区域的（但是仍然不包括外边margin范围）,还有一点需要注意，当元素的background-repeat为no-repeat时，background-color是从元素的外边框左上角起到外边框右下角止（这很好理解,因为background-repeat的作用对象本来就是图像背景，），而background-image却不一样，从内部留白（padding）外边缘的左上角起到元素边框右下角外边缘止（确实是这样，不信你试试）；当background-repeat的值为repeat时，此时background-image从元素边框左上角外边缘起到元素边框右下角外边缘止，这样就把background-color完全遮住了，但是background-position的起始点却还是从元素的内部留白的外边缘开始。

• background-origin:padding-box (默认值)|| border-box || content-box
background-origin属性主要用来决定background-position属性的参考原点，默认值为padding-box,这也解释了为什么默认的时候，图片是从padding开始铺，而不会铺到边框里

• background-size: length|percentage|cover|contain

30.CSS实现不定大小的图片水平垂直居中（有时间会一一验证写出博客N+1）

对于普通的div居中可以参考我的博客CSS实现元素水平垂直居中—喜欢对称美，这病没得治实际上里面的很多方法也可以直接移植到图片的水平垂直居中

• 方案一：透明gif或者png图片+背景定位的方法
  使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上（下面的例子中是直接写在css中的），因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL 地址。
  核心代码：

<img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" />

• 方案二：display:table-cell和文字大小控制居中
  css代码部分：
  img外部div标签：

div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*这里的大小是根据高宽上限128像素图片设置的*/

img标签：

img{vertical-align:middle;}

• 方案三：透明图片拉伸对齐实现垂直居中显示
  原理简述：将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐

• 方案四&方案五： 基于行内块的方法（参考CSS实现元素水平垂直居中—喜欢对称美，这病没得治）
  原理简述：在容器内插入一个空div标签或者使用伪元素插入空标签
  主要代码：

.img-box:after{content: ‘‘;display: inline-block;height: 100%;width:  0;vertical-align: middle;}
.img-box .img{vertical-align: middle;}

• 方案六 绝对或者相对定位+transform反向偏移（参考CSS实现元素水平垂直居中—喜欢对称美，这病没得治）
  主要代码：

img{
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;    
    transform:-50% -50%
}

• 方案七：用line-height就能达到这样的效果，如下：

.img-box4{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;line-height:144px;}  
.img-box4 .img-src{vertical-align:middle;}  

<style>
        *{padding: 0; margin: 0; list-style: none;}
        /*方案1*/
        .bg-box{width: 144px;height: 144px;font-size:118px;border: 1px solid #ddd;float: left;margin-right: 20px;}
        .bg-box .img-src{background: url(logo.png) no-repeat center center;display: block;width: 100%;height: 100%;}
        /*方案2*/
        .wrap-box{float: left;margin-right: 20px;}
        .img-box{width: 144px;height: 144px;*font-size:118px;vertical-align:middle;display:table-cell;border: 1px solid #ddd;text-align: center;}/*height:fontSize=1.14*/
        .img-box img{vertical-align: middle;}
        /*方案3*/
        .img-box1{width: 144px;height: 144px;font-size:0;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
        .img-box1 .pixel{vertical-align: middle;height: 100%;width: 1px;}
        .img-box1 .img-src{vertical-align: middle;}
        /*方案4*/
        .img-box2{width: 144px;height: 144px;*font-size:118px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
        .img-box2:after{content: ‘‘;display: inline-block;height: 100%;width: 0;vertical-align: middle;}
        .img-box2 .img-src{vertical-align: middle;}
        /*方案5*/
        .img-box3{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;}
        .img-divide{width:0;height:100%;display:inline-block;vertical-align:middle;*display:inline;*zoom:1;}
        .img-box3 .img-src{vertical-align:middle;}
</style>
</head>
<body>
    <div class="bg-box">
        <img src="pixel.png" alt="" class="img-src">
    </div>
    <div class="wrap-box">
        <div class="img-box">
            <img src="logo.png" alt="">
        </div>
    </div>
    <div class="img-box1">
        <img src="pixel.png" alt="" class="pixel">
        <img src="logo.png" alt="" class="img-src">
    </div>
    <div class="img-box2">
        <img src="logo.png" alt="" class="img-src">
    </div>
    <div class="img-box3">
        <div class="img-divide"></div>
        <img src="logo.png" class="img-src">
    </div>
</body>

参考：
大小不固定的图片、多行文字的水平垂直居中
图片垂直水平居中的N种方法

31.CSS固定footer在页面底部的几种方法

这里所说的固定在页面底部并不是说固定在浏览器视口的底部，这个只需要设置

position:fixed;
bottom: 0px;

这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容不足以撑开时，footer显示在浏览器底部，当内容高度超过浏览器高度时，的footer部分在页面的底部，如下图所示。

• 方法一：全局增加一个负值下边距等于底部高度
  html代码：

<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

css代码：

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度,这个代码需要一个额外的元素.push等于底部的高度，来防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部，而是通过全局加了一个负边距来填充。

• 方法二：底部元素增加负值上边距

HTML代码：

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

CSS代码：

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。

• 方法三：使用calc()计算内容的高度
  html代码：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS代码:

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

给70px而不是50px是为了为了跟底部隔开20px，防止紧靠在一起。

• 方法四：使用flexbox
  html代码

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

参考：CSS粘住底部的5种方法

32.zoom和transform:scale的区别（未验证，实际运用时请验证后再使用）

在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。
其支持的值类型有：

• 百分比值：zoom:50%，表示缩小到原来的一半。
• 数值：zoom:0.5，表示缩小到原来的一半。
• normal关键字：zoom:normal等同于zoom:1.

注意，虽然Chrome/Safari浏览器支持了zoom属性，但是，其实zoom并不是标准属性

CSS3 transform下的scale就不一样了，是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为：transform: scale(<x> [<y>]). 同时有scaleX,scaleY专门的x, y方向的控制。和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！
zoom和scale的差异

1. zoom在firefox浏览器中无效
2. 控制缩放的值不一样。zoom更全面，但是不能是负数，只能等比例控制；而scale虽然只能是数值，但是能负数，可以只控制1个维度。
3. zoom的缩放是相对于左上角的；而scale默认是居中缩放,可以通过transform-origin设置变换原点；
4. zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
   5.zoom在chrome中会影响定位
   position:absolute; left:50px; zoom: 50%;
   IE中定位不会变化，但是在chrome中，left在页面中实际表现为50px * 50% = 25px；但是要注意的是其计算样式的left仍然是50px
   比较好的应用方式是：IE7/IE8使用zoom, 其他浏览器使用CSS3 transform scale值实现.
   参考：
   小tips: zoom和transform:scale的区别
   Zoom Vs. Scale in CSS3

33.引入CSS样式方式中的link和import的区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

• 差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
  link 标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
• 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页 面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）
• 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用 link标签，因为@import不是dom可以控制的。
• 差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表
• 差别六（未验证）：link方式的样式的权重 高于@import的权重.

34.position:absolute和float属性的异同

• 共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
• 不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素；重新定位基准不同；float一般会改变非块级元素的显示dispaly方式为block

前端知识杂烩（HTML[5]?+CSS篇）

标签：

原文地址：http://www.cnblogs.com/star91/p/5973506.html