9.1 css面经

画一条 0.5px 的线

1. 采用 meta viewport 的方式

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. 采用 transform: scale()的方式

  border-top: 1px solid red;
  transform: scaleY(0.5);

3.直接设置

border-top: 0.5px solid red;

link 标签和 import 标签的区别

link 属于 html 标签，而@import 是 css 提供的 页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。 link 方式样式的权重高于@import 的

transition 和 animation 的区别

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们 的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何 事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from … to，而 animation 可以一帧一帧的

Flex 布局

flex-direction：决定主轴的方向（即子 item 的排列方法） .box { flex-direction: row | row-reverse | column | column-reverse; }
flex-wrap：决定换行规则 .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向 项目的属性（元素的属性）：
order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）

那些元素会生成 BFC：
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为 visible 的元素

垂直居中的方法

margin + translate
flex

关于 JS 动画和 css3 动画的差异性

区别：
功能涵盖面，JS 比 CSS 大 实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3 可以做到自然降级 css 动画有天然事件支持
css3 有兼容性问题

说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度
行内元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效。

多行元素的文本省略号

使文字数量不同在相同的地方显示，给盒子加固定高度
overflow：hidden;
display：-webkit-box; 将盒子转换为弹性盒子
-webkit-line-clamp：2; 设置显示多少行
text-overflow：ellipsis; 文本以省略号显示   
-webkit-box-orient：vertical; 文本显示方式，默认水平

visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些 事件，如 click 事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素 隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none， 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和

position 属性 比较

相对定位 relative： 如果对一个元素进行相对定位，相对元素的位置相对于他原本的位置进行。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。
inherit: 规定应该从父元素继承 position 属性的值。

清除浮动

方法一：使用带 clear 属性的空元素 在浮动元素后使用一个块级空元素如

，并在 CSS 中赋 予.clear{clear:both;}属性即可清理浮动。亦可使用
或

---

来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还 需要触发 hasLayout （zoom:1）
方法三：使用 CSS 的:after 伪元素
.clearfix:after{
content: “020”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/* 触发 hasLayout */
zoom: 1;
}

CSS 选择器有哪些，优先级呢

!import > 行内式 > id > 类 > 标签 > * / 继承

float 的元素，display 是什么

display 为 block

两列定宽一列自适应：

1. 左边的盒子向左浮动，右边的盒子向右浮动，（左右设置宽度），切记不设置浮动的元素，在布局时应该写在最后面
2. flex布局 flex：1；

calc 属性

Calc 用户动态计算长度值，任何长度值都可以使用 calc()函数计算，需要注意的是，运 算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

如果想要改变一个 DOM 元素的字体颜色，不在它本身上进行操作？

可以更改父元素的 color

为什么 img 是 inline 还可以设置宽高

img是可替换元素。
这些元素有一个共性，就是他们的内容都不是通过在标签内添加文本，而是通过某个属性（src、data（）、label（）或js控制（））来显示内容的。
可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。
常见的置换元素：
img
input
textarea
select
object
iframe
canvas