weixin_30666753
weixin_30666753

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

1. CSS 优先级算法如何计算？
2.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
3.用纯CSS创建一个三角形的原理是什么？
4. 如何解决inline-block元素的空白间距（i与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
5.CSS强制文本在一行内显示若有多余字符则使用省略号表示
6.css中伪类属性修改a标签的样式：
7. HTML dl 标签
8. 置换元素与不可置换元素
9.HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
10. 详说 Cookie, LocalStorage 与 SessionStorage
11.CSS3新增伪类选择器、伪元素
12.“渐进增强”与“优雅降级”的理解
13.css居中问题
14.用margin还是用padding
15.display属性的常用的三个取值block，inline和inlinke-block细节对比
16.HTML5和CSS3新特性
17.CSS实现等高布局
18.使用css隐藏元素常用的四种方法
19.Quirks模式（怪异模式）是什么？它和Standards模式（标准模式）有什么区别？
20.HTML5中的微格式（微数据）
21.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
22.Sass、LESS是什么？大家为什么要使用他们？
23.一个简单的CSS Reset样式。
24.几个通用CSS样式
25.图片背景位置background-position
26.CSS3伸缩盒模型简介
27.CSS颜色表示体系
28.li多列显示
29.CSS背景属性
30.CSS实现不定大小的图片水平垂直居中（有时间会一一验证写出博客N+1）
31.CSS固定footer在页面底部的几种方法
32.zoom和transform:scale的区别（未验证，实际运用时请验证后再使用）
33.引入CSS样式方式中的link和import的区别
34.position:absolute和float属性的异同
1. CSS 优先级算法如何计算？
  • 优先级就近原则，同权重情况下样式定义最近者为准;
  • 载入样式以最后载入的定位为准;
    优先级为:!important > id > class > tag
    important 比 内联优先级高
2.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
  • 给div设置一个宽度，然后添加margin:0 auto属性
 
   
     
    
  1. .div{
    2.  
    
  2.  width:200px;
    3.  
    
  3.  margin:0 auto;
    4.  
    
  4.  }
    5.  
   
 
   
     
    
  • 居中一个浮动元素 
     确定容器的宽高 宽500 高 300 的层 
     设置层的外边距为负的宽和高的一半
    •  
   
 
   
 
   
     
    
  1.  .div {
    2.  
    
  2.  float: left;
    3.  
    
  3.  width:500px ; height:300px;//高度可以不设
    4.  
    
  4.  margin: -150px 0 0 -250px;
    5.  
    
  5.  position:relative; //相对定位
    6.  
    
  6.  background-color:red; //方便看效果
    7.  
    
  7.  left:50%;
    8.  
    
  8.  top:50%;
    9.  
    
  9.  }
    10.  
   
 
   
     
    
  • 让绝对定位的div居中
    •  
   
 
   
 
   
     
    
  1.  .div {
    2.  
    
  2.  position: absolute;
    3.  
    
  3.  width: 1200px;
    4.  
    
  4.  background-color: red;
    5.  
    
  5.  margin: 0 auto;
    6.  
    
  6.  top: 0;
    7.  
    
  7.  left: 0;
    8.  
    
  8.  bottom: 0;
    9.  
    
  9.  right: 0;
    10.  
    
  10.  }
    11.  
   
 
   
3.用纯CSS创建一个三角形的原理是什么？
 
   
把上、左、右三条边隐藏掉（颜色设为 transparent）
 
   
 
   
     
    
  1. #demo {
    2.  
    
  2.  width: 0;
    3.  
    
  3.  height: 0;
    4.  
    
  4.  border-width: 20px;
    5.  
    
  5.  border-style: solid;
    6.  
    
  6.  border-color: transparent transparent red transparent;
    7.  
    
  7. }
    8.  
   
 
   
具体原理参考： 
https://www.zhihu.com/question/35180018 
The Shapes of CSS
 
   
4. 如何解决inline-block元素的空白间距（i与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
 
   
） 
 这个原因是因为li元素的换行引起的，你可以把所有的li写成一行： 
  • 1
  • 1
  • 1
    •  ，一定不要换行。
     
   
    或者用注释符号链接：
     
   
     
   
       
    
    2. 1
    3. 1
    4. 1
      5.  
   
     
   
    或者用 html 5 不闭合的写法：
     
   
     
   
       
    
    2. 1
      3.  
    
    4. 1
      5.  
    
    6. 1
      7.  
   
     
   
    还有个解决方案就是设置 父级元素的字体大小 font-size: 0px; 
     更具体参考： 
    如何解决inline-block空白间距 
    去除inline-block元素间间距的N种方法
     
   
    5.CSS强制文本在一行内显示若有多余字符则使用省略号表示
     
   
     
   
       
    
      2.  
   
     
   
    同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果：
     
   
    6.css中伪类属性修改a标签的样式：
     
   
    在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
     
   
     
   
       
    
    1. a:link {color: #FF0000} /* 未访问的链接 */
      2.  
    
    2. a:visited {color: #00FF00} /* 已访问的链接 */
      3.  
    
    3. a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
      4.  
    
    4. a:active {color: #0000FF} /* 选定的链接 */
      5.  
   
     
   
    提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 
    提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 
    提示：伪类名称对大小写不敏感。
     
   
     
   
    7. HTML dl 标签
     
   
     
   
       
    
      2.  
    
    2.  
      计算机
      3.  
    
    3.  
      用来计算的仪器 ... ...
      4.  
    
    4.  
      显示器
      5.  
    
    5.  
      以视觉方式显示信息的装置 ... ...
      6.  
    
      7.  
   
     
   
     
    
    注意用法：
     标签定义了定义列表（definition list）。
     标签用于结合 
     （定义列表中的项目）和 
     （描述列表中的项目）。
     
   
     
   
     
   
    8. 置换元素与不可置换元素
     
   
    a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 
     例如：浏览器会根据标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的、、