面试 css中标签语义化

第一天

1. 什么是标签语义化
   根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2. 标签语义化有什么意义？

   为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

   用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

   有利于seo：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

   方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

   便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3. 有哪些标签？代表什么意思？
   块级元素：div ，p，h1-h6，ul，li，ol，dl，dt，dd，header，footer，address ，article。。。。
   行内元素：a，span，strong，em，i，b（定义粗体字），small，lable，br。。。
   行内块级元素：button，input，img，textarea，select，iframe
4. 有什么区别？
   行内元素：
      ① 元素和相邻的内联元素在同一行（垂直排列）;
      ②  宽度、高度、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的left 和 right 是
            可以设置的），就是里面文字或图片的大小。
   块级元素：
       ①  总是独占一行（水平排列）
       ②  宽度、高度、内边距和外边距都可控制
5. 如何转换
   display:block；转换成块级元素
   display:inline；转换成行内元素
   display:inline-block；转换成行内块元素
6. display除了这些还有哪些值
   display:none;
   display:table;
   display:list-item;
   display:table;
   display:table-cell;
   display:inherit;
   display:flex;。。。。。。
7. display:none是干嘛用的？还有其他什么方式做到吗？
   让元素隐藏的
   还可以用visibility:hidden,opacity:0;设置height，width等盒模型属性为0，
8. display和visibility两种方式有什么不同？
   visibility：不可见的元素会占据页面上的空间
   display：不可见的元素不会占据页面上的空间
9. 除了opacity，还有什么设置透明度的方法?有什么区别？
    rgba()和 opacity 都能实现透明效果，
    opacity 作用于元素，以及元素内的所有内容的透明度
    rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果）
10. opacity有哪些兼容问题 
    针对IE浏览器：filter: alpha (opacity=value); （取值范围1--100
    兼容其他浏览器：opacity：value；(取值范围0--1)

11.