css中的float、position、BFC、布局
程序员文章站
2022-04-25 19:37:41
...
浮动：float
当子盒子比父盒子大时会出现样式问题，下面介绍三种清除外部浮动的方式
清除外部浮动的三种方法：
- 憨憨法：给父盒子设置一个合适能容下子盒子的宽度，一般不这么做，因为麻烦
- 使用clear:both
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: deeppink;
}
.div2,.div3{
width: 100px;
height: 100px;
background-color: lightpink;
}
.div2{
float: left;
}
.div3{
float: right;
}
</style>
</head>
<body>
<div class="div1">
我是div1
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
<!-- 方法2：使用clear:both样式清除浮动 -->
<div style="clear: both;"></div>
</div>
</body>
</html>
- 在父盒子中使用overflow:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: deeppink;
/* 方法三：使用overflow:hidden */
overflow: hidden;
}
.div2,.div3{
width: 100px;
height: 100px;
background-color: lightpink;
}
.div2{
float: left;
}
.div3{
float: right;
}
</style>
</head>
<body>
<div class="div1">
我是div1
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
</div>
</body>
</html>
详细说一下overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
所以其实在清除浮动时使用overflow:auto也可以
定位：position
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成固定定位的元素，**相对于浏览器窗口**进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
sticky定位：
position:sticky基于用户的滚动位置来定位，在position:relative和position:fixed之间反复横跳。在使用时要添加一个特定的阈值top, right, bottom 或 left 之一，指定其中一个才可以使粘性定位生效，否则其行为和相对定位相同
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
BFC块级格式化上下文
BFC：Block Formatting Context
BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
水平居中的三种办法
margin:0 auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 90%;
height: 50vh;
background-color: deeppink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1">
我是div1
</div>
</body>
</html>
块标签内对齐：text-align:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
width: 90%;
height: 50vh;
background-color: deeppink;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
center
</div>
</body>
</html>
flex布局：justify-content:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
width: 90%;
height: 50vh;
background-color: deeppink;
margin: 0 auto;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<span>center</span>
</div>
</body>
</html>
垂直居中的种方法
方法一：
让元素相对父元素定位，偏移左50%，上50%，把自身向左移半个宽度，向上移半个高度，同时完成了水平与垂直方向的居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
height: 500px;
background-color: deeppink;
position: relative;
}
.div1{
width: 100px;
height: 100px;
background-color:#f3f3f3;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
</div>
</body>
</html>
方法二：flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
height: 500px;
background-color: deeppink;
display: flex;
justify-content: center;
align-items: center;
}
.div1{
width: 100px;
height: 100px;
background-color:#f3f3f3;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
</div>
</body>
</html>
推荐阅读