1 定位
1.1 相对定位
相对定位没有脱离文档流
定位元素的显示层级比普通元素高
定位元素可以通过margin，float调整位置，但不推荐
包含块：父元素
left和right同时写，右失效
上下同时写，下失效
<head>
<style>
*{
margin: 0;
padding:0;
}
.outer{
width: 500px;
border:1px solid black;
background-color: chocolate;
padding: 20px;
}
.box{
width: 80px;
height: 80px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: brown;
position: relative;
/* 正值离left多少距离 */
left:100px;
bottom:100px;
}
.box3{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
在box2中加入：
float: left;
1.2 绝对定位
绝对定位脱离文档流
绝对定位+浮动：浮动失效
绝对定位+margin：可以但不推荐
包含块：第一个拥有定位的祖先元素，没有就是页面元素
子绝父相：这样父亲就可以管理儿子
子元素想在宽度上和父元素对齐，定位后left：0，right：0，全铺满，top：0，bottom：0
<style>
.outer{
width: 500px;
background-color: aqua;
border: 1px solid red;
padding: 20px;
position:relative;
}
.box{
width: 200px;
height: 100px;
font-size: 20px;
}
.box1{
background-color: blue;
}
.box2{
background-color: rgb(110, 238, 6);
/* 绝对定位脱离文档流，与浮动不同，浮动是文字环绕图片或文字环绕文字，浮动会把3 t出来 */
position:absolute;
}
.box3{
background-color: rgb(248, 17, 232);
}
/* 鼠标碰到盒子，box2盒子往右移动显示出box3 */
.outer:hover .box2{
left:220px;
}
</style>
</head>
<body>
<div class="outer">
<!-- 对box1，box3，outer是包含块 -->
<!-- 对box2，如果outer的css里面有position:relative;那么outer是包含块，否则html是包含块 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
1.3 固定定位
参考点：视口（红色框内部分）
position:fixed;1.4 粘性定位
参考点：第一个有滚动机制的祖先元素
不脱离文档流
粘性定位+浮动：可以但不推荐
粘性定位+margin：可以但不推荐
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
}
.page-header{
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
}
.item{
background-color: #ccc;
}
.first,.second,.third{
background-color: skyblue;
position: sticky;
/* 参考点：离它最近的能滚动的祖先元素 */
/* 此处是content的div */
top: 0px;
}
.body{
height: 2000px;
}
.content{
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="page-header">头部</div>
<div class="content">
<div class="item">
<div class="first">Aa </div>
<h1>a1</h1>
<h1>a2</h1>
<h1>a3</h1>
<h1>a4</h1>
<h1>a5</h1>
<h1>a6</h1>
<h1>a7</h1>
<h1>a8</h1>
</div>
<div class="item">
<div class="first">Ab </div>
<h1>b1</h1>
<h1>b2</h1>
<h1>b3</h1>
<h1>b4</h1>
<h1>b5</h1>
<h1>b6</h1>
<h1>b7</h1>
<h1>b8</h1>
</div>
<div class="item">
<div class="first">Ac </div>
<h1>c1</h1>
<h1>c2</h1>
<h1>c3</h1>
<h1>c4</h1>
<h1>c5</h1>
<h1>c6</h1>
<h1>c7</h1>
<h1>c8</h1>
</div>
</div>
</body>
</html> 效果： 划完一个item内容蓝条换下一个
1.5 定位层级
//通过z-index调整该块的定位层级
z-index：n；同级定位，后来者居上
CSS3
2 浏览器私有前缀
Can I use... Support tables for HTML5, CSS3, etc查浏览器能不能支持css3和h5新特性
Chrome、Edge、Safari浏览器内核：-webkit-
eg：-webkit-border-radius：20px
3 长度单位
rem:根元素字体大小倍数
10vm：视口宽度的10%
10vh：视口高度的10%
4 盒子属性
4.1 怪异盒模型
<head>
<style>
.box1{
width: 200px;
height: 200px;
padding: 100px;
background-color: aqua;
}
.box2{
width: 200px;
height: 200px;
padding: 100px;
box-sizing: border-box;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
4.2 resize
<head>
<style>
.box1{
width: 200px;
height: 200px;
padding: 100px;
background-color: aqua;
/* 水平方向上可以调,也可垂直方向：vertical */
resize: horizontal;
/* resize属性起作用必须有overflow */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
</body> 
4.3 box-shadow
<style>
.box1{
width: 200px;
height: 200px;
background-color: aqua;
margin: 200px;
/* 阴影1，水平|垂直
box-shadow:10px 10px; */
/* 阴影2
box-shadow: 20px 20px red; */
/* 阴影3 ,5px为模糊程度
box-shadow: 20px 20px 5px red; */
/* 阴影4
box-shadow: 20px 20px 5px; */
/* 阴影5 100px为外延值
box-shadow: 20px 20px 5px 100px red ; */
/* 阴影6，inset为内阴影
box-shadow: 20px 20px 5px 100px red inset; */
position: relative;
top: 0;
left: 0;
transition: 1s linear all;
}
.box1:hover{
box-shadow: 20px 20px 5px red ;
top: -1px;
left: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
4.4 opacity
<head>
<style>
.box2{
position: relative;
width: 150px;
}
span{
/* 把文字放到图片上面 */
position: absolute;
/* 左上角 */
top: 0;
left: 0;
color: red;
width: 100%;
background-color: white;
opacity: 0.5;
}
.box2 img{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<diV class="box2">
<img src="./image/favicon.ico">
<span>彭于晏</span>
</diV>
</body>
5 背景属性
5.1 background-origin
5.2 background-clip
<head>
<style>
.box1{
width: 500px;
height: 500px;
background-color: aqua;
background-image: url('./image/landscape.png');
font-size: 100px;
background-clip: text;
/* background-clip: text;生效必需条件 */
color:transparent
}
</style>
</head>
<body>
<div class="box1">盒子测试</div>
</body> 
<head>
<style>
.box1{
width: 500px;
height: 500px;
background-color: aqua;
padding: 50px;
background-image: url('./image/landscape.png');
font-size: 100px;
/* 只留下content内容区的图片 */
background-clip:content-box;
border:5px dotted red;
}
</style>
</head>
<body>
<div class="box1">盒子测试</div>
</body>
5.3 background-size
<head>
<style>
.box1{
width: 500px;
height: 500px;
background-color: aqua;
background-image: url('./image/landscape.png');
/* 1.background-size: 400px 400px; */
/* 2.background-size: 100% 100%;参考父辈的宽高 */
/* 3.background-size: auto;默认 */
background-repeat: no-repeat;
/* contain为等比缩放，让图片的宽或高与容器的宽或高相等，可能不能铺满 */
background-size:contain;
/* 全铺满
background-size:cover; */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
5.3 复合属性
应用：多背景图
<head>
<style>
.box1{
width: 500px;
height: 500px;
border: 2px red solid;
background:url('./123.gif') no-repeat ,
url('./favicon.ico') no-repeat right top;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
6 边框属性
6.1 边框圆角
/* 宽或高的50% */
border-radius: 20%;
/* 圆角，半径为30px */
border-radius: 30px;6.2 边框外轮廓
/* 边框外轮廓 */
outline-offset: 5px;
outline-color: blue;
outline-width: 20px;
outline-style: dotted;7 文本属性
7.1 文本阴影
<head>
<style>
h1{
text-shadow: 50px 50px red;
font-size: 100px;
color: rgb(104, 247, 9);
}
</style>
</head>
<h1>你学废了么</h1>
</body>
7.2 文本换行
<head>
<style>
h1{
width:400px;
height: 400px;
border: 1px red solid;
/* white-space: pre;按原文显示 */
white-space: pre-wrap;
/* white-space: pre-line;与white-space: pre-wrap;作用相同，但忽略文章前后的空格 */
/* white-space: nowrap;不换行 */
}
</style>
</head>
<h1>路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。 </h1>
</body>
7.3 文本溢出
在7.2代码中加入
overflow: hidden;
/* text-overflow生效，overflow不能为visible */
text-overflow:ellipsis;
text-overflow:clip
7.4 文本修饰
<head>
<style>
h1{
width:420px;
height: 400px;
text-decoration: dashed overline;
text-decoration-color: greenyellow;
}
</style>
</head>
<body>
<h1>路上只我一个人，背着手踱着。</h1>
</body>
7.5 文本描边
<head>
<style>
h1{
font-size: 100px;
-webkit-text-stroke: rgb(246, 154, 6) 10px;
color: transparent;
}
</style>
</head>
<body>
<h1>路上只我一个人，背着手踱着。</h1>
</body>
8 渐变
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid black ;
float: left;
margin-right: 50px;
}
/* box1-box5线性渐变 */
.box1{
background-image: linear-gradient(red,yellow,green);
}
.box2{
background-image: linear-gradient(to top right,red,yellow,green);
}
.box3{
/* 逆时针20° */
background-image: linear-gradient(20deg,red,yellow,green);
}
.box4{
/* height: 200px;,0-50px纯红，50-100px变黄，100px-150px变绿 */
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
}
.box5{
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
font-size: 80px;
text-align: center;
line-height: 200px;
color: transparent;
background-clip: text;
}
/* box6-box10 是径向渐变 */
.box6{
/* 从圆心（盒子中心点）开始，向外是红色黄色绿色 */
background-image: radial-gradient(red,yellow,green);
}
.box7{
/* 圆心在右上角 */
background-image: radial-gradient(at right top,red,yellow,green);
}
.box8{
/* 200px是横向的 */
background-image: radial-gradient(at 200px 50px,red,yellow,green);
}
.box9{
/* 10px是半径，从圆心向外算距离，10px以内都是红色 */
background-image: radial-gradient(red 10px,yellow 100px,green 200px);
}
.box10{
/* 150px 50px表示长半径，短半径，椭圆 */
background-image: radial-gradient(150px 50px at 200px 50px,red,yellow,green);
}
.box11{
/* 重复渐变：在没有发生渐变的区域，重新开始渐变 */
/* 参考box4 */
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
}
.box12{
background-image: repeating-radial-gradient(red 10px,yellow 100px,green 200px);;
}
.box13{
background-image: repeating-linear-gradient(transparent 0,transparent 29px,gray 30px);
}
.box14{
width: 200px;
height: 200px;
border-radius: 50%;
background-image:radial-gradient(at 80px 80px,white,gray);
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5">你学废了么</div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></div>
<div class="box box14"></div>
</body>
</html> 
9 字体
9.1 web字体
在网上下载一个字体，导入代码文件夹中
<head>
<style>
@font-face{
font-family: "这是什么字体";
src: url('./font1/HeFengShuDaoZhaoHeFeiLongTi-Shan\(GEETYPE-FeilongGBT-Flash\)-2.ttf');
}
h1{
font-size: 100px;
font-family: "这是什么字体";
}
</style>
</head>
<body>
<h1>沿着荷塘，是一条曲折的小煤屑路。</h1>
缺点;字体占用空间大
将下列文件放入代码font文件夹：
打开demo.html
将@font-face{}复制到style标签中
更改url，路径前加font文件夹路径
<head>
<style>
@font-face{
font-family: "这是什么字体";
src: url('./font1/HeFengShuDaoZhaoHeFeiLongTi-Shan\(GEETYPE-FeilongGBT-Flash\)-2.ttf');
}
/* 高兼容性写法 */
@font-face {
font-family:"webfont123";
font-display: swap;
src: url('./font2/webfont.eot'); /* IE9 */
src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./font2/webfont.woff2') format('woff2'),
url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
h1{
font-size: 100px;
font-family: "这是什么字体";
}
h2{
font-family: "webfont123";
font-size: 100px;
}
h3{
font-size: 100px;
}
</style>
</head>
<body>
<h1>沿着荷塘，是一条曲折的小煤屑路。</h1>
<h2>执子之手，将子拖走!子若不走，拍晕了继续拖走!</h2>
<h3>执子之手，将子拖走!子若不走，拍晕了继续拖走!</h3>
</body> 
9.2 字体图标
iconfont-阿里巴巴矢量图标库点击icon
10 2D变换
10.1 位移
<head>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px black solid;
margin: 0 auto;
margin-top: 200px;
position: relative;
}
.inner{
width: 60px;
height: 60px;
background-color: aqua;
/* 50%是自身width的50% */
/* 水平位移
transform: translateX(50%); */
/* /垂直位移
transform: translateY(50%); */
/* 只有后者transform: translateY(50%); 有效果
transform: translateX(50%);
transform: translateY(50%); */
/* 水平+垂直位移
transform: translate(20px,20px); */
position: absolute;
/* 此时50%相对于父元素的50% */
top:50%;
left:50%;
/* 基于上面代码垂直居中法一：
margin-left: 30px;
margin-top: 30px; */
/* 位移百分比说的是自己 */
/* 基于上面代码垂直居中法二 */
transform:translate(-50%,-50%)
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
10.2 缩放
/* ()中数值>1放大，<1缩小，1表示不缩放 */
transform: scale();
transform: scaleX();
transform: scaleY();10.3 旋转
/* 2D旋转，30deg顺时针旋转30° */
/* transform: rotate(30deg)写一个值相当于transform: rotateZ(30deg) */
transform: rotate(30deg)10.4 多重变换
基本代码：
<head>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px black solid;
margin: 0 auto;
margin-top: 200px;
}
.inner{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>inner{}中添加：
transform: translate(100px,100px) scale(0.5);
transform: scale(0.5) translate(200px,200px) ;可以理解为缩放0.5，位移也减少0.5倍，实际移动的是100px
transform: translate(100px,100px) rotate(30deg);
transform: rotate(30deg) translate(100px,100px) ;坐标系发生变化
10.5 改变旋转原点
/* 旋转原点在左上角 */
transform-origin: left top;
/* 离盒子左上角各50px */
transform-origin:50px 50px;
/* 25%指的是父元素宽高的25% */
transform-origin:25% 25%;
/* 原点只在左上角x轴变化50px */
transform-origin:50px;
/* 绕盒子左边中点转 */
transform-origin:left;
/* 改变原点对位移没有影响，对放缩有影响 */
transform-origin: left top;
/* 原点在左上，原点不动，缩小放大以对角线形式靠近或远离原点 */
transform:scale();
本文含有隐藏内容，请 开通VIP 后查看