前端常见面试题

最新推荐文章于 2022-06-07 11:54:32 发布

linxiaoduo

最新推荐文章于 2022-06-07 11:54:32 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/linxiaoduo/article/details/84984419

版权

1、如何让一个元素垂直/水平（垂直水平）都居中，请列出你能想到的几种方式？

方式1
<div class="div-demo"></div>
.div-demo{
	width: 100px;
	height: 100px;
	background: red;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

方式2
<div class="div-demo"></div>
.div-demo{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

方式3
<body class="container">
	<div class="div-demo"></div>
</body>
html,body{
	height: 100%;
}
.container{
	display: box;
	display: -webkit-box;
	display: flex;
	display: -webkit-flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.div-demo{
	width: 100px;
	height: 100px;
	background: green;
}

2、项目中有用纯CSS样式写过三角形icon吗？

<body class="container">
	<div class="div-angles"></div>
	<div class="div-angles right"></div>
	<div class="div-angles bottom"></div>
	<div class="div-angles left"></div>
</body>
<style>
		html,body{
			height: 100%;
		}
		.container{
			display: box;
			display: -webkit-box;
			display: flex;
			display: -webkit-flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		.div-angles{
			width: 0px;
			height: 0px;
			border-width: 30px;
			border-style: solid;
			border-color: transparent transparent orange transparent;
		}
		.right{
			border-color: transparent orange transparent transparent;
		}
		.bottom{
			border-color: orange transparent transparent transparent;
		}
		.left{
			border-color: transparent transparent transparent orange;
		}
		
	</style>

3、什么是外边距合并,项目中是否有遇到过?

有，外边距合并指的是，当两个垂直元素的都设置有margin外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的值中的较大那个。

4、 :before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成） ;
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法;
想让插入的内容出现在其它内容前，使用 ::before，之后则使用::after；在代码顺序上， ::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上;

5、Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	background-color: #fff;//设置成元素原本的颜色			
	background-image: none;			
	color: rgb(0, 0, 0);			
}

//方法2：由(licongwen )补充		
input:-webkit-autofill {		
	-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色		
}

linxiaoduo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见面试题

1、如何让一个元素垂直/水平（垂直水平）都居中，请列出你能想到的几种方式？方式1&lt;div class="div-demo"&gt;&lt;/div&gt;.div-demo{ width: 100px; height: 100px; background: red; margin: auto; position: absolute; left: 0; right: 0...
复制链接

扫一扫