【CSS学习笔记六】遵循原则、定位（五种模式：静态、相对、绝对、固定、粘性定位）
文章目录
-
- 14 遵循原则
-
- 14.1 页面布局
- 14.2 CSS属性专业书写顺序
- 15 定位
-
- 15.1 定位组成
- 15.2 定位模式
-
- 15.2.1 静态定位 `position：static`
- 15.2.2 相对定位（父级） `position：relative`
- 15.2.3 绝对定位（子级） `position：absolute`
- 15.2.4 固定定位 `position：fixed`
- 15.2.5 粘性定位`position：sticky`
- 15.2.6 小结
- 15.3 定位的叠放次序`z-index：1`
- 15.4 定位拓展
-
- 15.4.1 绝对定位的盒子居中
- 15.4.2 定位的特殊特性
14 遵循原则
14.1 页面布局
-
必须确定页面的版心（可视区），我们测量可知
-
分析页面中的行模块以及每个行模块中的列模块。页面布局的第一准则
-
一行中的列模块经常浮动布局，先确定每个列模块的大小，之后确定列的位置。页面布局的第二准则
-
制作HTML结构，我们是遵循先有结构（更重要），后有样式的原则
14.2 CSS属性专业书写顺序
1.布局定位属性: display / position / float / clear / visibility/ overflow (建议display第一个写,毕竟关系到模式)
2.自身属性: width / height / margin / padding / border/ background
3.文本属性: color / font / text-decoration / text- align / vertical-align / white- space / break-word
4.其他属性(CSS3) : content / cursor / border-radius / box- shadow / text -shadow / background:linear-gradient…
15 定位
为什么需要定位？
以下两点效果通过标准流和浮动都没有办法实现：
- 让盒子自由地在某个父盒子里面移动位置
- 在页面滚动时，让盒子能够固定在页面的某个位置。
15.1 定位组成
定位：将盒子定在任意固定的位置
定位=定位模式+边偏移
① 定位模式：指定一个元素在文档中的定位方式（position属性）
有四种不同的定位模式：
- static：静态定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
② 边偏移：决定该元素的最终位置（top、bottom、left、right属性）← 不再用margin和padding属性
注意：边偏移是相对于父级元素的
15.2 定位模式
15.2.1 静态定位 position：static
是元素默认的定位方式，按照标准流摆放，无边偏移，表示“无定位”，一般不用
15.2.2 相对定位（父级） position：relative
相对于原来的位置进行边偏移，同时，继续占有原来的位置
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>Documenttitle>
<style>
.one {
width: 300px;
height: 100px;
background-color: skyblue;
}
.two {
width: 300px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div class="one">div>
<div class="two">div>
body>
html>
正常没有加相对定位：
加上相对定位后：
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>Documenttitle> <style> .one { width: 300px; height: 100px; background-color: skyblue; position: relative; /* 相对定位 */ top: 50px; /* 边偏移 */ left: 100px; } .two { width: 300px; height: 100px; background-color: pink; } style> head> <body> <div class="one">div> <div class="two">div> body> html>
15.2.3 绝对定位（子级） position：absolute
相对祖先元素进行边偏移，同时，不再继续占有原来的位置
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）。
- 如果祖先元素有定位（相对/绝对/固定定位），则以最近的一级有定位祖先元素为参考点进行移动元素。
- 绝对定位脱离标准流，不再占有原来的位置（脱标）。
注意：子绝父相 （用得最多）
子级：绝对定位（不占位）；父级：相对定位（占位）
子绝父相的好处：
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的盒子。
- 父盒子需要定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对位置。如果父盒子是不占有位置，那么下面的元素会占据父盒子的位置，这样就重叠了。
.father .son {
position: absolute;
top: 5px;
right: -4px;
}
.father {
position:relative;
}
绿色图片为father，hot标签为son
15.2.4 固定定位 position：fixed
相对于浏览器的可视窗口进行定位，不随页面滚动改变位置，同时，不再继续占有原来的位置
.one {
position: fixed;
top: 50px;
left: 100px;
}
如何固定在版心右侧位置：
- 让固定定位的盒子left50%，走到浏览器可视区的一半位置。
- 让固定定位的盒子margin-left：版心宽度的一半距离。
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>Documenttitle>
<style>
.one {
width: 1000px;
height: 1000px;
background-color: skyblue;
margin: 0 auto;
}
.fix {
width: 50px;
height: 100px;
background-color: pink;
position: fixed; /* 固定定位 */
top: 200px;
left: 50%; /* 先固定在页面中间 */
margin-left: 505px; /* 再往右移动505px(版心的一半) */
}
style>
head>
<body>
<div class="one">div>
<div class="fix">div>
body>
html>
15.2.5 粘性定位position：sticky
粘性定位：相对定位和绝对定位的结合
- 以浏览器的可视窗口为参照点移动元素（固定定位特点)
- 粘性定位占有原先的位置（相对定位特点)
- 必须添加 top 、 left、 right、bottom 其中一个才有效
- 跟页面滚动搭配使用，兼容性较差，IE不支持
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>Documenttitle>
<style>
.one{
width: 1000px;
height: 6000px;
background-color: aquamarine;
margin: 0 auto;
}
.fix{
width: 100px;
height: 100px;
background-color: blueviolet;
position: sticky; /* 粘性定位 */
top: 0px; /* 上滑到fix的顶部距离页面0px时转固定定位 */
margin-left: 505px;
margin-top: 400px; /* 原本顶部有400px空白 */
}
style>
head>
<body>
<div class="fix">div>
<div class="one">div>
body>
html>
15.2.6 小结
15.3 定位的叠放次序z-index：1
属性：使用z-index来控制盒子的叠放顺序
属性值：数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
注意点：
- z-index：后面的值只能是整数，并且没有单位。
- z-index：只能用于修饰定位，如果盒子没有定位，那么就不可用。
- 如果属性值相同，就按照书写顺序，后来居上。
15.4 定位拓展
15.4.1 绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto进行水平居中，可以通过下面的方法实现：
-
left：50%（先让盒子左侧对齐页面正中间）
-
margin-left：盒子自身宽度的一半px（盒子左移自身宽度的一半，实现水平居中）
注意点：
-
垂直居中也是相同的原理
-
相对定位没有脱离标准流，水平居中可以使用：margin：0 auto
15.4.2 定位的特殊特性
添加了绝对/固定定位的盒子，在尺寸的特性上具有行内块元素的性质，某些特性上与浮动类似：
-
行内元素添加绝对/固定定位，可以直接设置高度或者宽度。
-
块级元素添加绝对/固定定位，如果不给宽度或者高度，默认大小是内容的大小。
-
浮动元素，绝对定位，固定定位都是脱标的盒子，脱标的盒子不会触发外边距合并的问题（外边距塌陷）（不包括相对定位，因为相对定位没有脱标）
-
浮动元素不会压住标准流里面的文字，而定位会
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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.hezi1 {
height: 200px;
width: 200px;
background-color: bisque;
}
.hezi2 {
background-color: brown;
}
style>
head>
<body>
<div class="hezi1">div>
<p class="hezi2">我是一行文字p>
body>
html>
定义了一个盒子和一个段落，盒子用肉色表示，段落用赤色表示，两个都是块级元素。
当给盒子加上浮动：（浮动可以用来做文字环绕效果）
肉色并不会压住盒子的文字，只是会压住文字的盒子。
但是定位：
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>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.hezi1 {
position:absolute;
height: 200px;
width: 200px;
background-color: bisque;
}
.hezi2 {
background-color: brown;
}
style>
head>
<body>
<div class="hezi1">div>
<p class="hezi2">我是一行超级长的文字，我用来证明定位会压住文字p>
body>
html>
结果压住了文字：
