web开发：定位布局
一、盒子的显隐
二、小米topbar
三、相对定位
四、决定定位
五、固定定位
六、z-index属性
七、流式布局思想
八、hover父子悬浮
一、盒子的显隐
1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的显隐</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background: red;
}
.wrap {
background: orange;
} /*display: none; 通过控制盒子的显示方式来隐藏盒子*/
/*该隐藏方式在页面中不占位*/
.box {
display: none;
}
/*opacity: 0; 通过控制盒子的透明度来隐藏盒子*/
/*该隐藏方式在页面中占位*/
.box {
/*opacity: 0*/
}
/*注: 一般显隐操作的盒子都是采用定位布局*/ /*悬浮父级显示子级*/
body:hover .box {
display: block;
} /*将盒子藏到屏幕外: 不能通过盒模型布局, 也不建议通过浮动布局, 可以采用定位布局*/
.box {
/*margin-top: -208px*/
} </style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
二、小米topbar
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>topbar</title>
<style type="text/css">
html, body {
margin: 0;
}
a {
color: black;
text-decoration: none;
}
.topbar {
/*height: 40px;*/
background-color: #333;
}
.container {
width: 1226px;
margin: 0 auto;
/*height: 40px;*/
/*overflow: hidden;*/
}
.container:after {
content: "";
display: block;
clear: both;
}
/*对父级设置字体相关属性, 子级的inline类型标签会继承字体相关属性*/
.topbar-nav, .topbar-info {
font-size: 12px;
/*background: orange;*/
/*line-height: 40px;*/
float: left;
}
.topbar-nav a, .topbar-info a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
}
.topbar-nav span, .topbar-info span {
/*padding: 0 3px;*/
margin: 0 3px;
color: #424242;
} .topbar-car {
float: right;
width: 120px;
height: 40px;
background: pink;
}
.topbar-info {
float: right;
/*height: 40px;*/
line-height: 40px;
/*background: blue;*/
margin-right: 20px;
}
</style>
<style type="text/css">
.topbar-download {
position: relative;
/*z-index: 1;*/
}
.topbar-app {
position: absolute;
width: 100px;
height: 120px;
background: pink;
left: -25px;
top: 40px;
/*z-index: 666;*/
display: none;
}
.topbar-download:hover .topbar-app {
display: block;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="topbar-nav">
<a href="">小米商城</a>
<span>|</span>
<a href="">MIUI</a>
<span>|</span>
<a class="topbar-download" href="">
下载app
<div class="topbar-app"></div>
</a>
<span>|</span>
<a href="">Select Region</a>
</div>
<div class="topbar-car"></div>
<div class="topbar-info">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
<span>|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
</body>
</html>
三、相对定位
什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式
参考系: 自身原有位置
position: relative; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位布局</title>
<style type="text/css">
/*定位布局的导入*/
/*需求: */
/*1.子级在父级的右下角显示*/
/*2.子级完成布局后,父级做content后,子级不需要重新布局*/
.sup {
width: 300px;
height: 300px;
background: pink;
border: 10px solid black;
}
.sub {
width: 50px;
height: 50px;
background: red;
margin-left: auto;
margin-top: 150px;
}
/*能不能有一种定位, 让盒子可以通过上下左右四个方位均操作自身布局 => 定位布局*/
/*什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式*/ .sup {
display: none;
}
</style> <style type="text/css">
/*相对定位布局*/
.box {
width: 200px;
height: 200px;
background: pink;
}
.b2 { background: orange }
.b1 {
/*1.设置定位属性，就会打开定位方位*/
position: relative;
/*2.通过定位方位完成布局*/
top: 300px;
left: 300px;
/*bottom: 100px;*/
/*right: 100px;*/
/*margin-top: 200px;*/
/*结论*/
/*1.左右取左,上下取上(eg:left与right共存是,left生效)*/
/*2.left=-right, top=-bottom*/
/*3.参考系: 自身原有位置(不是某一个点,eg: right参考的就是原有位置的右边界)*/
/*4.自身布局后不会影响自身原有位置*/
/*5.不脱离文档流(脱离文档流: 不再撑开父级高度)*/
} </style>
</head>
<body> <div class="box b1">1</div>
<div class="box b2"></div> <div class="sup">
<div class="sub"></div>
</div> </body>
</html>
四、决定定位
参考系: 最近的定位父级
position: absolute; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<style type="text/css"> .box {
width: 200px;
height: 300px;
background: orange;
} .sup {
width: 200px;
height: 200px;
background: pink;
/*position: absolute;*/
} .sub {
width: 50px;
height: 50px;
background: red;
/*1.开的定位*/
position: absolute;
/*2.采用定位方位完成布局*/
right: 0;
bottom: 0;
}
body {
position: relative;
}
/*注: 一般父级采用的是相对定位布局, 一般情况下,父级不需要脱离文档流*/
/*如果父级需要脱离文档流,用绝对定位父级完成布局,完全可以,不会影响子级相对于自身的布局,但是自身又要需要一个在文档流中的(不脱离文档流中的)定位参考父级 => 父相子绝*/
/*相对定位的应用场景大部分都是辅助于子级的绝对定位*/
.sup {
position: relative;
}
.sub {
/*left: 0;*/
right: 0;
}
</style>
</head>
<body>
<!-- 绝对定位布局一定存在父子关系 -->
<!-- 导入定位布局时,父级设置宽高没?(设置了) 子级呢?(也设置了) => 父级的高度不再依赖于子级 => 子级脱离文档流 --> <!-- 参考系: 最近的定位父级 -->
<div class="sup">
<div class="sub"></div>
</div>
<!-- <div class="box"></div> -->
<!--
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
-->
</body>
</html>
五、固定定位
参考系: 页面窗口
position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/*参考系: 页面窗口*/
/*1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左*/
/*2.相对于页面窗口是静止的*/
/*3.完全脱离文档流*/
.box {
width: 200px;
height: 300px;
background: orange;
}
.box {
position: fixed;
top: 200px;
right: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
六、z-index属性
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background: pink;
/*父级做相对定位处理,并不是自己需要用定位完成布局,最主要的原因是辅助于子级完成绝对定位布局*/
position: relative;
}
.box {
width: 75px;
height: 75px;
font: normal 30px/75px "STSong";
text-align: center;
background: cyan;
/*绝对定位需要大家脱离文档流,相互不会影响布局,每个都是独立相对于父级进行布局的个体*/
position: absolute;
/*top: 0;*/
/*bottom: 0;*/
/*left: 0;*/
}
.b1 {
left: 0;
top: 0;
background: red;
}
.b2 {
right: 0;
top: 0;
background: yellow;
}
.b3 {
/*虽然子级脱离了文档流,但是父子关系以及存在,子级获取100%,得到的还是父级对应的值*/
left: calc((100% - 75px) / 2);
top: calc((100% - 75px) / 2);;
background: green;
/*z-index改变显示层级, 显示层级的值为正整数, 值越大,显示层级越高*/
z-index: 1;
}
.b4 {
left: 0;
bottom: 0;
background: blue;
/*z-index: 88889;*/
}
.b5 {
right: 0;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
<div class="box b4">4</div>
<div class="box b5">5</div>
</div>`
</body>
</html>
七、流式布局思想
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局思想</title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
/*辅助body内部的子级有height流式布局的基础*/
height: 100%;
}
/*流式布局思想: 尽可能不去使用固定属性值*/
/*通过父级来获取相应的属性值*/
.b1 {
width: 100%;
height: 100%;
background: red;
}
.b2 {
/*view-width view-height*/
width: 80vw;
height: 80vh;
background: orange;
/*流式布局限制条件: 流式布局下宽度最大只能放大到800px,最小只能缩小到600px*/
max-width: 800px;
min-width: 600px;
} html {
font-size: 200px;
}
body {
font-size: 100px;
}
span {
/*设置自身字体时 em = ?px 父级字体的大小*/
font-size: 2em; display: block;
/*宽高em在自身设置字体大小后,值又会更改为相应大小*/
/*eg: body: 100px => 设置自身字体时em=100px, */
/*自身设置字体大小为2em,自身字体大小为200px => width=2em的em=200px*/
/*结果自身宽度是400pk*/ /*自身非设置字体时使用em单位,em值取自身字体大小*/
width: 2em; /*rem = html字体的大小*/
height: 2rem;
background: red;
}
</style>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.sub {
/*父级的content是提供给子级盒子利用的*/
margin: 0 5px;
border: 5px solid black;
padding: 5px;
/*auto <= 100%*/
width: auto;
/*width: 100%;*/
height: 50px;
background: orange;
}
</style>
</head>
<body>
<!-- <div class="b1"></div> --> <!-- <div class="b2"></div> --> <!-- <span>好的</span> --> <div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
八、hover父子悬浮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sup {
width: 120px;
height: 40px;
background: pink;
position: relative;
}
.sub {
width: 120px;
height: 100px;
background: black;
position: absolute;
left: 0;
top: 40px;
display: none;
}
.sup:hover .sub {
display: block;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
web开发：定位布局的更多相关文章
- 网页万能排版布局插件，web视图定位布局创意技术演示页
html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...
- 移动web开发之布局
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,Q ...
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局
移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...
- 移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...
- Web开发中常用的定位布局position
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform 1. Absoluti 布局(经常使用) 1 2. ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局
移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
随机推荐
- seaborn可视化
文章来自https://blog.csdn.net/qq_33120943/article/details/76569756 详细教程可以查看官方额示例:http://seaborn.pydata.o ...
- jq append添加的元素click获取不到的解决方法
移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...
- BFS算法模板（python实现）
BFS算法整理(python实现) 广度优先算法(Breadth-First-Search),简称BFS,是一种图形搜索演算算法. 1. 算法的应用场景 2. 算法的模板 2.1 针对树的BFS模板 ...
- c++学习笔记_5
前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 继承 继 ...
- Blynk系列随笔
Blynk系列随笔 1.基于Blynk服务器搭建物联网测试Demo 2.本地 Blynk服务器搭建
- Go语言入门篇-gRPC基于golang & java简单实现
一.什么是RPC 1.简介: RPC:Remote Procedure Call,远程过程调用.简单来说就是两个进程之间的数据交互. 正常服务端的接口服务是提供给用户端(在Web开发中就是浏览器)或者 ...
- axios设置请求头内容
axios设置请求头中的Authorization 和 cookie 信息: GET请求 axios.get(urlString, { headers: { 'Authorization': 'Bea ...
- [转帖]NTLM说明
[思路/技术]Windows认证 | 网络认证 来源:https://bbs.ichunqiu.com/thread-53598-1-1.html 圣乱X无心i春秋-核心白帽 发表于 5 ...
- （十五）springMvc 拦截器
文章目录 定义拦截器 接口中三个方法 配置拦截器 多个拦截器的规则 定义拦截器 springMvc 中定义拦截器只需要实现一个接口 org.springframework.web.servlet.Ha ...
- # Ubuntu子系统安装配置
目录 Ubuntu子系统安装配置 安装配置 终端美化 卸载 和win10之间的交互 Ubuntu子系统安装配置 亲测启动速度毫秒之间 安装配置 系统升级到一周年正式版及以上(1607) 依次在 设置 ...