懒人目录

  1. 什么是HTML
  2. 什么是CSS
  3. 行内元素和块级元素的区别
  4. 对HTML语义化的理解
  5. rgba()和opacity
  6. CSS选择器的权重
  7. 优雅降级和渐进增强
  8. BFC
  9. 清除浮动的方法
  10. 精灵图的优缺点
  11. H5的新特性
  12. C3的新特性
  13. cookie，localStorage和sessionStorage
  14. src和href的区别

1

什么是HTML

  • HTML并不是真正的的程序语言，他是一种 标 记 语 言 ，用来结构化和含义化你想要放在web 网站上的那些内容。它由一系列的元素(elements)所组成，这些元素可以用来封装你的内容中担任不同工作的各部分和各个角色。

2

什么是CSS

  • CSS 也不是真正的编程语言。它是样式表语言，也就是说，它允许你有选择性的为 HTML 文档的元素添加样式。

3

行内元素和块级元素的区别是什么

  • 块级元素(block)特性：
  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  • 内联元素(inline)特性：
  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的)，就是里面文字或图片的大小。

4

对HTML语义化的理解

  • HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
  • 即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO
  • 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解

5

rgba()和opacity设置透明度的区别是什么

  • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色，设置rgba透明的元素的子元素不会继承透明效果。

6

CSS选择器的权重

  • 页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者，特殊性表述为 4个部分：0,0,0,0
  • 一个选择器的特殊性如下:
  • 内联样式特殊性值为：1,0,0,0
  • 对于选择器是#id的属性值,特殊性值为：0,1,0,0
  • 对于属性选择器，class或伪类，特殊性值为：0,0,1,0
  • 对于标签选择器或伪元素，特殊性值为：0,0,0,1
  • 通配符‘*’特殊性值为：0,0,0,0

7

对CSS中优雅降级和渐进增强的理解

  • 优雅降级和渐进增强印象中是随着css3 流出来的一个概念。
  • 由于低级浏览器不支持css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 ，低级浏览器只保证最基本的功能。
  • 乍一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。
  • “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
  • “渐进增强”观点则认为应关注于内容本身。

8

对BFC的理解

  • 定义：
  • BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
  • 布局规则：
  • 内部的Box 会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发生重叠。
  • 每个元素的 margin box 的左边，与包含块border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC 的区域不会与 float box 重叠。
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 BFC 的高度时，浮动元素也参与计算。
  • 哪些元素会生成 BFC：
  • 根元素
  • float 属性不为 none
  • position为 absolute 或 fixed
  • display为inline-block， table-cell， table-caption， flex， inline-flex
  • overflow 不为 visible

9

清除浮动的方法

  • 父级div定义 height
  • 原理：父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。简单、代码少、容易掌握 ，但只适合高度固定的布局
  • 结尾处加空 div标签 clear：both
  • 原理：在浮动元素的后面添加一个空div兄弟元素，利用 css 提高的clear：both清除浮动，让父级div能自动获取到高度，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好
  • 3. 父级div定义 伪类：after 和 zoom


/清除浮动代码/
 
   
  
.clearfix：after{
 
   
  
    content：""；
 
   
  
    display：block；
 
   
  
    visibility：hidden；
 
   
  
    height：0；
 
   
  
    line-height：0；
 
   
  
    clear：both；
 
   
  
}
 
   
  
.clearfix{zoom：1}



  • 原理：IE8以上和非 IE浏览器才支持：after，原理和方法2有点类似，zoom(IE专有属性)，可解决ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少CSS 代码。
  • 父级div定义 overflow：hidden
  • 超出盒子部分会被隐藏，不推荐使用.
  • 5. 双伪元素法：
/清除浮动代码/
 
   
  
.clearfix：before，.clearfix：after {
 
   
  
    content：""；
 
   
  
    display：block；
 
   
  
    clear：both；
 
   
  
}
 
   
  
.clearfix {
 
   
  
    zoom：1；
 
   
  
}


10

精灵图的优缺点

  • 精灵图是一种网页图片应用处理方式。就是把网页中很多小背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景图显示及定位，达到显示某一部分背景图的效果。
  • 精灵图的优点：
  • 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头部信息，从而减少了字节数。
  • 减少了网页的http请求次数，从而加快了网页加载速度，提高用户体验。
  • 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
  • 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
  • 精灵图的缺点：
  • 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
  • 在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
  • 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能(最好)往下加图片，这样图片的字节就增加了，还要改动css。
  • 精灵图不能随意改变大小和颜色。精灵图改变大小会失真模糊，降低用户体验，css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题。现在一般都是用web字体(图标字体)来代替精灵图。

11

H5的新特性

  • 拖拽释放(Drag and drop) API
  • 语义化更好的内容标签(header,nav,footer,aside,article,section)
  • 音频、视频API(audio,video)
  • 画布(Canvas) API
  • 地理(Geolocation) API
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术webworker, websocket,Geolocation

12

C3的新特性

  • CSS3实现圆角(border-radius)，阴影(box-shadow)，
  • 对文字加特效(text-shadow、)，线性渐变(gradient)，旋转(transform)
  • transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
  • 增加了更多的CSS选择器  多背景rgba
  • 在CSS3中唯一引入的伪元素是 ::selection.
  • 媒体查询，多栏布局
  • border-image

13

cookie，localStorage和sessionStorage的区别

  • sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
  • Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
  • 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

14

src和href的区别

  • src(source)指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档中，如js脚本，img图片和iframe等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。类似于将资源嵌入到当前标签内。
  • href(hypertext reference/超文本引用)指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，浏览器会并行下载资源且不会停止对当前文档的处理。

以上由个人工作经验得出,不保证完全正确,如有错误,还请大神予以指正。