前端基础之CSS
目录一. CSS语法格式
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
#01 注释写法
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
#02 css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
#03 css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
文件：mycss.css
h1 {
color: red;
}
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
--案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>-->
<!-- h1 {-->
<!-- color: chartreuse;-->
<!-- }-->
<!-- </style>-->
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>老师要上课吗？</h1>
<h2>学生下课了</h2>
<h3 style="color: green">老板好 要上课吗?</h3>
</body>
</html>
mycss.cc
h1 {
color: red;
}
h2 {
color: steelblue;
}
二. CSS 选择器
2.1 基本选择器
- id选择器
- 类选择器
- 元素/标签选择器
- 通用选择器
# id选择器
# 类选择器
# 元素/标签选择器
# 通用选择器
<style>
/*id选择器*/
/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*}*/
/*类选择器*/
/*.c1 { !*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}*/
/*元素(标签)选择器*/
/*span { !*找到所有的span标签*!*/
/* color: red;*/
/*}*/
/*通用选择器*/
/** { !*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}*/
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id是1 的区域设置样式*/
#d1 {
color: chartreuse;
}
/*类选择器，找到class 带有c1的标签*/
.c2 {
color: red;
}
/*找到 标签是span的 修改样式*/
span {
color: aqua;
}
/*通用选择器 所有的都修改为指定样式*/
* {
color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1">div
<p> div里的p </p>
<span>div里的 span </span>
</div>
<div>div2
<p id="d2" class="c2"> div2里的p </p>
<span id="d3" class="c3">div2里的 span </span>
<span id="d4" class="c4">div2里的 span </span>
</div>
</body>
</html>
2.2 组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<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的父亲
...
"""
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
/*后代选择器*/
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!*后代选择器 div下面所有样式 改为红色*!*/
/*div span {*/
/* color: red;*/
/*}*/
/*!*儿子选择器 div下面第一代 改为红色*!*/
/*div >span {*/
/* color: red;*/
/*}*/
/*!*毗邻选择器 同级别紧挨着的下面的第一个*! */
/*div+span {*/
/* color: red;*/
/*}*/
/*弟弟选择器 同级别下面所有的span */
div ~ span {
color: red;
}
</style>
</head>
<body>
<div>
<span> div span </span>
<p>
<span>div p span </span>
<span>div p span </span>
</p>
<span>div span </span>
<span>div span </span>
</div>
<span>span1</span>
<p>ppp</p>
<span>span2 </span>
</body>
</html>
2.3 属性选择器
background-color 背景颜色
color 字体颜色
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*[usename] {*/
/* background-color: red;*/
/*}*/
/*[usename='zhou'] {*/
/* background-color: yellow;*/
/*}*/
span[usename='zhou'] {
background-color: red;
}
</style>
</head>
<body>
<input usename type="text">
<input usename="yu" type="text">
<input usename="zhou" type="text">
<p usename="tank">爱情</p>
<div usename="egon">理想</div>
<span usename="zhou">远方 </span>
</body>
</html>
2.4 分组于嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
2.5 伪类选择器 hover 点击选中
- hover 悬浮态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link { /*访问之前的状态*/
color: blue;
}
a:hover { /*鼠标悬停的状态 悬浮态*/
color: red;
}
a:active { /*鼠标点击不松开的状态 激活态*/
color: red;
}
a:visited { /*访问后的状态*/
color: darkgray;
}
p:hover { /*鼠标悬停的状态 悬浮态*/
color: yellow;
}
input:focus{ /*input框获取焦点(鼠标点了input框)*/
background-color: darkolivegreen;
}
</style>
</head>
<body>
<a href="https://jd.com/">点击可以开启常世</a>
<p>这是美化的p标签</p>
框<input type="text">
</body>
</html>
2.6 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
P:first-letter{ /*设置首个字体的样式*/
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '开始你的表演';
color: blue;
}
p:after { /*在文本结尾 同css添加内容*/
content: '结束了 傻瓜';
color: darkgray;
}
</style>
</head>
<body>
<p>这是一个测试的p标签 用来测试元素选择器</p>
</body>
</html>
2.7 选择器优先级
"""
id选择器
类选择器
标签选择器
行内式
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: coral;
}
.c1 {
color: darkgreen;
}
p {
color: red;
}
</style>
<!-- <link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<!--<p style="color: darkolivegreen">关山难越 谁悲失路人 萍水相逢 尽是他乡客</p>-->
<p id="d1" class="c1" style="color: blue" >关山难越 谁悲失路人 萍水相逢 尽是他乡客</p>
</body>
</html>
三. CSS属性系列
3.1 设置长宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: darkgreen;
height: 300px;
width: 500px;
}
span {
background-color: red;
height: 300px;
width: 500px;
}
</style>
</head>
<body>
<p>这是个p标签 用来设置长宽</p>
<span>这是个 span标签 </span>
</body>
</html>
3.2 字体属性
- 字体加粗 font-weight: bolder;
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或者微信截图功能
也可以多软件结合使用
*/
}
3.3 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
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; !*去除所有样式*!*/
}
a {
text-decoration: none; /*主要用于a标签 去除默认的下划线样式 重要*/
}
#d1 {
text-align: left;
font-size: 16px;
text-indent: 32px; /*设置首行锁进 两格 （需要先设置字体大小 比如设置：16px 缩进两格就是 16px*2）*/
}
</style>
</head>
<body>
<p>这个世界破破烂烂 小猫缝缝补补</p>
<a href="http://www.zhangyuzhou.cn">点我啊</a>
<p id="d1" >你失去一个眼前你非常真爱甚至是失去不起的对象，那么在面临这样一个重大的变故时刻，特别是遭遇断崖性分手或者无缝衔接，你会有一个应激的心理反应，那个你付出了真挚感情并且规划了未来的人从你掌心流失了，这样感觉就像一个炸弹在你的内心猛烈爆发，把你的世界炸的粉碎，你会觉得你的三观崩塌价值扭曲，甚至有一种逼近末日的感觉</p>
</body>
</html>
3.4 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 800px;
width: 800px;
/*background-color: darkgreen; !*背景颜色填充*!*/
/*background-image: url("111.png"); !*设置背景图片 默认铺满*!*/
/*background-repeat: no-repeat; !*设置 不铺满*!*/
/*background-repeat: repeat-x; !*水平铺满 x轴 上方横着*!*/
/*background-repeat: repeat-y; !*垂直铺满 y轴 左方竖着*!*/
/*background-position: center center; !*图片居中 第一个是左 第二个是上*!*/
/*background-position: 400px 200px; !*图片位置 第一个是左右 第二个是上下*!*/
/*
其实浏览器不是一个平面 是一个三维立体的
x轴 水平
y轴 垂直
z轴 指向用户 越大距离用户越近
*/
/*如果出现多个属性名前缀是一样的，一般情况下可以简写 只写前缀即可*/
background: darkgreen url("222.png") no-repeat center center ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.5 背景属性扩展
- background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
height: 600px;
background-color: darkgreen;
}
#d2 {
height: 600px;
background-color: coral;
}
#d3 {
height: 600px;
background-image: url("222.png");
background-attachment: fixed; /*定义背景图片随滚动轴的移动方式 fixed 背景图片不会随着页面的滚动而滚动*/
}
#d4 {
height: 600px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2" ></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
3.6 边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: darkgreen;
border-width: 5px; /*定义边框大小*/
border-style: solid; /*定义边框样式*/
}
#d1 {
height: 400px;
width: 400px;
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: darkgoldenrod solid 10px;*/
}
#d2 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*画圆*/
}
</style>
</head>
<body>
<p>角落那窗口 闻得到玫瑰花香</p>
<div id="d1">反正爱情不就都这样</div>
<div id="d2"></div>
</body>
</html>
3.7 display 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
display: none; /*隐藏标签 不展示到前端页面，并且原来位置也没了，但是还存在于文档上*/
display: inline; /*将标签设置为行内标签的特点*/
}
#d2 {
display: inline; /*将标签设置为行内标签的特点 和上面d1 一行展示*/
}
#s1 {
/*display: block; !*将标签设置成块儿级标签的特点*!*/
display: inline-block; /*标签即可以在一行显示又可以设置长宽*/
}
#s2 {
display: inline-block;
}
#d3 {
visibility: hidden; /*单纯的隐藏 位置还在*/
}
</style>
</head>
<body>
<div id="d1" style="height: 200px; width: 200px; background-color: greenyellow" >dev1</div>
<div id="d3" style="height: 300px; width: 300px; background-color: yellow" >>单纯的隐藏 位置还在</div>
<div id="d2" style="height: 200px; width: 200px; background-color: red" >dev2</div>
<span id="s1" style="height: 200px; width: 200px; background-color: greenyellow" >span2</span>
<span id="s2" style="height: 200px; width: 200px; background-color: red" >span2</span>
</body>
</html>
3.8 透明度属性
opacity: 0.5;
#它不单单可以修改背景颜色的透明度还同时修改字体的透明度
rgba只能影响背景颜色，
而opacity可以修改背景颜色和字体
opacity: 0.5;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
border: 0;
}
#d1 {
height: 400px;
font-size: 100px;
background-color: cornflowerblue;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="d1">这是验证透明度的</div>
</body>
</html>
四. 盒子模型
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
margin
body
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p {*/
/* !*margin: 0; !*上下左右全是0*!*!*/
/* !*margin: 10px 20px; !* 第一个上下 第二个左右*!*!*/
/* !*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*!*/
/* !*margin: 10px 20px 30px 40px; !*上 右 下 左*!*!*/
/*}*/
/*p {*/
/* margin-left: 10px; !*左边*!*/
/* margin-top: 20px; !*上边*!*/
/* margin-right: 30px; !*右边*!*/
/* margin-bottom: 40px; !*下边*!*/
/*}*/
/*边框的阴影*/
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
#dd {
margin: 0 auto; /*上下边距为零 标签的水平居中 只能水平居中*/
border: #111111 solid 3px; /*body 颜色 款式 大小*/
}
#d2 {
margin: 50px;
}
body {
margin: 0;
/*border: 3px solid red;*/
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<p id="d1" style="height: 400px; width: 400px; background-color: yellow">pppp1</p>
<p id="d2" style="height: 400px; width: 400px; background-color: yellow">pppp1</p>
<div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>
</body>
</html>
- 边框的阴影
- 便签P图示
/*p {*/
/* margin-left: 10px; !*左边*!*/
/* margin-top: 20px; !*上边*!*/
/* margin-right: 30px; !*右边*!*/
/* margin-bottom: 40px; !*下边*!*/
/*}*/
- body图示
body {
margin: 10px;
border: 3px solid red;
padding-left: 10px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 50px;
}
或者设置标签内的
#d1 {
border: #111111 solid 3px;
}
五. 浮动 float
5.1 浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
height: 200px;
width: 200px;
background-color: yellow;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: darkgreen;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
5.2 浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 15%;
height: 100px;
background-color: cornflowerblue;
float: left;
}
#d2 {
width: 70%;
height: 100px;
background-color: darkgrey;
float: left;
}
#d3 {
width: 15%;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div id="d1">导航</div>
<div id="d2">内容</div>
<div id="d3">链接</div>
</body>
</html>
5.3 浮动的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: #111111 solid 3px;
}
#d2 {
height: 400px;
width: 400px;
background-color: yellow;
float: left;
}
#d3 {
height: 400px;
width: 400px;
background-color: darkgoldenrod;
float: left;
}
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
5.4 解决浮动问题
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
- 代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: #111111 solid 3px;
}
#d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
#d3 {
height: 200px;
width: 200px;
background-color: darkgoldenrod;
float: left;
}
/*#d4 {*/
/* height: 200px; !*方式一 写一个div把父标签空间撑起来*!*/
/* clear: left; !*方式2 该标签的左边(地面和空中)不能有浮动的元素*!*/
/*}*/
.clearfix:after { /*方式三 定义一个处理浮动的类*/
content: ''; /*内容设置为空*/
display: block; /*将标签设置成块儿级标签的特点 独占一行*/
clear: both; /*该标签的左右两边(地面和空中)不能有浮动的元素*/
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
五. 溢出属性
5.1 溢出问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 300px;
height: 300px;
border: #111111 solid 3px;
}
</style>
</head>
<body>
<p>我将玫瑰藏于身后
我将玫瑰藏于身后，赠你，憎你
我将玫瑰藏于身后，花虽逝，你依旧
我将玫瑰藏于身后，朵朵有你，朵朵不是你！
我将玫瑰藏于身后，没有玫瑰，也在无你。
我将玫瑰藏于身后，纵然献血淋漓，也绝不放手
我将玫瑰藏于身后，风于芳香却将苦涩渗透
我将玫瑰藏于身后，从此不恋往日情，不信世间爱
我将玫瑰藏于身后 鲜血染红双手 爱意不再翻涌 我也放你自由
我将玫瑰藏于身后，风起花落。爱意随风起，花落意难平。
我将玫瑰藏于身后，风起花落，从此鲜花赠自己，纵马踏花向自由
我将玫瑰藏与身后，风起花落，终是桥归桥，路归路，再见已是陌路
我将玫瑰藏于身后，与你同行，不见路远，尽我所能，爱你所有
我将玫瑰藏于身后 偷看你们十指紧扣 含泪后退 百步
我将玫瑰藏于身后，和你走到路的尽头，却忘了来时的路，再见你时，花是花，树是树
我将玫瑰藏于身后，也将喜欢藏于心底，从此之后，玫瑰和你都不敢提及
我将玫瑰藏于身后，将记忆尘封心底，玫</p>
</body>
</html>
5.1 解决溢出
- overflow: scroll 用这个即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 100px;
height: 300px;
border: #111111 solid 3px;
/*overflow: visible; !*默认溢出就是可见 y溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
overflow: auto; /*自动设置成上下滚动条的形式*/
}
</style>
</head>
<body>
<p>我将玫瑰藏于身后
我将玫瑰藏于身后，赠你，憎你
我将玫瑰藏于身后，花虽逝，你依旧
我将玫瑰藏于身后，朵朵有你，朵朵不是你！
我将玫瑰藏于身后，没有玫瑰，也在无你。
我将玫瑰藏于身后，纵然献血淋漓，也绝不放手
我将玫瑰藏于身后，风于芳香却将苦涩渗透
我将玫瑰藏于身后，从此不恋往日情，不信世间爱
我将玫瑰藏于身后 鲜血染红双手 爱意不再翻涌 我也放你自由
我将玫瑰藏于身后，风起花落。爱意随风起，花落意难平。
我将玫瑰藏于身后，风起花落，从此鲜花赠自己，纵马踏花向自由
</p>
</body>
</html>
5.2 溢出应用-用户头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: #4e4e4e; /*body 整个背景填充色*/
}
#d1 {
height: 200px;
width: 200px;
border-radius: 50%; /*body边框形状 画圆*/
background-color: chocolate; /*颜色填充为白色*/
border: white solid 10px; /*设置body 白色 样式 大小*/
margin: 0 auto; /*设置margin大小 居中*/
overflow: hidden; /*溢出属性未显示的直接隐藏*/
}
#d1>img {
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="222.png" alt="">
</div>
</body>
</html>
- 图示
六. 定位
6.1 定位储备知识
-
静态
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解) position: relative
相对于标签原来的位置做移动relative
-
绝对定位(常用) position: absolute;
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用) position: fixed;
相对于浏览器窗口固定在某个位置
eg:右侧小广告
6.2 相对定位
- position: relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
border: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: cadetblue;
left: 50px; /*从左到右 移动*/
top: 50px; /*从上到下 移动*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative; /*相对定位*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
6.3 绝对定位
- position: absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
border: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: cadetblue;
position: relative;
}
#d2 {
height: 200px;
width: 200px;
background-color: red;
left: 100px; /*从左到右 移动100px*/
top: 100px; /*从上到下 移动100px*/
position: absolute; /*绝对定位 相对于父类移动*/
}
</style>
</head>
<body>
<div id="d1">父
<div id="d2">d2</div>
</div>
</body>
</html>
- 图示
6.4 固定定位
- position: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
border: 0;
}
#d4 {
border: #111111 solid 10px; /*border 位置*/
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
}
</style>
</head>
<body>
<div style="height: 1000px; background-color: cadetblue"></div>
<div style="height: 1000px; background-color: yellow"></div>
<div style="height: 1000px; background-color: cornflowerblue"></div>
<div style="height: 1000px; background-color: black"></div>
<div id="d4">回到顶部</div>
</body>
</html>
6.5 验证三种定位是否脱离文档流
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
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>
<style>
body {
margin: 0;
}
.cover {
position: fixed; /*设置固定定位*/
left: 0; /*零代表铺满屏幕*/
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /*设置背景颜色 和透明度*/
z-index: 99; /*设置z轴99 指向用户*/
}
.modal {
position: fixed; /*设置固定定位*/
left: 50%; /*左移动整个屏幕 百分之50*/
top: 50%; /*往下移动整个屏幕 百分之50*/
border: 3px solid; /*body 边框颜色 无需关注整个*/
background-color: white; /*设置背景颜色 白色*/
width: 400px;
height: 200px;
z-index: 100; /*设置z轴 比第二层大即可*/
margin-left: -200px; /*修改margin 位置 标签和标签之间的距离*/
margin-top: -100px; /*因为固定定位的移动 居中的中心点是左上角 所以整个div区域 并非居中
需要调标签和标签之间的距离*/
}
</style>
</head>
<body>
<div>这是最底层的页面显示</div>
<div class="cover"></div>
<div class="modal">
<h>登入窗口</h>
<p>请输入用户名：<input type="text"></p>
<p>请输入密码： <input type="text"></p>
<button>注册</button>
</div>
</body>
</html>
