洛清寒前端进阶

# CSS面试题

# 1、link 与 @import 的区别

  • link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  • 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
  • @import需要 IE5 以上才能使用
  • link可以使用 js 动态引入，@import不行

# 2、写出5种css隐藏元素的办法

1.opacity: 0;
2.visibility: hidden;
3.display: none;
4.position: absolute;
  top: -9999px;
  left: -9999px;
5.clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
1
2
3
4
5
6
7

# 3、css画三角形和扇形

/*三角形*/
div {
   width: 0;
   height: 0;
   border: 40px solid;
   border-color: transparent transparent red transparent;
   /*上边框是透明，右边框是透明，下边框是红色，左边框是透明。*/
}
/*扇形*/
div{
  width:0;
  height:0;
  border:50px solid;
  border-radius: 50px;   /*圆角*/
  border-color: #f00 transparent transparent;   /*扇形*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考CSS画三角形

# 关于border-color

border-color:red green blue pink;

  • 上边框是红色
  • 右边框是绿色
  • 下边框是蓝色
  • 左边框是粉色

# 4、加载图片的时候哪些情况会触发HTTP请求？

  • 对于img标签，src属性不为空时，设置隐藏或者不可见，都会产生请求。
<img src="haorooms.jpg" style="display: none" />
<img src="haorooms.jpg" style="visibility:hidden" />
1
2
  • 重复图片和重复背景只会产生一次请求
  • 图片背景仅在应用的元素在页面中显示时，才会产生请求
  • new Image().src 会产生请求
  • el.innerHTML='<img src="http:/xxxx.com/a.jpg/" />' 会产生请求

# 5、CSS实现网站变灰

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
1
2
3
4
5
6
7
8
9
10

# 6、CSS position的属性以及sticky

  • position: static，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。static是position的默认值。
  • position: relative，生成相对定位的元素，相对于其正常位置进行定位，定位的元素仍然占据文档的空间。
  • position: absolute，生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位，会脱离正常文档流。
  • position: fixed，fixed相对于window固定，滚动浏览器窗口并不会使其移动，会脱离正常文档流。

# 7、tansform会脱离文档流吗

transform布局不会脱离文档流，也不改变文档流的大小和位置。

  • width
  • offsetWidth
  • clientWidth
  • offsetLeft

设置元素的 transform 属性后，上述等属性均不会发生改变。

# 8、rem和em的区别

rem是全部的长度都相对于根元素html。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

子元素字体大小的em是相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size。

# 9、transform对普通元素的N多渲染影响

  • 提升元素的垂直地位。如果给元素加transform，则表现和position:relative一样。
  • 使 position:fixed 失效。如果给已经设置了position:fixed 的元素的父元素加transform，则该元素的表现和position:absolute一样，不会再固定。
  • 限制absolute元素的100%宽度大小。计算宽度的时候会以transform元素为基准。

以上加transform都是值不为none的。

# 10、css实现一行文字居中，多行文字左对齐

<style type="text/css">
	/*当文字为一行时，则content的宽度小于box的宽度，content居中显示在盒子内，文字也就居中了 ;当大于一行时，content的宽度和box的宽度是一致的 ,文字就居左对齐了*/
	.box{
		text-align: center;width: 100px;
	}
	.content{
		display: inline-block; /*display: inline-block使content的宽度根据文字的宽度伸缩 */
		text-align: left;
	}
</style>

<div class="box">
	<div class="content">哈哈哈哈</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 11、哪些元素有默认的padding和margin

有默认margin（top，bottom且相同）值，没有默认padding值：h1~h6、dl、p

有默认margin（top，bottom且相同）值，有默认padding-left值：ol、ul

# 12、可以继承于父元素的css属性有哪些

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性：

1、元素可见性：visibility、opacity

2、光标属性：cursor

内联元素可以继承的属性:

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性:

1、text-indent、text-align

Last Updated: 5/2/2020, 2:51:33 PM

← JS面试题 →