1.背景:
雪碧图:为了减少网页请求图片的次数,将很多小图片放在一个大图片中,通过
background_postion来指定
background-postion:url('xx.png' no-repeat center center)
2.边框
border:1px solid red
none 无边框
dotted 点状虚线边框
dashed 矩阵虚线边框
solid 实线边框
3.display :控制HTML的显示效果
1.none
2.inline
3.block
4.inline-block
display:none 和visibility:hidden 的区别?
都是隐藏页面上的标签
display:none隐藏标签并不会占用位置
visibility:hidden 隐藏标签时同时会占住位置
4.盒子模型:
内容>内填充(padding)>边框(border)>外边距(margin)
5.浮动
1.浮动多用于页面大范围的布局
2.浮动
- left 往左浮动
- right 往右浮动
3.清除浮动的副作用
1.clear
- left 左边不能有浮动元素
- right 右边不能有浮动元素
- both 两把都不能有浮动元素
2.常用clear
.clearfix:after {
content: '';
display:block;
clear:both
}
6.溢出
overflow
- hidden -->隐藏溢出部分
- scroll --> 滚动条
- auto -->浏览器自行处理
圆形头像例子
7.定位
1.相对定位:相对原来的位置做的定位
position:relative
left:
top:
bottom:
right:
2.绝对定位:相对已经定位过的祖先标签做的定位:position:absolute
多用于页面的局部的布局,注意要和定位的祖先标签配合使用
绝对定位和浮动一样,标签都会脱离文档,别的标签可以占用它的位置
3.固定定位:position:fixed
固定定位相对于屏幕固定显示在某个位置
固定定位的元素也是脱离文档的
返回顶部按钮
4.z-index 模态框
8:rgba 与 opacity 的区别
rgba是背景的透明度,opacity是作用于整个标签的透明度
背景:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
.a1 {
height:100px;
100px;
color:red;
background-color:greenyellow;
}
.a2 {
height:600px;
600px;
color:red;
background-color:yellow;
/*background-image:url('123.png'); !*默认全覆盖*!*/
/*background-repeat:no-repeat;*/
/*background-position:right top;*/
/*background: url("123.png") no-repeat center bottom;*/
background:url("123.png") repeat-x center;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position:right bottom;*/
/*background-position:200px 200px;*/
/*background-attachment: fixed;!*背景固定*!*/
}
</style>
</head>
<body>
<div class=a1>div背景</div>
<div class=a2>div背景2</div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style>
.a1 {
height:300px;
300px;
border: 10px solid;
}
.a2 {
height:100px;
200px;
border:3px dashed red
}
.a3 {
height:50px;
100px;
border-left:7px dotted fuchsia;
}
.a4 {
height:300px;
300px;
background-color: deeppink;
border-radius:50%;
}
.a4:hover {
background-color:green;
}
</style>
</head>
<body>
<div class="a1">div边框</div>
<div class="a2">div边框2</div>
<div class="a3">div边框3</div>
<hr>
<div class="a4">div边框4,画圆形</div>
</body>
</html>
display
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.c1 {
height:100px;
200px;
background-color: red;
border:1px solid black;
display:inline-block;
}
.c2 {
height:100px;
100px;
background-color:yellow;
border:1px solid black;
display:block;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<span class="c2"></span>
<span class="c2"></span>
<span class="c2"></span>
</body>
</html>
CSS盒子模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS模型</title>
<style>
.c1 {
height:300px;
300px;
background-color: red;
border: 5px solid black;
padding:30px ;
margin-bottom:50px;
}
</style>
</head>
<body>
<div class="c1">御天荒神</div>
<div class="c1">御天荒神</div>
</body>
</html>
clear清除浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>float浮动</title>
<style>
.body {
margin:0;
}
.top {
border:3px solid black;
}
.c1 {
height:100px;
100px;
background-color:red;
border:3px solid black;
}
.bot {
height:100px;
100%;
background-color:fuchsia;
border: 5px dashed black;
}
.left {
float:left;
}
.right {
float:right;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left c1">御天荒神</div>
<div class="right c1">御天荒神</div>
</div>
<div class="bot">无尽苍穹</div>
</body>
</html>
overflow:溢出处理 :overflow-y,overflow-x 指定滚动条方向
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow溢出</title>
<style>
.c1 {
height:100px;
300px;
background-color:lemonchiffon;
border:1px solid black;
/*overflow:visible;*/
/*overflow:hidden;*/
/*overflow:scroll;*/
overflow:auto;
}
</style>
</head>
<body>
<div class="c1">
倚筝天波观浩渺，苍音掀涛洗星辰；白虹贯日扫魔荡，明玥当空照古今。
<br>
圣愚有道，浪迹无涛；归吾至性，六极天桥。 代表性名言：道玄凛凛现金鎏，奇峰苍苍尽鸿蒙。
<br>
天命之谓性，率性之谓道；天道归一，断极悬桥。 代表性名言：一身紫荆洗因果，命性后道皆率衷。
<br>
一步一罪化，一步一莲华。
无情者伤人命，伤人者不留命。
天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="a"></div>
</body>
</html>
溢出应用实例:头像框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow溢出</title>
<style>
.photo {
height:120px;
120px;
background_color:green;
border:2px solid white;
border-radius:50%;
/*overflow:auto;*/
overflow:hidden;
}
.photo>img {
/*max-100%;*/ /*宽度是父标签的100%*/
100%;
}
</style>
</head>
<body>
<div class="photo">
<img src="123.png" alt="sorry">
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
body {
margin:0;
}
.c1,.c2 {
height:200px;
200px;
}
.c1 {
background-color:red;
}
.c2 {
background-color: fuchsia;
position:relative;
left:200px;
top:-200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body {
margin:0;
}
.c1,.c2,.c3 {
height:150px;
150px;
}
.c1 {
background-color:green;
/*position:relative;*/
}
.c2 {
background-color:red;
position:absolute;
left:150px;
}
.c3 {
background-color:fuchsia;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
文本居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body {
margin:0;
}
.c1 {
height:150px;
150px;
border:1px solid black;
line-height:150px;
text-align:center;
left:20px;
top:30px;
position:fixed;
}
</style>
</head>
<body>
<div class="c1"><b>返回顶部</b></div>
</body>
</html>
模态框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面模态框</title>
<style>
.cover {
position:fixed;
top:0px;
right:0px;
left:0px;
bottom:0px;
/*background-color:rgb(0,0,0);*/
/*opacity:0.1;*/
background-color:rgba(0,0,0,0.4);
z-index:90;
}
.c1 {
color:red;
}
.motai {
height: 400px;
400px;
background-color:white;
z-index:100;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="c1">
一步一罪化，一步一莲华。
<br>
无情者伤人命，伤人者不留命。
<br>
天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="cover"></div>
<div class="motai">
<form action="">
<p><input type="text"></p>
<p><input type="text"></p>
<p><input type="submint"></p>
</form>
</div>
</body>
</html>
rgba 与 opacity 的区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.c1{
color:red;
background-color: rgba(0,0,0,0.5);
}
.c2 {
color:red;
background-color:rgb(0,0,0);
opacity:0.5
}
</style>
</head>
<body>
</body>
</html>
<!DOCTTYE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="c1">
一步一罪化，一步一莲华。
<br>
无情者伤人命，伤人者不留命。
<br>
天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="c2">
一步一罪化，一步一莲华。
<br>
无情者伤人命，伤人者不留命。
<br>
天地玄妙无尽藏，星辰引渡一点光。
</div>
</body>
</html>