CSS
css
【1】为什么要学习CSS？
HTML画页面--》这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面---》CSS
CSS的作用：修饰HTML页面
用了CSS之后，样式和元素本身做到了分离的效果。---》降低了代码的耦合性
【2】HTML和CSS的关系？
先有HTML，先有页面，修饰页面--》CSS
【3】CSS名字：
CSS：cascading style sheets (层叠样式表)
层叠：样式的叠加
样式表：各种各样样式的集合
注释
/* 注释 */
语法格式
选择器
{
属性1：值1;
属性2：值2;
属性3：值3;
属性4：值4;
}
-
三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
2.link标签引入外部css文件(最正规的方式 解耦合)
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
方式一:
# 内部样式:
head标签中写一下内容:
<style>
div{
color:green;
background-color: black;
}
</style>
方式二:
# 行内样式(内联样式)
<div style="color:yellow;">
床前明月光,地上鞋三双
</div>
方式三(常用):
# 外部样式
第一步:创建一个css文件
第二步:在html文件中引入:<link rel="stylesheet" href="test.css(路径)"> <!-- 引入css文件 -->
第三步:css文件中样式的写法
div{color:green;xx:xx;...}
基本选择器
id选择器
类选择器.
元素/标签选择器
通用选择器
元素选择器(标签名)
p {color:"red";}
id选择器
按照id属性来找到对应的标签
id属性对应的值(css属性: 属性值)
<div id="d1" class="c1">
床上明月光, 疑是地上霜
</div>
# + d1{color:red;}
类选择器
.class属性对应的值{css属性: 属性值}
<div id="d2" class="c2">
举头望明月, 低头思故乡
</div>
. + c2{color:red;}
<style> /*id选择器*/ /*
#d1 {
!*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*
}*/
/*类选择器*/ /*
.c1 {
!*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}
*/
/*元素(标签)选择器*//*
span {
!*找到所有的span标签*!*/
/* color: red;*/
/*}
*/
/*通用选择器*/
/** {
!*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}
*/
</style>
组合选择器
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p> <span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代 p是div的儿子 p里面的span是p的儿子 是div的孙子 div是p的父亲 ...
# 后代选择器 " "
# 儿子选择器 ">"
# 毗邻选择器 "+"
# 弟弟选择器 "~"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*关系选择器:
* 后代选择器：只要是这个元素的后代，样式都会发生变化
* div下面的所有h1标签样式都会改变
*/
/*div h1{
color: red;
}*/
/*关系选择器：子代选择器
只改变子标签的样式*/
div>h1{
color: royalblue;
}
span>h1{
color: yellow;
}
</style>
</head>
<body>
<div>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<span>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
</span>
</div>
</body>
</html>
儿子选择器
.c1>a{color:green}
# 选择 class属性 c1下的第一个a标签
毗邻选择器
.c1+p{color:green}
# 选择 class属性 c1紧挨着的下面的p标签
弟弟选择器
.c1~p{color:green}
# 选择 class属性 c1下面的所有p标签
属性选择器
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*属性选择器*/
input[type="password"]{
background-color: red;
}
input[type="text"][value="zhaoss1"]{
background-color: yellow;
}
</style>
</head>
<body>
<form>
用户名：<input type="text" value="zhaoss1" />
用户名2：<input type="text" value="zhaoss2" />
密码：<input type="password" value="123123" />
<input type="submit" value="登录" />
</form>
</body>
</html>
[xxx]{color:red}
# 找到有xxx属性的所有标签
[xxx='p2']{color:red}
# 找到有xxx属性并且属性值为p2的所有标签
p[title]{color:red}
# 找到所有有title属性的p标签
p[title='p2']{color:red}
# 找到所有有title属性且值为p2的p标签
分组与嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
伪类选择器
a:link{color:red}
# a标签访问前设置样式
a:active{color:green}
# a标签鼠标点下去时显示的样式
a:visited{color:pink}
# a标签访问后显示的样式
div:hover{background-color:green}
# 鼠标悬浮到div标签时显示的样式
input:focus{background-color:orange}
# input标签捕获光标时的样式显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
-
伪元素选择器
div:first-letter{color:red;font-size:40px}
# 文本首字母设置(括号内为颜色和字体大小)
div:before{content:"?";color:red}
# 在文本前添加 红色的 "?"
div:after{content:"?";color:red}
# 在文本后添加 红色的 "?"
p:first-letter { 第一个字
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容 不能选中*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
-
选择器优先级
id选择器
类选择器
标签选择器
行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.选择器相同 书写顺序不同
从上向下覆盖 行内最优先
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: aqua;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
css属性
CSS样式
高度宽度
width 宽度
height 高度
块级标签能设置高度宽度, 内联标签不能设置高度宽度, 内联标签的高度宽度由标签内部的内容来决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 200px;
background-color: purple;
}
span{
height: 100px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div>div1</div>
<span>span1</span>
</body>
</html>
字体属性
{font-family:'宋体','楷体'},
# 从左向右找浏览器能够支持的字体
{font-size:100px}
# 设置字体大小, 默认字体大小是16px
{font-weight:bold;}
# 加粗
{font-weight:normal;}
# 标准(默认)
{font-weight:bolder;}
# 更粗
{font-weight:lighter;}
# 更细
{font-weight:100~900;}
# 设置具体粗细,400等同于normal, 700等同于bold
{font-weight:inherit;}
# 继承父元素字体的粗细度
{color: red}
{color: #668B8B}
# 十六进制, 前两位代表红, 中两位代表绿, 后两位表示蓝, F是最高基表, 0表示最低级别(无色)
{color: rgb(255,0,0)}
# 红绿蓝参数, 最高255, 最低0
{color: rgba(255,0,0,0.5)}
# 第四个值为alpha, 指定了色彩的透明度, 范围为 0.0 ~ 1.0 之间
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
文字属性
文字对齐:
text-align 属性规定元素中的文本的水平对齐方式. (letter-spacing)
{text-align: center;}
# 居中对齐
{text-align: right;}
# 右对齐
{text-align: left;}
# 左对齐(默认值)
{text-align: justify;}
# 两端对齐
垂直对齐的方式.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
line-height:200px;
}
</style>
</head>
<body>
<div>
<span>
xxxxx
</span>
</div>
</body>
</html>
text-decoration 属性用来给文字添加特殊效果
{text-decoration: none}
# 定义标准的文本(默认)
{text-decoration: underline}
# 定义文本下的一条线
{text-decoration: overline}
# 定义文本上的一条线
{text-decoration: line-through}
# 定义穿过文本的一条线
{text-decoration: inherit}
# 继承父元素的 text-decoration属性的值
首行缩进
将段落的第一行缩进 32像素(2格, 在页面上一个字默认大小为16px)
p{text-indent:32px}
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*两端对齐*!*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*text-decoration: none;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
背景图片
{background-color: blue}
# 设置背景颜色
{background-image: url("")}
# 设置背景图片, url属性值为图片路径
{background-position: right bottom}
# 图片位置
{background-position: 100px 50px}
# 图片位置 100px是距离左边的距离, 50px是距离上面的位置
{background-repeat: repeat}
# 背景图片沿着x轴和y轴重复平铺, 铺满整个包裹它的标签
{background-repeat: repeat-x}
# 背景图片只在水平方向上平铺
{background-repeat: repeat-y}
# 背景图片只在垂直方向上平铺
{background-repeat: no-repeat}
# 背景图片不平铺
简写方式:
{background: yellow url("") no-repeat 100px 50px}
# 颜色, 背景图片路径, 是否平铺, 图片位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
边框
边框属性
{border-style: none}
# 设置无边框样式
{border-style: dotted}
# 设置点状虚线边框样式
{border-style: dashed}
# 设置矩形虚线边框样式
{border-style: solid}
# 设置实线边框样式
{border-color:red}
# 设置颜色
{border-width: 10px}
# 设置宽度
简写形式:
{border: 10px solid yellow}
四个边框也可以单独设置:
{border-top:10px solid yellow;
border-right:none;
border-bottom:10px dashed red;
border-left:10px dotted blue}
设置圆角
{border-radius: 5%}
# 设置成长或高的一半即可得到一个圆形(50%)
{border-radius: 10px}
# 也可以设置成具体数值
圆形头像实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border-radius: 50%;
border:1px solid red;
overflow: hidden;
}
div img{
width: 100%;
/*height: 100%;*/
}
</style>
</head>
<body>
<div class="c1">
<img src="图片路径" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right-width: 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以随意写*/
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>穷人 被diss到了 哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>
display属性
{display:none}
# HTML文档中元素存在, 但在浏览器中不现实, 一般用于配合JavaScript代码使用
{display:block}
# 默认占满整个页面宽度, 如果设置了指定宽度, 则会用margin(外边距)填充剩下的部分
{display:inline}
# 按行内元素显示, 此时再设置元素的width, height, margin-top, margin-bottom和float属性都不会有什么影响
{display:inline-block}
# 使元素同时具有行内元素和块级元素的特点
# {display:none}与{visibility:hidden}的区别:
{visibility:hidden} 可以隐藏某个元素, 但隐藏的元素仍需占用与未隐藏之前一样的空间. 也就是说, 该元素虽然被隐藏了，但仍然会影响布局.
{display:none} 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
display: none; !/*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
display: inline; !/*将标签设置为行内标签的特点*!*/
}
#d2 {
display: inline;
}
#d1 {
display: block; !/*将标签设置成块儿级标签的特点*!*/
}
#d2 {
display: block;
}
#d1 {
display: inline-block;
}
#d2 {
display: inline-block; !/*标签即可以在一行显示又可以设置长宽*!*/
}
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>
<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>
<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>
<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>
<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>
<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*将所有元素的样式：外边距，边框，内边距全部设置为0*/
*{
margin: 0px;
border: 0px;
padding: 0px;
}
#outer{
width: 440px;
height: 450px;
background-color: lightskyblue;
margin-left: 100px;
margin-top: 100px;
padding-top: 50px;
padding-left: 60px;
}
#mydiv{
width: 170px;
height: 150px;
background-color: pink;
padding-top: 50px;
padding-left: 30px;
}
</style>
</head>
<body>
<div id="outer">
<div id="mydiv">我是div</div>
</div>
</body>
</html>
浮动
1.浮动原理
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
2.浮动的语法：
3.利用代码感受浮动效果：
先设置一个大的div，然后里面放入三个小的div:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--外层div-->
<div style="background-color: pink;">
<div id="div01" style="width: 100px;height: 100px;background-color: chartreuse;">11</div>
<div id="div02" style="width: 200px;height: 200px;background-color: coral;">22</div>
<div id="div03" style="width: 300px;height: 300px;background-color: yellow">33</div>
</div>
</body>
</html>
效果：（没有任何浮动）
然后先给绿色div加上浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--外层div-->
<div style="background-color: pink;">
<div id="div01" style="width: 100px;height: 100px;background-color: chartreuse;float: left;">11</div>
<div id="div02" style="width: 200px;height: 200px;background-color: coral;">22</div>
<div id="div03" style="width: 300px;height: 300px;background-color: yellow">33</div>
</div>
</body>
</html>
效果：
再给橙色div添加浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--外层div-->
<div style="background-color: pink;">
<div id="div01" style="width: 100px;height: 100px;background-color: chartreuse;float: left;">11</div>
<div id="div02" style="width: 200px;height: 200px;background-color: coral;float: left;">22</div>
<div id="div03" style="width: 300px;height: 300px;background-color: yellow">33</div>
</div>
</body>
</html>
效果：
再给黄色div设置浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--外层div-->
<div style="background-color: pink;">
<div id="div01" style="width: 100px;height: 100px;background-color: chartreuse;float: left;">11</div>
<div id="div02" style="width: 200px;height: 200px;background-color: coral;float: left;">22</div>
<div id="div03" style="width: 300px;height: 300px;background-color: yellow;float: left;">33</div>
</div>
</body>
</html>
现在在三个div下面再加上一个紫色div：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--外层div-->
<div style="background-color: pink;">
<div id="div01" style="width: 100px;height: 100px;background-color: chartreuse;float: left;">11</div>
<div id="div02" style="width: 200px;height: 200px;background-color: coral;float: left;">22</div>
<div id="div03" style="width: 300px;height: 300px;background-color: yellow;float: left;">33</div>
</div>
<div style="width: 500px;height: 500px;background-color: blueviolet;"></div>
</body>
</html>
解决浮动的影响
方式1：
给浮动的父节点加入一个属性overflow:hidden
方式2：
给父节点加一个高度，让粉色div“撑起来”
方式3：
被影响的元素紫色div：给它加入一个属性。
方式4：
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
给外层div加class="clearfix"
clear不允许浮动
{clear:left}
# 在左侧不允许浮动元素
{clear:right}
# 在右侧不允许浮动元素
{clear:both}
# 在左右两侧均不允许浮动元素
{clear:none}
# 默认值, 允许浮动元素出现在两侧
{clear:inherit}
# 规定从父元素继承clear属性值
溢出属性overflow
overflow:visible 默认值, 内容不会修剪, 会呈现在元素框之外
overflow:hidden 内容会被修剪, 并且其余内容不可见
overflow:scroll内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容
overflow:auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容
overflow:inherit规定应该从父元素继承overflow属性的值
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
定位
【1】position 属性指定了元素的定位类型。
【2】静态定位：（static）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--静态定位：
如果我们不写position属性的话，相当于默认效果就是静态定位。
静态效果：就是元素出现在它本该出现的位置。一般使用静态定位可以直接省略不写。
-->
<img src="img/java核心技术.jpg" style="position: static;"/>
</body>
</html>
【3】相对定位：（relative）
相对元素自身所在的原来的位置进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--相对定位：
相对元素自身所在的原来的位置进行定位。
可以设置 left,right,top,bottom四个属性
效果：在进行相对定位以后，元素原来所在的位置被保留了，被占用了--》保留站位其他元素的位置不会发生移动
一般情况下，left和right不会同时使用 ,选择一个方向即可.top和bottom不会同时使用,选择一个方向即可
优先级：左上>右下
-->
<div style="width: 500px;height: 500px;background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;position: relative;bottom: 10px;right: 20px;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
</div>
</body>
</html>
相对定位的应用场合：
（1）元素在小范围移动的时候
（2）结合绝对定位使用
再说一个属性：z-index
设置堆叠顺序，设置元素谁在上谁在下。
注意：z-index属性要设置在定位的元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--相对定位：
相对元素自身所在的原来的位置进行定位。
可以设置 left,right,top,bottom四个属性
效果：在进行相对定位以后，元素原来所在的位置被保留了，被占用了--》保留站位其他元素的位置不会发生移动
一般情况下，left和right不会同时使用 ,选择一个方向即可.top和bottom不会同时使用,选择一个方向即可
优先级：左上>右下
-->
<div style="width: 500px;height: 500px;background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;position: relative;left: 10px;z-index: 10;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;position: relative;bottom: 10px;right: 20px;z-index: 90;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
</div>
</body>
</html>
【4】绝对定位：（absolute） 会产生浮动 参照父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
background-color: pink;
margin-left:300px;
}
#div01{
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
left: 30px;
top: 50px;
}
#div02{
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div id="outer">
<div id="div01">111</div>
<div id="div02">222</div>
</div>
</body>
</html>
暂时来说看到的效果：蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色div移动上去了！
实际开发中，我们往往让蓝色div在粉色div中发生位移效果：
配合定位来使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
background-color: pink;
margin-left:300px;
position: relative;/*直接设置一个相对定位*/
}
#div01{
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
left: 30px;
top: 50px;
}
#div02{
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div id="outer">
<div id="div01">111</div>
<div id="div02">222</div>
</div>
</body>
</html>
总结：
当给一个元素设置了绝对定位的时候，它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直到找到body了也没有定位，那么就相对body进行变化，如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生变化。无论是上面的哪一种，都会释放原来的位置，然后其他元素会占用那个位置。
开发中建议使用：父级节点relative定位，子级节点使用绝对定位。
【5】固定定位：（fixed） 参照浏览器
应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mydiv{
width: 50px;
height: 400px;
background-color: cadetblue;
/*固定定位*/
position: fixed;
right: 0px;
top: 300px;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
</body>
</html>
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
z-index模态框
越大的越上显示
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
练习
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="blog_left">
<div class="blog_picture">
<img src="1.jpg" alt="">
</div>
<div class="blog_name">诺克萨斯之手的博客</div>
<div class="blog_msg">个人觉得需要加强一下诺手</div>
<div class="blog_link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微信</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog_yuyan">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div class="blog_right">
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
<div class="article">
<div>
<span class="article_title"article >重金求加强</span>
<span class="article_time">2021.2.8</span>
</div>
<div class="article_msg">重金求加强，每次都让砍，都快不能玩了</div>
<hr>
<div>
<span>#Pyhon</span>
<span>#Javacript</span>
</div>
</div>
</div>
</body>
</html>
/*这是博客园首页的样式文件*/
/*通用样式*/
body {
background-color: #eeeeee;;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
.blog_left{
float: left;
width: 20%;
height: 100%;
position: fixed;
background-color: #4e4e4e;
}
.blog_picture{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 20px auto;
overflow: hidden;
}
.blog_name,.blog_msg{
font-size: 18px;
color: aqua;
text-align: center;
}
.blog_link,.blog_yuyan{
font-size: 24px;
}
.blog_link a,.blog_yuyan a{
color: darkgray;
}
.blog_link a:hover,.blog_yuyan a:hover{
color: white;;
}
.blog_link ul,.blog_yuyan ul{
text-align: center;
margin-top: 100px;
}
/*右侧样式*/
.blog_right{
float: right;
width: 80%;
height: 1500px;
background-color:lemonchiffon;
}
.article {
background-color: darkcyan;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.article_title{
font-size: 36px;
margin: 20px 40px 10px 10px;
border-left: 5px solid red;
}
.article_time{
float: right;
font-size: 18px;
margin: 20px 20px 10px 10px;
}
.article_msg{
font-size: 18px;
text-indent: 30px;
}
浙公网安备 33010602011771号