css3面试题

# css3面试题

# 1.1 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

1. 区别
	:是伪类、::伪元素  ===》是为了做区分

2.是什么？作用
	元素before之前 、 元素after之后
	作用：清除浮动、样式布局上也有作用

1
2
3
4
5
6

# 1.2 CSS3的新特性

1.新增选择器：属性选择器、伪类选择器、伪元素选择器
2.增加了媒体查询
3.文字阴影
4.边框
5.盒子模型box-sizing
6.渐变
7.过度
8.自定义动画
9.背景的属性
10.2D和3D

1
2
3
4
5
6
7
8
9
10

# 1.3 如何关闭IOS键盘首字母自动大写

<input type="text" autocapitalize='off'>

# 1.4 怎么让Chrome支持小于12px 的文字？

Chrome默认字体大小是：16px
**每个浏览器默认字体大小可能都不一样

<style type="text/css">
div{
	font-size:10px;
}
div span{
	display: inline-block;
	-webkit-transform:scale(1.6);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12

# 1.5 rem和em区别

相对于font-size

em针对于父元素的font-size
rem针对于根(html)元素的font-size

1
2
3
4

# 1.6 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

<style>
	a,button,input,textarea{
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
</style>

1
2
3
4
5

# 1.7 webkit表单输入框placeholder的颜色值能改变吗？

<style type="text/css">
	input::-webkit-input-placeholder{
		color:red;
	}
</style>

1
2
3
4
5

# 1.8 禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片

禁止ios 长按时触发系统的菜单，禁止ios&android长按时下载图片
html,body{
	touch-callout: none;
	-webkit-touch-callout: none;
	
	user-select:none;
	-webkit-user-select:none;
}

1
2
3
4
5
6
7
8

# 1.9 禁止ios和android用户选中文字

html,body{
	user-select:none;
	-webkit-user-select:none;
}

1
2
3
4

# 1.10 自适应

淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem

# 1.11 响应式

1. 是什么？
	一个URL可以响应多端
2. 语法结构
	@media only screen and (max-width: 1000px){
		ul li:last-child{
			display: none;
		}
	}

	only : 可以排除不支持媒体查询的浏览器
	screen ： 设备类型
	max-width | max-height
	min-width | min-height 
3. 响应式图片【性能优化】
	<picture>
		<source srcset="1.jpg" media='(min-width:1000px)'>
		<source srcset="2.jpg" media='(min-width:700px)'>
		<img srcset="3.jpg">
	</picture>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 1.12 布局方案

1、什么情况下采用响应式布局
	
	数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
	
	例如：公司的官网、专题页面
	
	特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。

2、pc + 移动端应该做什么样的布局方案
	注意：访问量还可以或者比较大，类似于淘宝网。
	
	pc是一套，会加入一点点响应式。
	移动端是一套，会使用自适应的布局方式。

3、pc的设计图

	ui：1980
	笔记本电脑：1280
	ui图的宽度和电脑的宽度不对应该怎么办？
		1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸
		2. 换1980的电脑
		
4、移动端的设计图

	宽度：750
	因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

← css面试题 JS面试题→