08 定位 定位案例 网页布局总结 元素的显示和隐藏
定位
种类
静态定位
不定位，满足标准流的规定
和标准流的元素完全一致，可以认为其没有定位
例子
<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="static">
<div class="example">
静态定位
</div>
</div>
定位.css
.example{
background-color: aqua;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 1px;
}
#static {
position: static;
}
相对定位
边偏移是相对于本身的位置的
不脱离标准流
会保留原来的位置
可以单独使用
特点
- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当父标签。
例子
<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="relative">
<div class="example">
相对定位
</div>
</div>
定位.css
.example{
background-color: aqua;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 1px;
}
#relative{
position: relative;
top: 10px;
left: 10px;
}
绝对定位
边偏移是相对于它有定位的祖先元素来说的（如果他没有有定位的祖先元素，则以DOM为准定位）
脱离标准流
不会保留原来的位置
一般情况下需要和有定位的祖先元素搭配使用（一般子绝父相）
特点
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
例子
<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="absolute">
<div class="example">
绝对定位
</div>
</div>
定位.css
.example{
background-color: aqua;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 1px;
}
#absolute{
position: absolute;
top: 10px;
left: 110px;
}
固定定位
边偏移是相对于浏览器的可视窗口来说的
脱离标准流
不会保留原来的位置
可以单独使用
例子
<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="fixed">
<div class="example">
固定定位
</div>
</div>
定位.css
.example{
background-color: aqua;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 1px;
}
#fixed {
position: fixed;
top: 10px;
right: 10px;
}
粘性定位
边偏移是相对于浏览器的可视窗口来说的（具体作用建议运行代码，语言上有点难以描述）
不脱离标准流
会保留原来的位置
兼容性较低
例子
<link rel="stylesheet" type="text/css" href="./定位.css"/>
<div id="sticky">
<div class="example">
粘性定位
</div>
</div>
定位.css
.example{
background-color: aqua;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 1px;
}
#sticky {
position: sticky;
top: 10px;
right: 10px;
}
总结
定位案例
在07温习的学成在线项目中加入定位的元素
加入前
新增后
hot/new标签
加入前
index.html
<div class="box-content-li">
<div class="box-content-li-image">
<a href="#"><img src="images/图层133.png" ></a>
</div>
<div class="box-content-li-text">
Think PHP 5.0 博客系统实战项目演练
<div class="box-content-li-text-supplement">
<div class="box-content-li-text-level">
高级
</div>
<div class="box-content-li-text-people">
· 1125人在学习
</div>
</div>
</div>
</div>
<div class="box-content-li">
<div class="box-content-li-image">
<a href="#"><img src="images/图层135.png" ></a>
</div>
<div class="box-content-li-text">
Android 网络图片加载框架详解
<div class="box-content-li-text-supplement">
<div class="box-content-li-text-level">
高级
</div>
<div class="box-content-li-text-people">
· 1125人在学习
</div>
</div>
</div>
</div>
style .css
.box-content-li{
float:left;
width: 226.8px;
height: 270px;
margin:15px 8.5px 0px 8.5px;
background-color: white;
box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3);
}
新增后
index.html
<div class="box-content-li">
<div class="box-content-li-tip">
<img src="images/hot.png" >
</div>
<div class="box-content-li-image">
<a href="#"><img src="images/图层133.png" ></a>
</div>
<div class="box-content-li-text">
Think PHP 5.0 博客系统实战项目演练
<div class="box-content-li-text-supplement">
<div class="box-content-li-text-level">
高级
</div>
<div class="box-content-li-text-people">
· 1125人在学习
</div>
</div>
</div>
</div>
<div class="box-content-li">
<div class="box-content-li-tip">
<img src="images/new.png" >
</div>
<div class="box-content-li-image">
<a href="#"><img src="images/图层135.png" ></a>
</div>
<div class="box-content-li-text">
Android 网络图片加载框架详解
<div class="box-content-li-text-supplement">
<div class="box-content-li-text-level">
高级
</div>
<div class="box-content-li-text-people">
· 1125人在学习
</div>
</div>
</div>
</div>
style .css
.box-content-li{
position: relative;
float:left;
width: 226.8px;
height: 270px;
margin:15px 8.5px 0px 8.5px;
background-color: white;
box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3);
}
.box-content-li-tip {
width: 40px;
height: 25px;
position: absolute;
top: 4px;
right: -4px;
}
侧边栏的添加
加入前
index.html
<div class="box">
...
</div>
新增后
index.html
<div class="box">
<div class="box-sidebar">
<div class="box-sidebar-li">
<a href="#">编程入门</a>
</div>
<div class="box-sidebar-li">
<a href="#">数据分析师</a>
</div>
<div class="box-sidebar-li">
<a href="#">机器学习工程师</a>
</div>
<div class="box-sidebar-li">
<a href="#">前端开发工程师</a>
</div>
<div class="box-sidebar-li">
<a href="#">人工智能工程师</a>
</div>
<div class="box-sidebar-li">
<a href="#"> 全栈工程师</a>
</div>
<div class="box-sidebar-li">
<a href="#">iOS工程师</a>
</div>
<div class="box-sidebar-li">
<a href="#">VR开发者</a>
</div>
<div class="box-sidebar-li">
<a href="#">深度学习</a>
</div>
<div class="box-sidebar-li">
<a href="#">商业预测分析师</a>
</div>
<div class="box-sidebar-li">
<a href="#">Android开发工程师</a>
</div>
</div>
...
</div>
style .css
.box-sidebar{
position: fixed;
right: 50%;
margin-right: 625px;
top: 50%;
margin-top: -212.5px;
z-index:5;
width: 150px;
height: 385px;
padding:20px 17.5px;
background-color: white;
font-size: 14px;
line-height: 35px;
color: rgb(66,66,66);
}
.box-sidebar-li {
width: 150px;
height: 35px;
padding-left: 15px;
}
.box-sidebar-li>a:hover{
color: rgb(0,164,255);
}
网页布局总结
标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
元素的显示和隐藏
种类
display
display: none 隐藏对象
display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景
例子
<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="display">
display
</div>
<div>
div
</div>
元素的显示与隐藏.css
*{
margin: 0px;
padding:0px;
}
div{
width: 100px;
height: 100px;
background-color: pink;
}
#display{
display:block;
background-color: red;
}
#display:hover{
display: none;
}
visibility
visibility : hidden; 隐藏对象
visibility 隐藏元素后，继续占有原来的位置
例子
<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="visibility">
visibility
</div>
<div>
div
</div>
元素的显示与隐藏.css
*{
margin: 0px;
padding:0px;
}
div{
width: 100px;
height: 100px;
background-color: pink;
}
#visibility {
visibility:visible ;
background-color: orange;
}
#visibility:hover{
visibility:hidden;
}
display和visibility总结
-
如果隐藏元素想要原来位置， 就用 visibility ：hidden
-
如果隐藏元素不想要原来位置， 就用 display ：none (用处更多 重点）
overflow
属性
visible
当内容过多，溢出元素方块的内容也会显示出来
hidden
当内容过多，溢出元素方块的内容不会显示出来
scroll
会有滑动条
auto
当内容过多，会有滑动条
例子
<link rel="stylesheet" type="text/css" href="./元素的显示与隐藏.css"/>
<div id="overflow">
<div id="overflow-visible" class="overflow">
overflow-visible<br/>
overflow-visible<br/>
overflow-visible<br/>
overflow-visible<br/>
overflow-visible
</div>
<div id="overflow-hidden" class="overflow">
overflow-hidden<br/>
overflow-hidden<br/>
overflow-hidden<br/>
overflow-hidden<br/>
overflow-hidden
</div>
<div id="overflow-scroll" class="overflow">
overflow-scroll<br/>
overflow-scroll<br/>
overflow-scroll<br/>
overflow-scroll<br/>
overflow-scroll
</div>
<div id="overflow-auto" class="overflow">
overflow-auto<br/>
overflow-auto<br/>
overflow-auto<br/>
overflow-auto<br/>
overflow-auto
</div>
<div id="overflow-auto" class="overflow">
overflow-auto<br/>
overflow-auto
</div>
</div>
<div>
div
</div>
元素的显示与隐藏.css
*{
margin: 0px;
padding:0px;
}
div{
width: 100px;
height: 100px;
background-color: pink;
}
#overflow{
width: 500px;
height: 60px;
}
.overflow{
float: left;
height: 100px;
background-color: yellow;
}
#overflow-visible{
overflow: visible;
}
#overflow-hidden{
overflow: hidden;
}
#overflow-scroll{
overflow: scroll;
}
#overflow-auto{
overflow: auto;
}
总结
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
