20210208 104道常见经典CSS面试题笔记(97-104) 完结

97 实现单行/多行文本溢出的省略？

/*单行文本溢出*/
p{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/*多行文本溢出*/
p{
	position:relative;
	line-height:1.5em;
	height:3em;
	overflow:hidden;
}
p:after{
	content:'...';
	position:absolute;
	bottom:0;
	right:0;
	background-color:#fff;
}

98 常见的元素隐藏方式？

1. 使用display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
2. 使用visibility:hidden隐藏元素。元素在页面中仍占据空间，但是不会影响绑定的监听事件。
3. 使用opacity:0将元素的透明度设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4. 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5. 通过z-index负值，来使其他元素遮盖该元素，以此来实现隐藏。
6. 通过clip/clip-path元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
7. 通过transform:scale(0,0)将元素缩放为0，以此来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

99 css实现上下固定中间自适应布局？

/*利用绝对定位实现*/
body{
	padding:0;
	margin:0;
}
.header{
	position:absolute;
	top:0;
	width:100%;
	height:100px;
	background:red;
}
.container{
	position:absolute;
	top:100px;
	bottom:100px;
	width:100%;
	background:green;
}
.footer{
	position:absolute;
	bottom:0;
	height:100px;
	width:100%;
	background:red;
}

/*利用flex布局实现*/
body{
	height:100%;
	display:flex;
	padding:0;
	margin:0;
	flex-direction:column;
}
.header{
	height:100px;
	background:red;
}
.container{
	flex-grow:1;
	background:green;
}
.footer{
	height:100px;
	background:red;
}

100 css两栏布局的实现？

两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现方式

左边浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto。

.outer{
	height:100px;
}
.left{
	float:left;
	height:100px;
	width:200px;
	background:tomato;
}
.right{
	margin-left:200px;
	width:auto;
	height:100px;
	background:gold;
}

第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为200px，将右边元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。

.outer{
	display:flex;
	height:100px;
}
.left{
	flex-shrink:0;
	flex-grow:0;
	flex-basis:200px;
	background:tomato;
}
.right{
	flex:auto;
	background:gold;
}

第三种是利用绝对定位布局的方式，将父级元素设置相对定位，左边元素设置为absolute定位，并且宽度设置为200px，将右边元素的margin-left的值设置为200px。

.outer{
	position:relative;
	height:100px;
}
.left{
	position:absolute;
	width:200px;
	height:100px;
	background:tomato;
}
.right{
	margin-left:200px;
	height:100px;
	background:gold;
}

第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，其余为0.

.outer{
	position:relative;
	height:100px;
}
.left{
	width:200px;
	height:100px;
	background:tomato;
}
.right{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:200px;
	background:gold;
}

101 css三栏布局的实现？

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。

这里以左边宽度固定为100px，右边宽度固定为200px为例。

利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值

.outer{position:relative;height:100px;}
.left{
	position:absolute;
	width:100px;
	height:100px;
	background:tomato;
}
.right{
	position:absolute;
	top:0;
	right:0;
	width:200px;
	height:100px;
	background:gold;
}
.center{margin-left:100px;margin-right:200px;height:100px;baground:green;}

利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。

.outer{display:flex;height:100px;}
.left{flex:00100px;background:tomato;}
.right{flex:00200px;background:gold;}
.center{flex:auto;background:green;}

利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

.outer{height:100px;}
.left{
	float:left;
	width:100px;
	height:100px;
	background:tomato;
}
.right{
	float:right;
	width:200px;
	height:100px;
	background:gold;
}
.center{
	height:100px;
	margin-left:100px;
	margin-right:200px;
	background:green;
}

圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

.outer{
	height:100px;
	padding-left:100px;
	padding-right:200px;
}
.left{
	position:relative;
	left:-100px;
	float:left;
	margin-left:-100%;
	width:100px;
	height:100px;
	background:tomato;
}
.right{
	position:relative;
	left:200px;
	float:right;
	margin-left:-200px;
	width:200px;
	height:100px;
	background:gold;
}
.center{
	float:left;
	width:100%;
	height:100px;
	background:green;
}

双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

.outer{height:100px;}
.left{
	float:left;
	margin-left:-100%;
	width:100px;
	height:100px;
	background:tomato;
}
.right{
	float:left;
	margin-left:-200px;
	width:200px;
	height:100px;
	background:gold;
}
.wrapper{
	float:left;
	width:100%;
	height:100px;
	background:green;
}
.center{
	margin-left:100px;
	margin-right:200px;
	height:100px;
}

102 实现一个宽高自适应的正方形？

/*第一种方式通过vw来实现*/
.square{width:10%;height:10vw;background:tomato;}
/*第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square{width:20%;height:0;padding-top:20%;background:green;}
/*第三种方式是利用子元素的margin-top值来实现*/
.square{width:30%;overflow:hidden;background:yellow;}
.square::after{conteng:'';display:block;margin-top:100%;}

103 实现一个三角形？

.triangle{
	width:0;
	height:0;
	border-width:100px;
	border-style:solid;
	border-color:tomato transparent transparent transparent;
}

104 一个自适应矩形，水平垂直居中，且宽高比为2:1？

.box{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
	width:10%;
	height:0;
	padding-top:20%;
	background:tomato;
}