跳到主要内容

题目 21-题目 25

21.相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？​

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 white-space 的处理方式（默认是 normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，在字体不为 0 的情况下，空白符占据一定宽度，所以 inline-block 的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素 font-size:16px 时，间距为 8px。

移除空格​

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉 HTML 中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

测试代码
<div class="space"><a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a></div>

使用 margin 负值​

测试代码
.space a {
  display: inline-block;
  margin-right: -4px;
}

使用 letter-spacing​

测试代码
.space {
  letter-spacing: -4px;
}

在父级元素中用 font-size:0;​

测试代码
.space {
  font-size: 0;
}

使用 word-spacing​

测试代码
.space {
  word-spacing: -4px;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing 的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing 即使负值很大，也不会发生重叠。

22.display 都有哪些取值​

  • none 元素不会显示
  • block 此元素将显示为块级元素，此元素前后会带有换行符。
  • inline 默认此元素会被显示为内联元素，元素前后没有换行符。
  • inline-block 行内块元素。（CSS2.1 新增的值）[IE6/7 不支持]
  • inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
  • table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
  • inherit 规定应该从父元素继承 display 属性的值。
  • grid 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
  • flex 弹性布局，用来为盒状模型提供最大的灵活性。

23.如何哦才能够 html 元素继承 box-sizing​

在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height 值，这个时候我们就可以为该元素设置 box-sizing:border-box;。

测试代码
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;

24.如何使用 css 来实现禁止移动端页面的左右划动手势​

CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

测试代码
html {
  touch-action: none;
  touch-action: pan-y;
}

25.IconFont 的原理是什么​

测试代码
@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}
  • font-family：为载入的字体取名字。
  • src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
  • font-weight：定义加粗样式。
  • font-style：定义字体样式。

26.Atom CSS​

Atom CSS：原子 CSS，意思是一个类只干一件事。

不同于大家常用的 BEM 这类规则，原子 css 就是拆分，所有 CSS 类都有一个唯一的 CSS 规则。例如如下

测试代码
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

原子 CSS 的优缺点

  • 优点：
    • 代码复用性高，不会出现重复的 CSS 代码。
    • 可以更好的控制样式，不会出现样式冲突。
  • 缺点：
    • 增加了记忆成本。将 css 拆分为原子之后，你势必要记住一些 class 才能书写，哪怕 tailwindcss 提供了完善的工具链，你写 background，也要记住开头是 bg。
    • 增加了 html 结构的复杂性。当整个 dom 都是这样 class 名，势必会带来调试的麻烦，有的时候很难定位具体 css 问题
    • 你仍需要起 class 名。对于大部分属性而言，你可以只用到 center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如 left，top，这时候你还需要起一个 class 名

27.fix 和 sticky 的区别​

  • fixed

  • 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同 absolute 定位。

  • 当父元素使用了 transform 的时候，会以父元素定位。

  • sticky

  • 粘性定位，可以简单理解为 relative 和 fixed 布局的混合。

  • 当粘性约束矩形在可视范围内为 relative，反之，则为 fixed 粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的它的定位效果完全受限于父级元素们。

  • 如果父元素的 overflow 属性设置了 scroll，auto,overlay 值，那么，粘性定位将会失效同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

28.元素竖向的百分比设定是相对于容器的高度吗？​

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

29.为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？​

问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  • 父级 div 定义 height
  • 最后一个浮动元素后加空 div 标签 并添加样式 clear:both。
  • 包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
  • 父级 div 定义 zoom

  • link 属于 HTML 标签，而@import 是 css 提供的；

  • 页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面被加载完再加载；

  • @import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题；

  • link 方式的样式的权重高于@import 的权重。

Loading Comments...