css常见面试点

GY.NO.1

已于 2023-09-01 21:37:08 修改

阅读量68

点赞数 1

文章标签： css 前端

于 2023-09-01 16:00:52 首次发布

本文链接：https://blog.csdn.net/yuexingzou666/article/details/132622477

版权

高度塌陷和BFC

BFC:块格式化上下文即一块独立的渲染区域

创建BFC元素后：

它的自动高度需要计算浮动元素
它的边框盒不会与浮动元素重叠
不会和它的子元素进行外边距合并

哪些元素会生成BFC：

1.根元素html标签

2.display属性为flex、inline-flex、inline-block、table-cell、table-caption

3.position值为absolute或fixed

4.overflow属性不为visible

5.float属性不为none

解决父元素高度塌陷的问题

1.触发BFC

2.万能清楚浮动法：给要清除浮动的元素添加一个伪元素

伪元素 ::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    clear: both;
}

定位实现元素居中

1.盒子必须得有宽高

{
    width:200px;
    height:200px;
    position: absolute;
    top: 50%;  (父元素高度一半)
    left: 50%; (父元素宽度一半)
    margin-top: -100px;  (自身高度一半)
    margin-left: -100px; (自身宽度一半)
}

2.盒子必须得有宽高

{
     position: absoulte;
     margin: auto;
     right: 0;
     left: 0;
     top: 0;
     bottom:0;
     width:100px;
     height:100px;
}

3.未知宽高

{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}

flex弹性布局

{
    display:flex;
    flex-direction(主轴排列方向): row | row-reverse | column | column-reverse;
    justify-content(主轴对齐方式): flex-start | flex-end | center |space-between | space- around | space-evenly
    align-items(侧轴对齐方式): flex-start | flex-end | center | baseline | stretch
    
    flex-wrap(设置换行): nowrap | wrap | wrap-reverse;
    align-content(多行对齐,换行前提下有效): flex-start | flex-end | center | space-between | space-around | stretch;
}

简单案例：实现骰子的6种布局

<html>
	<head>
		<meta charset="utf-8" />
		<title>flex布局画出骰子的6个面</title>
	</head>
	<body>
		<div class="warp">
			<div class="point point1">
				<div class="item item-1"></div>
			</div>
			<div class="point point2">
				<div class="item item-2"></div>
				<div class="item item-2"></div>
			</div>
			<div class="point point3">
				<div class="item item-3"></div>
				<div class="item item-3"></div>
				<div class="item item-3"></div>
			</div>
			<div class="point point4">
				<div class="line">
					<div class="item item-4"></div>
					<div class="item item-4"></div>
				</div >
				<div class="line">
					<div class="item item-4"></div>
					<div class="item item-4"></div>
				</div>
			</div>
			<div class="point point5">
				<div class="line">
					<div class="item item-5"></div>
					<div class="item item-5"></div>
				</div>
				<div class="line">
					<div class="item item-5"></div>
				</div>
				<div class="line">
					<div class="item item-5"></div>
					<div class="item item-5"></div>
				</div>
			</div>
			<div class="point point6">
				<div class="line">
					<div class="item item-6"></div>
					<div class="item item-6"></div>
					<div class="item item-6"></div>
				</div>
				<div class="line">
					<div class="item item-6"></div>
					<div class="item item-6"></div>
					<div class="item item-6"></div>
				</div>
			</div>
		</div>
	</body>
