位置层级 z-index
- 测试环境:先搞两个div颜色块
......
<style type="text/css">
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: #008000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
......
- 对box1 设置 position 偏移,box1色块会有一部分覆盖了box2
......
<style type="text/css">
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
position: relative; /*增加之处*/
top: 100px;
left: 100px;
}
.box2 {
background-color: #008000;
}
</style>
- 现在,我们也对box2设置位置,结果变成了 box2的色块覆盖了box1色块
......
<style type="text/css">
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
position: relative;
top: 100px;
left: 100px;
}
.box2 {
background-color: #008000;
position: relative; /*增加之处*/
}
</style>
- 所以,对于谁在谁上面,css提供了 z-index 这个属性来决定(使用前提,必须有position,否则没有意义),值越大,就越往上层
<style type="text/css">
div {
height: 200px;
width: 200px;
}
.box1 {
background-color: red;
position: relative;
top: 100px;
left: 100px;
z-index: 100;/*增加之处*/
}
.box2 {
background-color: #008000;
position: relative;
z-index: 200;/*增加之处*,该色块会在最上层,即把box1部分色块覆盖/
}
</style>
......
<div class="box1"></div>
<div class="box2"></div>
- 再次强调,有position以后, z-index才有意义,否则根本没效果,把上述示例的position注释掉,色块就互相隔离开来了
定位的父子关系/兄弟关系层级探讨
- demo环境:两个父包子的色块
<style type="text/css">
.parent {
height: 200px;
width: 200px;
background-color: red;
}
.child {
height: 100px;
width: 100px;
background-color: green;
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
- 对两个色块设置定位,效果是 子色块与父色块之间,有10px的边距
<style type="text/css">
.parent {
height: 200px;
width: 200px;
background-color: red;
position: relative; /*新增*/
}
.child {
height: 100px;
width: 100px;
background-color: green;
position: absolute; /*新增*/
top: 10px;
left: 10px;
}
</style>
- 现在,想把父色块的层级提上来,加 z-index 可否实现效果(答案'否',没有效果)
<style type="text/css">
.parent {
height: 200px;
width: 200px;
background-color: red;
position: relative;
z-index: 100; /*新增,无效果*/
}
.child {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: 10px;
left: 10px;
}
</style>
- 解决办法:删除父色块的层级,把子色块的层级修改为'负数'即可
<style type="text/css">
.parent {
height: 200px;
width: 200px;
background-color: red;
position: relative;
/* z-index: 100; 注释掉 */
}
.child {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: 10px;
left: 10px;
z-index: -1; /*新增*/
}
</style>
兄弟关系探讨
- demo 环境:两个兄弟色块,与浏览器拉开边距(谁在后面,谁占优势,所以绿块会覆盖红块)
<style type="text/css">
.box1 {
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 100px; /*距离浏览器100px*/
top: 100px;
}
.box2 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 0px; /*与浏览器没有距离*/
left: 0px;
}
</style>
......
<div class="box1"></div>
<div class="box2"></div>
- 对红块运用层级优先,有效果,红块在上层
<style type="text/css">
.box1 {
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
z-index: 100; /*新增*/
}
.box2 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 0px;
left: 0px;
}
</style>
- 小结
- 父子关系设置层级,把子元素的 z-index 设置成 负数即可
- 兄弟关系设置层级,正常设置即可
position的"另类用法",把'行内元素',变成'块级元素'
- demo 环境:对 span 元素设置宽/高,肯定是没效果的,示例如下
<style type="text/css">
span {
width: 200px; /*无效果*/
height: 200px;
background-color: yellow;
position: absolute;
}
</style>
......
<span>111111111111</span>
- 另类解决办法,添加 position:absolute,效果就出来了
<style type="text/css">
span {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute; /*新增*/
}
</style>
使'行内元素'变成'块级元素'的三个方法
display:block
float:left
position:absolute
利用position实现 水平垂直居中
-
之前,我们实现水平方向居中,使用的是: margin:0 auto;(垂直方向无法居中)
-
利用position实现 外层容器 相对于 浏览器窗口 '水平&垂直方向'居中
<style>
* {
padding: 0;
margin:0;
}
div {
width:200px;
height:200px;
background-color:red;
position:absolute; <!--距离上/左均50%,外边距再切掉原有的一半像素即可-->
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
......
<body>
<div></div>
</body>
- 父子关系容器的 '水平&垂直方向'居中(一样的套路)
<style type="text/css">
.parent {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
position: relative; <!--设置相对定位,給子元素当参考-->
}
.child {
width: 200px;
height: 200px;
background-color: green;
position: absolute; <!--一样的套路-->
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
position[absolute] 和 浮动 的区别(都会脱离文档流)
- 实验环境: 两个色块盒子
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
......
<div class="box1"></div>
<div class="box2"></div>
- 使用浮动:红块浮起来,绿块趁机上来
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left; <!--浮动,绿块会趁机挤上来-->
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
......
<div class="box1"></div>
<div class="box2"></div>
- 使用 position:红块浮起来,绿块趁机上来(一样的效果)
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute; <!--一样的效果-->
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
......
<div class="box1"></div>
<div class="box2"></div>
-
区别:当加入文字的时候,区别就很明显了
-
float 文字有环绕效果,不会被覆盖(半脱离)
-
absolute 文字被覆盖了(全脱离)
-
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left; <!--浮动-->
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
......
<div class="box1"></div>
<div class="box2"> <!--新增文字,环绕效果-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit odio ...........
</div>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute; <!--修改之处-->
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
......
<div class="box1"></div>
<div class="box2"> <!--文字被覆盖了-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit odio ...........
</div>
利用锚点实现单页面内部的定位跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul { <!--整个列表固定在浏览器右边,并距离上方100px-->
list-style: none;
position: fixed;
top: 100px;
right: 0;
}
li { <!--列表中的每一项,容器内居中,并加边框-->
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid red;
}
div { <!--示范内容,占比较大的高度,方便演示效果-->
height: 800px;
}
</style>
</head>
<body>
<ul>
<!--利用<a>实现锚点的跳转-->
<li>
<a href="#part1">第一部分</a>
</li>
<li>
<a href="#part2">第二部分</a>
</li>
<li>
<a href="#part3">第三部分</a>
</li>
<li>
<a href="#part4">第四部分</a>
</li>
</ul>
<!--使用id来标识位置-->
<div id="part1">我是第一部分内容</div>
<div id="part2">我是第二部分内容</div>
<div id="part3">我是第三部分内容</div>
<!--最后这块,由于到底部了,所以实际效果,与浏览器顶部会有一段距离,这是正常的-->
<div id="part4">我是第四部分内容</div>
</html>
精灵图
-
将多张图片合成一张图,然后利用 background-position 实现图片定位的技术
-
好处
-
通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度
-
通过整合图片,减少的图片的体积
-
-
案例演示
<!--先搞6个色块,向左浮动起来,然后把色块替换成图片即可-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 103px;
height: 32px;
float: left;
margin: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
<!--把色块替换成图片,开始定位-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 103px;
height: 32px;
float: left;
margin: 10px;
background-image: url(./img/jd.png); <!--背景图片-->
}
.box1 {
background-position: 105px 231px; <!--调试工具开始定位-->
}
.box2 {
background-position: 105px 195px;
}
.box3 {
background-position: 105px 157px;
}
......
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
元素的宽高自适应
- 我们经常希望,元素的大小随着窗口或者子元素的大小,而自动调整,这就是自适应
- width:auto / height:auto
- 或者不指定宽高, 那么css默认就是auto
......
<style>
* {
padding: 0;
margin: 0;
}
div {
/* width: 100px; */
/* width: 100%; 也会占满窗口,那是因为body宽度占满了100%,如果body为500px,就不会占满*/
width: auto; /* 宽度会占满整个窗口 */
height: 100px;
background-color: purple;
}
</style>
......
<div></div>
- 案例演示:导航栏(小块),中间部分(大块),底部(小块)
......
<style>
* {
padding: 0;
margin: 0;
}
.header,.footer {
width: 100%;
height: 50px;
background-color: red;
}
.body {
height: 500px;
background-color: blue;
}
</style>
......
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
<!--当body里面的内容过多,超过body本身的高度时,里面的元素就会溢出,从而影响美观-->
......
.body {
height: 500px;
background-color: blue;
}
li {
height: 100px;
background-color: green;
}
......
<ul>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
</ul>
<!--解决办法:把body的高度设置为自适应即可,不再用固定的500px-->
......
.body {
/* height: 500px; 注释掉即可*/
background-color: blue;
}
li {
height: 100px;
background-color: green;
}
......
<ul>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111</li>
</ul>
<!--问题又来了,当内容比较少的时候,比如列表只有一项内容,此时自适应高度比较高,也不美观-->
......
.body {
background-color: blue;
}
li {
height: 100px;
background-color: green;
}
......
<ul>
<li>111111111111111111</li> <!--只有一行,自适应高度效果不美观-->
</ul>
<!--解决办法,设置最小高度 min-height即可-->
- 拓展延伸
- min-height
- max-height
- min-width
- max-width
伪元素
- 虚伪的元素,并不是真实存在的,表现为其内容鼠标无法选中(而真实元素的内容可以)
- div::after { // 注意写成 div:after 也是可以的,但是不够标准~~~
content:"div后面放置的文本内容"
}
- div::before {
content:"div前面放置的文本内容"
}
- ::first-letter: 定义对象内第一个字符的样式
- ::first-line: 定义对象内第一行文本的样式
- demo示例
<style>
* {
margin: 0;
padding: 0;
}
div::first-letter {
color: red;
}
div::first-line {
background-color: green;
}
div::before { /*content的内容无法被鼠标选中*/
content: "aaa";
}
div::after {
content: "bbb";
}
</style>
......
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus eum molestiae of......</div>
- 实战案例,使用伪元素是解决浮动的最佳方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.content {
width: 200px;
height: 200px;
background-color: purple;
}
.box::after {
/*在父容器box后面添加伪元素,以下写法比较固定*/
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="content"></div>
<script>
</script>
</body>
</html>
......
<!--如果有内容,可以这么写-->
.box::after {
content: 'aaa';
clear: both;
display: block;
width: 0;
height: 0;
}
显示/隐藏元素的两种方法
- display: none;
- display元素消失以后,后面的元素会占用display元素的位置
visibility: hidden;
- visibility元素消失以后,后面的元素不会占用visibility元素的位置
盒子随着窗口的大小而改变(宽高自适应)
html,body {
height: 100%;
}
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100%;
background-color: red;
}
html,body { /*不加这句,盒子是没有高度的,网页上显示不出来*/
height: 100%;
}
</style>
......
<body>
<div class="box">
</div>
</body>
两栏布局案例演示
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.left {
width: 200px;
height: 100%;
background-color: blueviolet;
float: left; /*浮动起来,使left盒子位置靠上来*/
}
.right {
height: 100%;
background-color: burlywood;
margin-left: 200px; /*如果不设置外边距,部分内容会被right盒子覆盖*/
}
</style>
......
<body>
<div class="left"></div>
<div class="right"></div>
</body>
- calc()函数:动态计算长度值
div {
width:calc(100% - 10px)
}
- 注意事项: 运算符前后都需要保留一个"空格",否则计算无效!
- 任何长度值都可以使用calc()计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.left {
width: 200px;
height: 100%;
background-color: blueviolet;
float: left;
}
.right {
height: 100%;
width: calc(100% - 200px); /*默认是减去右边的宽度*/
background-color: burlywood;
float: left; /*如果不浮起来,那么窗口右边会有200px的间隔,浮起来刚好把200间隔填满*/
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<script>
</script>
</body>
</html>
