CSS 2.1
2020-09-28 本文已影响0人
Edwinpanzzz
定位
关于定位
“根元素”的包含块也称为初始包含块。在 HTML 中，根元素就是 html 元素，有些浏览器会使用 body 作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形。
对于一个非根元素，如果其 position 值是 relative 或 static ，包含块则由最近的块级框、表格单元或行内块祖先框的内容边界构成。
对于一个非根元素，如果其 position 值是 absolute ，包含块设置为最近的 position 值不是 static 的祖先元素（可以是任何类型），这个过程如下：
- 如果这个祖先是块级元素，包含块则设置为该元素的内边距边界。
- 如果没有祖先，元素的包含块定义为初始包含块。
定位相关
1、top 、left 、width 、height 的默认值是 auto 而不是 0 ，margin 、padding 的默认值是 0。
2、关于 margin 、padding 的百分比的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
width: 200px;
height: 200px;
background: pink;
margin: 100px;
padding: 50px;
}
.inner {
width: 50%;
height: 50%;
margin: 10%;
padding: 10%;
background: deeppink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>
结果显示，inner 中 margin 和 padding 的值是以 wrap 的值来计算的。
image.png
image.png
浮动
浮动会提升元素的层级（半层）。一个元素分两层（但是只需要在元素浮动的时候考虑）。
这么说可能不太直观，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.up {
float: left;
width: 100px;
height: 100px;
background: deeppink;
}
.down {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="up">up</div>
<div class="down">down</div>
</body>
</html>
未添加浮动之前：
image.png
添加浮动后，虽然背景颜色为pink的div上去了，但是文字还在下面，这就是上面所说的一个元素分两层的情况:
image.png
使用定位实现三列布局
需求：两边固定，当中自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
text-align: center;
vertical-align: middle;
}
.left {
position: absolute;
top: 0;
left: 0;
background: pink;
width: 200px;
}
.right {
position: absolute;
top: 0;
right: 0;
background: pink;
width: 200px;
}
.middle {
background: deeppink;
padding: 0 200px;
}
</style>
</head>
<body>
<!-- 需求: 两边固定，当中自适应 -->
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>
使用浮动实现三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
text-align: center;
vertical-align: middle;
}
.left {
float: left;
background: pink;
width: 200px;
}
.right {
float: right;
background: pink;
width: 200px;
}
.middle {
background: deeppink;
padding: 0 200px;
}
</style>
</head>
<body>
<!-- 需求: 两边固定，当中自适应 -->
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