</html>
<style>
	.warp{
		background-color: black;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		
	}
	.warp .point{
		width: 100px;
		height: 100px;
		background: #fff;
		border-radius: 20px;
		margin: 100px;
		padding: 15px;
		display: flex;

	}

	.warp .point .item{
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
	
	.warp .point1{
		justify-content: center;
		align-items: center;
	}
	.warp .point1 .item-1{
		width: 40px;
		height: 40px;
		background-color: red;
	}
	.warp .point2{
		flex-direction: column;
		justify-content: space-between;
		align-items: center;	
		flex-wrap: wrap;
	}
	.warp .point2 .item-2{
		background-color: blue;
	}
	.warp .point3{
		flex-direction: column;
		justify-content: space-between;
	}
	.warp .point3 .item-3{
		background-color: blue;
	}
	.warp .point3 .item-3:nth-child(2){
		align-self: center;
	}
	.warp .point3 .item-3:nth-child(3){
		align-self: flex-end;
	}
	.warp .point4{
       justify-content: space-between;
	}
	.warp .point4 .line{
	    display: flex;
		flex-direction: column; 
		justify-content: space-between;
	}
	.warp .point4 .item-4{
		background-color: #FF0000;
	}
	.warp .point5{
		justify-content: space-between;
	}
	.warp .point5 .line{
		display: flex;
		flex-direction: column; 
		justify-content: space-between;
	}
	.warp .point5 .line:nth-child(2){
		justify-content: center;
	}
	.warp .point5 .item-5{
		background-color: #0000FF;
	}
	.warp .point6{
		justify-content: space-between;
	}
	.warp .point6 .line{
		display: flex;
		flex-direction: column; 
		justify-content: space-between;
	}
	.warp .point6 .item-6{
		background-color: #0000FF;
	}
	
</style>

移动端响应式实现

1.媒体查询

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

页面头部必须有 meta 声明的viewport。
<meta name="viewport" content="width=device-width,initial-scale=1.0 ,maximum-scale=1.0,user-scalable=no"/>
<body>
 <div class="box"></div>
</body>

<style>
 .box {
   width: 500px;
   height: 500px;
   background-color: aqua;
  }
 @media screen and (max-width: 1280px) {
   .box {
     width: 400px;
     height: 400px;
    }
  }
 @media screen and (max-width: 980px) {
   .box {
     width: 300px;
     height: 300px;
    }
  }
 @media screen and (max-width: 765px) {
   .box {
     width: 200px;
     height: 200px;
    }
  }
</style>

2.vw/vh

是一种视窗单位，它相对的不是父节点或者页面的根节点，而是由视窗(Viewport)大小来决定。

vw：视窗宽度的百分比（1vw = 1%视口宽度 100vw = 100%视口宽度 = 视口宽度）

vh：视窗高度的百分比（1vh 代表视窗的宽度为 1%）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vw和vh实现响应式布局</title>
	</head>
	<body>
	    <div class="demo"><h1>宽度100%，字体5%</h1></div>
	    <div class="demo2"><h1>宽度80％, 字体5％</h1></div>
	    <div class="demo3"><h1>宽度50％, 高度50％, 字体1％</h1></div>
	</body>
</html>
<style>
	.demo {
		width: 100vw;
		font-size: 5vw;
		margin: 0 auto;
		background-color: #1781ba;
		color: #FFF;
	}
	.demo2 {
		width: 90vw;
		font-size: 5vw;
		margin: 0 auto;
		background-color: #07b06f;
	}
	.demo3 {
		width: 50vw;
		height: 50vh;
		font-size: 1vw;
		margin: 0 auto;
		background-color: #cb2b70;
		color: #FFF;
	}
</style>

3.rem

rem的大小是根据html根元素的font-size的值动态计算的。当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。一般设置 html{font-size: 62.5%} 即 1rem=10px

<html>
	<head>
		<meta charset="utf-8">
		<title>rem实现响应式布局</title>
	</head>
	<body>
	    <div class="container"><h1>宽度500，字体25px</h1></div>
	    
	</body>
</html>
<style>
	/* 将根元素字体设置为10px */
	html {
	  font-size: 62.5%;
	}
	
	/* 在屏幕宽度小于768px时以14px为根元素字体大小 */
	@media screen and (max-width: 767px) {
	  html {
	    font-size: 14px;
	  }
	}
	
	/* 移动端在屏幕宽度小于375px时以12px为根元素字体大小 */
	@media screen and (max-width: 374px) {
	  html {
	    font-size: 12px;
	  }
	}
	
	/* 移动端在屏幕宽度大于375px并且小于750px时以24px为根元素字体大小 */
	@media screen and (min-width: 375px) and (max-width: 749px) {
	  html {
	    font-size: 24px;
	  }
	}
	
	/* 页面布局使用rem进行设置 */
	.container {
	  width: 80%;
	  height: 30rem;
	  margin: 5rem auto;
	  border: 1px solid #ccc;
	  font-size: 1.6rem;
	}
</style>

4.百分比

比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

子元素的height、width 属性的百分比依托于父元素的宽高。
子元素的 top 和 bottom 相对于直接非 static 定位（默认定位）的父元素的高度，
子元素的 left 和 right 则相对于直接非 static 定位（默认定位的）父元素的宽度。
子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父元素的 width，而与父元素的 height 无关。
border-radius 为百分比，则是相对于自身的宽度

缺点：计算困难，各个属性中如果使用百分比，相对父元素的属性并不是唯一的，不建议使用。

5.flex 弹性布局

如何实现0.5px

1. 缩放

  {
       width: 100px;
       height: 1px;
       transform: scaleY(0.5);
  }

2.box-shadow实现

{ 
     border: none; 
     box-shadow: 0 0 0 0.5px red; 
}

3.渐变


div { 
    border: none; 
    position: relative; 
}

div:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    height: 1px; 
    background-image: linear-gradient(0deg, #f00 50%, transparent 50%); 
}