小丞前端日记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> 一行，换行产生换行字符，占用一个字符的宽度
解决办法：
- 设置
float: left不足是有些容器不能设置浮动，如左右切换的焦点图 - 将所有
li写在一行 不足是代码不美观 - 将
ul内font-size: 0，不足是字符大小会继承，他的子元素的font-size需要重新设定尺寸，但是Safari还是会出现空白间隔 ul设置letter-spacing: -8px不足是也继承了ul，把里面的liletter-spacing: normal
a标签上四个伪类的执行顺序是怎么样的
link > visited > hover > active
L-V-H-Alove hate用喜欢和讨厌两个词来方便记忆
网站图片文件，如何点击下载？而非点击预览
<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>
Tailwind CSS 有什么好处？
Tailwind Css 开发更加高效，不需要编写 CSS 或 less，最大的好处是更好的组件化，之前编写 React 组件时，jsx 和 css 分离，导致样式没法和组件高度融合，使用 tailwind 可以更加紧密的结合在一起