面试题（补充）

最新推荐文章于 2022-05-25 10:20:21 发布

c三只布朗熊

最新推荐文章于 2022-05-25 10:20:21 发布

阅读量36

点赞数

本文链接：https://blog.csdn.net/weixin_46347206/article/details/118659033

版权

1.垂直水平居中，实现方法有哪些？

答：

方法一：使用position定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实现垂直水平居中方法1</title>
	</head>
	<style>
		html,body,div{
			margin:0;
			padding:0;
		}
		body{
		height:100%;
		width:100%;
		}
		#center{
			width:200px;
			height:200px;
			background:red;
			margin:0 auto;/*实现水平居中*/
			position:relative;/*设置相对定位，移动div*/
			top:50%;/*将图片移动到中间*/
			margin-top:-100px;/*关键设置，定位移动后，只是相当于将一个元素上边界中心点居中，而元素div是有
			宽高的，应减去元素的高度的一半，让元素实现中心点居中*/
		}
	</style>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

方法二：使用position和transform

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现水平垂直居中方法2</title>
	<style>
			html,body{
				margin:0;
				padding:0;
				height:100%;
				width:100%;
			}
			#center{
			height:200px;
			width:200px;
			background:green;
			margin:0 auto;/*实现水平居中*/
			position:relative;/*设置定位，偏移量，让元素实现上下居中*/
			top:50%;
			transform: translateY(-50%);/*使用平移使图片居中，思想与方法一一致*/
			}
		</style>
	</head>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

方法三：使用弹性盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现水平垂直居中方法3</title>
	<style>
			html,body{
				margin:0;
				padding:0;
				height:100%;
				width:100%;
			}
			body{
				display:flex;/*打开弹性盒子（在父元素中使用）*/
				justify-content:center;/*控制水平居中*/
				align-items:center;/*控制垂直居中*/
			}
			#center{
			height:200px;
			width:200px;
			background:orange;
			}
		</style>
	</head>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

2.浏览器兼容性有问题？

答：

不同浏览器的标签默认的外补丁和内补丁不同
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
设置较小的高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置的高度
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况,ie6间距bug
图片默认有间距
标签最低高度设置min-height不兼容
透明度的兼容css设置

3.css 引入方法有哪些？

答：

1）内嵌式

通过<style></style>来书写css代码

只能用于当前网页，不能被其他网页共享

注：<style>标记可以放在网页的任何地方，但一般放在<head>

2）外联式

通过<link>标记来引入外部的css文件(.css)

可以被其他网页共享。

格式：<link href="css的URL" rel="stylesheet" type="text/css"/>

注：<link>标记只能放在<head>中

3）行内样式

通过style属性来书写代码

每个HTML元素，都有style,class,id,name,title属性。

4.git merge 与 git rebase的区别?

答：

merge：git 会自动根据两个分支的共同祖先即 (3.added merge.txt file)这个 commit 和两个分支的最新提交即 (6.added hello.txt file) 和 (5.added test.txt file) 进行一个三方合并，然后将合并中修改的内容生成一个新的 commit。即合并两个分支并生成一个新的提交。

rebase：在执行git rebase develop之前，HEAD在（6.added hello.txt file）处，当执行rebase操作时，git 会从两个分支的共同祖先 (3.added merge.txt file)开始提取当前分支（此时是master分支）上的修改，即（6.added hello.txt file）这个commit，再将 master 分支指向目标分支的最新提交（此时是develop分支）即（5.added test.txt file）处，然后将刚刚提取的修改应用到这个最新提交后面。如果提取的修改有多个，那git将依次应用到最新的提交后面。

5.换行显示 ssssssssssssssssssssssssssssssssssssssssssssssssssss

答；

1）word-break属性：可以在浏览器实现在任意位置换行

参数：

normal：使用浏览器默认的换行规则
break-all：允许在单词内换行
keep-all：只能在半角空格或连字符处换行

2）word-wrap属性

参数：

normal：只在允许的断字点换行（浏览器保持默认处理）
break-word：在长单词或 URL 地址内部进行换行

c三只布朗熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题（补充）

1.垂直水平居中，实现方法有哪些？答：方法一：使用position定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>实现垂直水平居中方法1</title> </head> <style> html,body,div{ margin:0; padding:0; } body{ hei
复制链接

扫一扫