CSS定位(慕课网学习笔记)
定位模型
static自然模型
relative相对定位模型
absolute绝对定位模型
fixed固定定位模型
sticky磁铁定位模型
possition之static(默认的设置)(静态定位、常规定位、自然定位)
作用 | 使元素定位于 常规/自然流 中 (块、行垂直排列下去,行内水平从左到右) |
---|---|
特点 | 1、忽略top,bottom,left,right或者z-index声明 |
2、两个相邻的元素如果设置了外边距,那么最终外边距=两者外边距最大的 | |
3、具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的想过就是这个块水平居中 |
特点例子:1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
/*这个先不管他*/
position: relative;
/*设置10像素的top值*/
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(2){
/*static会使2框回归自然流,看效果*/
position: static;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
1
</div>
<div class="block">
2
</div>
<div class="block">
3
</div>
<div class="block">
4
</div>
</body>
</html>
特点二:1和2之间的边距是2的外边距20,而不是1和2外边距之和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: static;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(1){
margin: 10px;
border-color:red;
}
.block:nth-child(2){
margin: 20px;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
1
</div>
<div class="block">
2
</div>
<div class="block">
3
</div>
<div class="block">
4
</div>
</body>
</html>
特点三:
上例中改为
.block:nth-child(1){
margin: auto;
border-color:red;
}
position之relative相对定位(参照物)
作用 | 使元素成为containing-block 官方解释是可定位的祖先元素 |
---|---|
特点 | 1、可以使用top/right/bottom/left/z-index进行相对定位 (相对于自己在常规流中的位置) |
2、相对定位的元素不会离开常规流(原来常规流中的位置依然空置存在) | |
3、任何元素都可以设置为relative,他的绝对定位的后代都可以相对于他进行绝对定位–超好用(因为绝对定位是相对于父元素而言的) | |
4、可以使浮动元素发生偏移,并控制它们的堆叠顺序(浮动元素不能设置偏移即外边距等,但加上相对定位就可以了) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-relative</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
width:300px;
height:300px;
background: blue;
}
.parent div {
width: 80px;
height: 80px;
}
.sub-1 {
/*相抵于原来自己在常规流中的定位*/
position:relative;
background: red;
top:20px;
left: 50px;
}
.sub-2 {
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="sub-1"></div>
<div class="sub-2"></div>
</div>
<div class=""></div>
di
</body>
</html>
position之absolute(绝对定位)
lrtb : left,right,top,bottom
作用 | 使元素脱离常规流 |
---|---|
特点 | 1、脱离常规流 |
2、设置尺寸要注意:百分比比的是谁?——最近定位的祖先元素 | |
3、lrtb如果设置为0 它将对其到最近定位祖先元素的各一边——衍生出一个居中妙计 | |
4、lrtb如果设置成auto它将被打回原形恢复到常规流 | |
5、如果没有最近定位祖先元素,会认body为父元素 | |
6、z-index可以控制堆叠顺序 |
1、脱离常规流,原来的位置会被下面的元素占用
2、百分比,lrtb等都是相对于父元素而言的
3、如果设置lrtb为auto由第四点可知,会回到常规流,所以设置lrtb均为0,然后设置margin为auto,自然居中
4、。。。。
5、。。。。
6、设置堆叠顺序,属性仅在节点的 position 属性为 relative, absolute 或者
fixed 时生效.z-index 大的元素会覆盖 z-index 小的元素,即 z-index 越大优先级越高
position之fixed(固定定位)
作用 | 我跟绝对定位本是同根生 |
---|---|
特点 | 1、和absolute的区别?相对于谁做绝对定位 |
2、固定定位元素不会随着视口的滚动而滚动 | |
3继承absolute的所有特点 |
1、固定定位相对于视口(窗口、广告)
2、一直在窗口的同一个位置
3、。。。。
position之sticky(磁铁定位、粘性定位、吸附定位)——新的
作用 | relative+fixed的完美结合,制造出吸附效果 |
---|---|
特点 | 1、如果产生偏移原位置还是会在常规流中 |
2、如果他的最近祖先元素有滚动,那么它的偏移标尺就是最近的祖先元素 | |
3、如果最近的祖先元素没有滚动那么它的偏移标尺是视口 | |
4、上下左右【偏移规则】 |
CSS定位(慕课网学习笔记)的更多相关文章
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- HTML基本语法(慕课网学习笔记)
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
- CSS基本语法(慕课网学习笔记)
CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...
- js之DOM入门(慕课网学习笔记)
DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
- Float浮动(慕课网学习笔记)
float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...
- 【慕课网学习笔记】Java共享变量的可见性和原子性
1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...
- js之window对象(慕课网学习笔记)
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...
- 初识javaScript(慕课网学习笔记)
js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...
随机推荐
- LeetCode 887. Super Egg Drop
题目链接:https://leetcode.com/problems/super-egg-drop/ 题意:给你K个鸡蛋以及一栋N层楼的建筑,已知存在某一个楼层F(0<=F<=N),在不高 ...
- Ubuntu 18.04 开启 root 账号并允许远程连接
转载:https://blog.csdn.net/u010766726/article/details/105376461 以普通用户登录系统 通过 "终端" 操作 普通用户 – ...
- 鸿蒙轻内核定时器Swtmr:不受硬件和数量限制,满足用户需求
摘要:本文通过分析鸿蒙轻内核定时器模块的源码,掌握定时器使用上的差异. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十四 软件定时器Swtmr>,作者:zhushy . 软件定时器(S ...
- 开源低代码平台开发实践二:从 0 构建一个基于 ER 图的低代码后端
前后端分离了! 第一次知道这个事情的时候,内心是困惑的. 前端都出去搞 SPA,SEO 们同意吗? 后来,SSR 来了. 他说:"SEO 们同意了!" 任何人的反对,都没用了,时代 ...
- 入门Kubernetes-数据存储
一.Volume介绍: 在k8s中Pod的生命周期可能很短,会被频繁地销毁和创建.容器销毁时,保存在容器内部文件系统中的数据都会被清除. 为了持久化保存容器数据,k8s 提供了卷(Volume)的抽象 ...
- 自学linux——17.selinux的了解及使用
SElinux是强制访问控制(MAC)安全系统,是linux历史上最杰出的新安全系统.对于linux安全模块来说,SElinux的功能是最全面的,测试也是最充分的,这是一种基于内核的安全系统. 1.S ...
- expect命令和here document免交互
目录 一.Here Document免交互 1.1 概述 1.2 语法格式 1.3 简单案例 1.4 支持变量替换 1.5 多行注释 1.6 完成自动划分磁盘免交互 二.Expect进行免交互 2.1 ...
- azure bash: kubectl: command not found
[root@***]# az aks install-cliDownloading client to "/usr/local/bin/kubectl" from "ht ...
- Mol Cell | 张令强/贺福初/魏文毅/刘翠华揭示线性泛素化调控血管生成新机制
景杰学术 | 报道 泛素化修饰作为主要的蛋白质翻译后修饰之一,与细胞周期.应激反应.信号传导和DNA损伤修复等几乎所有的生命活动密切相关[1].泛素分子通常含有7个赖氨酸残基,通过这些残基可以和其他泛 ...
- C++ 1//设计立方体类 //创建立方体的类 //设计属性和行为 //获取立方体的面积和体积 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等
1 //设计立方体类 2 //创建立方体的类 3 //设计属性和行为 4 //获取立方体的面积和体积 5 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等 6 #include <i ...