定位
为什么需要定位：
- 浮动可以让多个块盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子
1.定位组成
定位：将盒子在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定该元素的最终位置
定位模式决定元素的定位方式，它通过CSS的 position属性来设置，其值可以为四个：
定位模式：
| 值 | 语义 |
|---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移：
| 边偏移属性 | 示例 | 作用 |
|---|---|---|
top | top:90px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
bottom | bottom:90px | 底部偏移量，定义元素相对于其父元素下边线的距离 ` |
left | left:90px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
right | right:90px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2.静态定位static (了解)
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 {postition:static;}
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局很少用到
3.相对定位relative（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置
语法：
选择器 {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>Document</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
4.绝对定位 absolute (重要)
绝对定位是元素在移动位置时，是相对于它的祖先元素来说
语法：
选择器 {position : absolute;}
绝对定位特点：（记住）
- 如果没有祖先元素或者祖先元素没有定位 ，则以浏览器为准定定位
- 如果祖先有定位（相对，绝对，固定定位 ），则以最近一级有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先位置（脱标）
所以绝对定位是脱离标准流的
<!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>
<style>
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
top: 20px;
right: 50px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
湛江
</div>
</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>Document</title>
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
5.子绝父相由来
子级元素是绝对定位，父级元素是相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响到其他兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能相对定位
6.固定定位 fixed（重要）
固定定位是元素固定于浏览器可视区的位置，主要使用场景是可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器 {postition : fixed;}
固定定位的特点：
- 以浏览器的可视窗口参照点移动元素【重点】
- 跟父元素没有任何关系
- 不随着滚动条滚动
- 固定定位不在占有原先的位置
固定定位是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
固定定位小技巧：固定在版心右侧位置
小算法：
- 让固定定位盒子
left : 50%，走到浏览器可视区（也可以看做版心）的一半位置 - 让固定定位盒子
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>Document</title>
<style>
* {
width: 900px;
margin: 0 auto;
}
.father {
width: 900px;
height: 1500px;
background-color: skyblue;
}
.son {
position: fixed;
left: 50%;
margin-left: 455px;
width: 20px;
height: 30px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
父盒子
<div class="son">
子盒子
</div>
</div>
</body>
</html>
7.粘性定位sticky（了解）
粘性定位可以被认为是相对定位 和 固定定位的混合，Sticky粘性的
语法：
选择器 {position : sticky; top : 10px;}
粘性定位特点：
- 以浏览器可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原来原先位置（相对定位特点）
- 必须设置
topleftrightbottom其中一个才有效
跟页面滚动搭配使用，兼容性较差，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>Document</title>
<style>
* {
margin: 0 auto;
width: 1000px;
}
body {
height: 3000px;
}
.sticky {
position: sticky;
top: 0px;
width: 1000px;
height: 50px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="sticky">
湛江
</div>
</body>
</html>
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 当前阶段少 |
8.定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以z-index来控制盒子的前后次序（z轴）
语法：
选择器 {z-index : 1;}
- 数值可以是正数，负整数或0，默认是
auto，数值越大，盒子越靠上 - 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有
z-index属性，只有定位才有
9.绝对定位的盒子居中【重要点】
加了绝对定位 的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中步骤：
left:50%;让盒子的左侧移动到父级元素的水平中心位置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>Document</title>
<style>
.box {
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
10.定位特殊特性【背】
绝对定位 和 固定定位也和浮动类似：
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷：
浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子：
- 浮动元素不同，只会压住它下面标准流盒子，但是不会压住下面标准流盒子里面的文字（或图片）
- 但是绝对定位（固定定位）会压住下面标准流所有的内容
- 浮动之所以不会压住文字，因为浮动产生的目的最初是为做文字环绕效果的，文字会围绕浮动元素
11.元素的显示与隐藏
让一个元素在页面中隐藏或者显示出来
display显示隐藏，但是不保留位置visibility显示隐藏，但是保留原来位置overflow溢出显示隐藏，但是只是对于溢出的部分处理
display属性
display属性用于设置一个元素应如何显示
display:none;隐藏对象，只是隐藏，不是删除dispaly:block;除了转换为块级元素之外，同时还有显示元素的意思
dispaly隐藏元素后，不再占有原来的位置
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏
visibilty:visible;元素可视visibilty:hidden;元素隐藏，只是隐藏，不是删除
visibilty隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，应用visibilty:hidden;
如果隐藏元素不想要原来位置，就用display:none;(用处更多重点)
overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
| 属性值 | 作用 |
|---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容，超出部分隐藏掉 |
scroll | 不管超出内容否，总是显示滚动条 |
auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来 ，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分
12.什么是界面样式
所谓界面样式，就是更改一些用户操作样式， 以便提高更好的用户体验
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
鼠标样式
设置或检索在对象上鼠标指针采用何种系统预先的光标形状
| 属性值 | 作用 |
|---|---|
default | 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-鼠标样式</title>
</head>
<body>
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
</body>
</html>
轮廓线outline
给表单添加outline:0;或者outline:none;样式之后 ，就可以去掉默认的蓝色边框
input {outline:none;}
防止拖拽文本域resize
在实际开发中，我们文本域右下角是不可以拖拽的
textarea {resize:none;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-表单轮廓和防止拖拽文本域</title>
<style>
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
</style>
</head>
<body>
<!-- 1. 取消表单轮廓 -->
<input type="text">
<!-- 2. 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
注意是：文本域最好放在一行上
13.vertical-align属性应用
在css的vertical属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素垂直对齐方式：设置的元素必须是行内元素或者行内块元素才有效
语法：
vertical-align : basseline | top | middle | bottom;
| 值 | 作用 |
|---|---|
baseline | 默认值，元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
注意是可以给图片，表单这些行内块元素的vertical-align属性设置为middle就可以文字和图片垂直居中对齐了
<!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>
<style>
textarea {
/* 防止留言框拖拽 */
resize: none;
/* 设置文字与留言框对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 注意：textarea是行内块元素 -->
<textarea name="text" id="" cols="30" rows="10"></textarea>
<span>请留言</span>
</body>
</html>
解决图片底部默认空白缝隙问题：
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决方法两种：
- 给图片添加
vertical-align: middle | top | bottom; - 把图片转换为块级元素
dispaly:block;
14.文本溢出显示省略号
单行文本溢出显示省略号–必须满足三个条件
- 先强制一行内显示文本
- 超出的部分隐藏
- 文字用省略号替代超出的部分
<!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>
<style>
* {
margin: 0 auto;
width: 900px;
}
div {
width: 100px;
height: 50px;
background-color: skyblue;
/* 1.单行文本溢出显示省略号 */
/* normal默认值，表示自动换行 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替换超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
如是的王血时战，珍疾卑生我君易，人有哥。
</div>
</body>
</html>
多行文本溢出显出省略号:
多行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数，表示是在第二省略号 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单行文本溢出显示省略号</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
