学一下css
主要内容
1.设置子元素绝对定位的同时让父元素的overflow:hidden生效
如果一个父元素想使用overflow:hidden去隐藏一个进行了绝对定位设置的子元素超过父元素造成的溢出，那么父元素是必须要设置一个相对定位或者绝对定位的，不然裁剪是不会生效的，代码如下，虽然我们平时使用的都是简单的子绝父相，父元素不需要去裁剪子元素造成的溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
color: gray;
}
.parent {
width: 100%;
height: 100px;
background-color: black;
position: relative;
overflow: hidden;
margin-bottom: 100px;
}
.child {
position: absolute;
width: 90%;
height: 200px;
font-size: 2vw;
background-image: linear-gradient(#e66465, #9198e5);
}
.parent1 {
width: 100%;
height: 100px;
background-color: black;
overflow: hidden;
}
.child1 {
position: absolute;
width: 90%;
height: 200px;
font-size: 2vw;
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
<body>
<h3>需求: 设置绝对定位的同时让overflow:hidden生效</h3>
<h2>解决方法: 设置父盒子position:relative</h2>
<div class="parent">
<div class="child">父盒子设置相对定位</div>
</div>
<div class="parent1">
<div class="child1">父盒子未设置相对定位</div>
</div>
</body>
</html>
2.关于绝对定位的一个小知识点
那就是当容器设置position:absolute时，如果不给他设置top,left,right,bottom时，容器的位置是会保留在其在正常文档流中的位置，这个叫做所谓的位置跟随性，利用这个可以做很多有意思的事情。所以稍微将上面的代码改一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
color: gray;
}
.parent {
width: 100%;
height: 100px;
background-color: black;
position: relative;
overflow: hidden;
margin-bottom: 100px;
}
.child {
position: absolute;
width: 90%;
height: 200px;
font-size: 2vw;
background-image: linear-gradient(#e66465, #9198e5);
}
.parent1 {
/* 这里放一个绝对定位，但是不加top,left,right,bottom */
/* 容器的位置是会保留在其在正常文档流中的位置,但是因为是absolute定位，所以文档流
还是会脱离的，只是位置会保留 */
position: absolute;
width: 100%;
height: 100px;
background-color: black;
overflow: hidden;
}
.child1 {
position: absolute;
width: 90%;
height: 200px;
font-size: 2vw;
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
<body>
<h3>需求: 设置绝对定位的同时让overflow:hidden生效</h3>
<h2>解决方法: 设置父盒子position:relative</h2>
<div class="parent">
<div class="child">父盒子设置相对定位</div>
</div>
<div class="parent1">
<div class="child1">父盒子未设置相对定位</div>
</div>
</body>
</html>
3.一个父元素可以同时设置position: absolute和overflow:hidden直接对超出的子元素进行隐藏，但是设置position: relative就不行，这样可以解决在H5开发时，造成整体页面的滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
}
.main {
/* absolute生效，relative情况下overflow，hidden不生效，明天研究 */
position: absolute;
width: 100%;
top: 50px;
bottom: 100px;
background: rgb(16, 16, 243);
overflow: hidden;
}
.content {
height: 1400px;
background: rgb(230, 169, 169);
}
</style>
<body>
<div class="main">
<div class="content"></div>
</div>
<div>占位测试</div>
</body>
</html>
4.设置position: fixed;top:0,left:0,right:0,bottom:0实现width:100%和height:100
从实现效果上来看，两种做法都能让一个没有宽高的盒子完全填满父容器。 但设置子容器宽高为100%表示继承父容器宽高，即父容器不管多大子容器始终为父容器的百分百。 而设置top:0，left:0，right:0，bottom:0本质目的，是让子盒子四边与父容器间距为0，而子盒子没有明确宽高，自然被拉伸到完全填满父容器了，实现要给盒子垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.parent {
width: 200px;
height: 200px;
background: #ffb6b9;
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #8ac6d1;
margin: auto;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
