CSS 面试题

盒模型的理解

标准盒模型

标准盒模型的 width 只包含了 content，border、padding 会撑大 width 的大小

IE 盒模型

IE 盒模型的 width 和 heigth 包含 border、padding、content

修改盒模型，采用 box-sizing

• content-box 为标准盒模型
• border-box 为 IE 盒模型

块级、行内、行内块元素有哪些，它们的特点是什么？

块级元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素:<a>、<strong>、<b>、<em>、<i>、<span>

行内块元素:<img />、<input />、<td>

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

li 和 li 之间有看不见的空白间隔的原因和如何解决

浏览器会把 inline 内联元素的空白符(空格 换行 tab)渲染成一个空格，就是编译器里面的换行啥的，一般一个 <li> 一行，换行产生换行字符，占用一个字符的宽度

解决办法：

1. 设置 float: left 不足是有些容器不能设置浮动，如左右切换的焦点图
2. 将所有 li 写在一行 不足是代码不美观
3. 将 ul 内 font-size: 0 ，不足是字符大小会继承，他的子元素的 font-size 需要重新设定尺寸，但是 Safari 还是会出现空白间隔
4. ul 设置 letter-spacing: -8px 不足是也继承了 ul，把里面的 li letter-spacing: normal

a标签上四个伪类的执行顺序是怎么样的

link > visited > hover > active

• L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

网站图片文件，如何点击下载？而非点击预览

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

Tailwind CSS 有什么好处？

Tailwind Css 开发更加高效，不需要编写 CSS 或 less，最大的好处是更好的组件化，之前编写 React 组件时，jsx 和 css 分离，导致样式没法和组件高度融合，使用 tailwind 可以更加紧密的结合在一起