CSS&HTML专题
一、标签语义化（问到底会怎么问）
1、什么是标签语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
- 在没有css的情况下，页面也能呈现出很好地内容结构、代码结构
- 标签可以有更丰富的含义，方便开发与维护
- 有利于SEO，方便搜索引擎识别页面结构，（H5O工具）
- 方便其他设备解析（如移动设备、盲人阅读器等）
- 有利于合作，遵守W3C标准
常用标签
-
标题与段落
<h></h>系列 <p></p> -
加粗: <strong></strong> <b></b> 斜体: <em></em> <i></i> 下标 : <sub></sub> 上标 : <sup></sup> 删除线 : <del></del> 下划线 : <ins></ins> <u></u> 换行 : <br> 水平线 : <hr> -
图片标签： <img src="" alt=""> 链接标签： <a href=""></a> 列表标签： <ul> <li></li> </ul> <ol> <li></li> </ol> 表格标签： <table> <tr> <td></td> <td></td> </tr> </table> 表单标签： <form></form> 块与内联： <div></div> <span></span>
2、strong和b 以及 em和i的区别
b标签和i标签都是H5的新标签，它们与strong和em在样式上是没有差别的。
以strong和b标签为例：
-
b标签仅仅只是给文字添加了加粗样式，属于UI层面的处理，除此之外没有任何意义。 -
strong标签则是侧重于标签语义化，它是在告诉浏览器这是一段重点强调的内容。只不过它的默认样式恰好也是加粗。
此外，针对SEO（搜索引擎优化），strong标签与b标签相比更被搜索引擎重视，内容更容易被抓取到。同理，em标签也是语义化标签，而i标签只是仅仅加了斜体样式，并且em标签对SEO来说也更加友好。
3、HTML5新标签
4、block/inline/inline-block的区别
（1）display : block 块
eg: div、p、ul、li、h1 ...
- 独占一行
- 支持所有样式
- 不写宽的时候，跟父元素的宽相同
- 所占区域是一个矩形
（2）display: inline 行内
eg : span 、a、em、strong、img ...
-
挨在一起的
-
有些样式不支持，例如：width、height、margin、padding
-
不写宽的时候，宽度由内容决定
-
所占的区域不一定是矩形
-
内联标签之间会有空隙，原因：换行产生的 。 如何解决？
<style> /*在内联的父级元素上使font-size:0 然后再在它自己的样式上加回来*/ body{ font-size: 0; } #content1,#content2{ width:100px; height:100px; background:red; font-size:16px;} </style> <body> <span id="content1">内联1内联1内联1内联1内联1</span> <span id="content2">内联2</span> </body>
注：布局一般用块标签，修饰文本一般用内联标签
（3）display: inline-block 行内块级元素
input、select ...
- 挨在一起，但是支持宽高
补充：
- 块能够嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
- 块嵌套块
<div>
<div></div>
</div>
<!--注：特殊：块级标签p不能嵌套div 错误的写法：-->
<p>
<div></div>
</p>
- 内联是不能嵌套块
<!--这样写是错误的-->
<span>
<div></div>
</span>
<!--但又一种特殊情况，就是内联a标签可以嵌套div：-->
<a href="#">
<div></div>
</a>
如何转换
/*转换为行内标签*/
display: inline
/*转换为块级标签*/
display: block
/*转换为行内块级标签*/
display: inline-block
5、display有哪些值
block, inline, inline-block, none, flex, inherit ...
(1)display: inherit 规定应该从父级元素继承display的值
(2)display: none 设置元素不可见
-
让元素隐藏，你可以怎么做？
-
width:0 ; height: 0—— 隐藏不了文字 -
font-size: 0//color: transparent—— 隐藏文字 -
定位移出屏幕外：
position: absolute left : -9999999px -
z-index:-99999 -
display: none—— 彻底隐藏，不占空间的隐藏。确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none，任何对该元素直接进行用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。 -
opacity：0—— 元素设置为透明，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。 -
visibility: hidden—— 占空间的隐藏。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个子孙元素的visibility设置为visible即可。 -
opacity的兼容处理——opacity IE8以下版本不识别
opacity{ /*在火狐和谷歌下：*/ opacity:0.5; /*filter过滤器——兼容IE678*/ filter:alpha(opacity=50); }-
opacity: 0(透明) ~ 1(不透明） 0.5(半透明) 注：占空间、所有的子内容也会透明 -
rgba（css3引入的， RGB我们都很熟悉，A即指alpha通道， 定义透明、不透明半透明这些）: 0 ~ 1如：
background-color:rgba(0,0,0,.5)注：可以让指定的样式透明，而不影响其他样式
总结来说，opacity只能设定==整个元素的透明值==，而alpha通道可以特定对==元素的某个属性设定透明值==，比如元素的背景、边框、文字等。
-
-
filter（css3 滤镜）还能做哪些事情： 过滤图片颜色，做成灰度啊、反转色啊、阴影滤镜啊啥的
img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); 高斯模糊 filter: brightness(200%); 使图片变亮 filter: contrast(200%); 调整图像的对比度 filter: grayscale(50%); 图像转换为灰度图像 }
-
(3) display: flex
- 项目中你什么时候用到了flex？
- 除了这种方式，能居中的方式还有哪些？
- 响应式布局还可以怎么做？
6、display:inline-block会有什么问题，解决方法？
问题
两个display：inline-block元素放到一起会产生一段空白。
产生空白的原因
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白）
原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
解决办法
-
将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行
<div class="container"> <div class="left">左</div><div class="right">右</div> </div> -
父元素中设置font-size: 0，在子元素上重置正确的font-size
.container{ width:800px; height:200px; font-size: 0; } -
为子元素设置float:left
.left{ float: left; font-size: 14px; background: red; display: inline-block; width: 100px; height: 100px; } //right是同理
