python全栈开发 * background 定位 z-index * 180813
Posted 吉喆嚞吉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python全栈开发 * background 定位 z-index * 180813相关的知识，希望对你有一定的参考价值。
I back-ground
一.颜色的表示:
1.单词
2.rgb表示法
rgb:红色 绿色 蓝色 三原色
光学显示器每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
(1).255 说明是纯色.
(2)黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的
(3)白色：
background-color: rgb(255,255,255);
(4)颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);
3.十六进制表示法
二.background-color属性表示背景颜色
三.background-img:表示设置该元素的背景图片(那么发现默认的背景图片，水平方向和垂直方向都平铺)
四.background-repeat:表示设置该元素平铺的方式
(一).属性值
1.repeat 默认。背景图像将在垂直方向和水平方向重复。
(1)background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置
(2)属性值:
值 描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
注意:如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。
***:如果是正值调整背景图片的位置;
***:如果是负值在一张大图上抠小图.
2.repeat-x 背景图像将在水平方向重复
3.repeat-y 背景图像将在垂直方向重复
4.no-repeat 背景图像将仅显示一次
5.inherit 规定应该从父元素继承 background-repeat 属性的设置
(二).精灵图技术;
1.CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，
然后利用css的背景定位来显示需要显示的图片部分
2.CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
3.使用雪碧图的好处:
(1)、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
(2)、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
(3)、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
(4)、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
4.不足：
1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
5.我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我
们的banner图都会比这个大，
那么我们可以此属性来制作通天banner。
background: red url(‘./images/banner.jpg‘) no-repeat center top;
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.cont{
width:100%;
height:1000px;
}
.广告{
width:200px;
height:200px;
background-image:url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
background-repeat:no-repeat;
border:1px solid black;
background-position:0 -200px;
background-attachment:fixed;
}
</style>
</head>
<body>
<div class="cont">
<div class="广告">
</div>
</div>
</body>
五.background-attachment
设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动
II Iconfont(字体图标)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face {font-family: ‘iconfont‘;
src: url(‘iconfont.eot‘);
src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘iconfont.woff‘) format(‘woff‘),
url(‘iconfont.ttf‘) format(‘truetype‘),
url(‘iconfont.svg#iconfont‘) format(‘svg‘);
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
III 定位
定位有三种： 相对定位 绝对定位 固定定位
一.相对定位:
1.定义:相对于自己原来的位置定位
2.现象:
(1).如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
(2).设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
3.特性:
1.不脱标
2.形影分离
3.老家留坑（占着茅房不拉屎，恶心人）
4.用途:
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
5.参考点;
自己原来的位置做参考点。
6.示例:微调元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
position: relative;
top: -5px;
}
input{
font-size: 30px
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<!-- <img src="../day49/images/2.jpg" > -->
<input type="text">
</body>
</html>
二.绝对定位;
1.特性:
(1).脱标
(2).做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高
2.参考点;
(1)单独一个绝对定位的盒子
* 当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
** 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置
(2)以父辈盒子作为参考点
*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
**果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
***不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
3.作用.
页面布局
4.绝对定位的盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
.father{
width:100%;
height:1000px;
background-color: wheat;
position:relative;
top:30px;
border:1px solid black;
}
.child1{
width:200px;
height:200px;
background-color:blue;
position:absolute;
top:50px;
left:50%;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<!--<div class="child2"></div>-->
</div>
</body>
</html>
注意:
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
20 }
三.固定定位;
固定当前的元素不会随着页面滚动而滚动
1.特性:
(1).脱标
(2).遮盖，提升层级
(3).固定不变
2.参考点:
(1).设置固定定位，用top描述。那么是以浏览器的左上角为参考点
(2).如果用bottom描述，那么是以浏览器的左下角为参考点
3.作用:
(1).返回顶部栏
(2).固定导航栏
(3).小广告
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
.box1{
width:200px;
height:200px;
background-color:pink;
position:fixed;
bottom:50px;
right:5px;
}
.box2{
width:500px;
height:1000px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
四.z-index
特性:
1.z-index 值表示谁压着谁，数值大的压盖住数值小的
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，
谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tianliang{
width: 300px;
height: 300px;
background-color: green;
position: relative;
z-index: 2;
border-radius: 50%;
}
.lin{
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
z-index: 3;
}
.sendie{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 280px;
left: 350px;
z-index: 2;
}
.timi{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: -50px;
left: 350px;
}
</style>
</head>
<body>
<div class="tianliang">
<div class="sendie"></div>
</div>
<div class="lin">
<div class="timi"></div>
</div>
</body>
</html>
以上是关于python全栈开发 * background 定位 z-index * 180813的主要内容，如果未能解决你的问题，请参考以下文章