复习
- 块标签
- 行内标签
- 盒模型
- ul和ol的区别 去掉列表样式的方法
- 块标签和行内标签的转换
h5
h4和h5的区别
- h4
标签小写 - h5
– 不区分大小写,但是尽量规范
– 语义化标签
<!--排版-->
<header>头部标签</header>
<nav>导航标签</nav>
<section>正文--大段落
<aside>侧标栏</aside>
<article>小段落标签1</article>
<article>小段落标签2</article>
</section>
<footer>页脚--个人信息</footer>
<!--新增的表单-->
<input type="number"><!-- 数字 -->
<input type="email"><!-- 邮箱 -->
<input type="time"><!-- 时间 -->
<input type="date"><!-- 日期 -->
<input type="color"><!-- 颜色 -->
<input type="range"><!-- 范围调节 -->
<!--媒体标签-->
<video src="文件路径" controls="controls" autoplay="autoplay" loop="loop"></video>
<!-- 播放标签 controls是控制 autoplay是自动播放 loop是循环 -->
<audio src="文件路径" ></audio><!-- 音频标签 -->
<!-- 下拉标签 -->
<details>
<summary>标题</summary>
<p>段落</p>
</details>
<!-- 画布标签 配合js使用-->
<canvas class="cn"></canvas>
<script>
var cn=document.getElementsByClassName("cn")[0];
var can=cn.getContext('2d');
can.fillStyle="red";
can.fillRect(100,100,100,100);/*x,y,宽,高*/
</script>
css3新增属性
文字阴影/盒子阴影
<style>
*{
margin:0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: orange;
text-shadow: 5px 5px 5px blue;/*文字阴影 左右偏移 上下偏移 模糊程度 颜色*/
box-shadow: 5px 5px 5px blue;
}
</style>
<!-- 以上是header中内容 以下是body中内容 -->
<div id="box">
this is a box
</div>
边框
border:5px solid #666;
border-color:; /*颜色*/
border-width:5px;/* 大小 */
border-style:;/* 样式 */
border-image:url("路径"); /* 图片 必须设置border!*/
border-radius:5px;
背景
/* 建议使用background:url() norepeat 100px 100px;*/
background-image: ;/* 背景图片 */
background-repeat:repeat/norepeat;/*是否重复*/
background-clip: ;/* 用来做裁剪 */
background-position:;/*定位*/
文字溢出隐藏[容错]
- text-overflow
- white-space
- overflow
三者缺一不可 要强调宽度
#box p{
height: 30px;
width: 100%;
text-overflow: ellipsis;/*溢出文字变成...*/
white-space: nowrap;/*不换行*/
overflow: hidden;/*出界隐藏*/
}
透明底
- opacity:整体透明度一起改变 连字也变透明
opacity:0.3; /*调整透明度 取值在0-1之间 盒子和文字一起改透明度*/
- rgba:仅背景颜色变透明 字不会变透明
background:rgba(0,255,133,0.6);
/*前三个是颜色取值0-255 最后一个是透明度取值0-1*/
图片精灵/雪碧图
把页面所需的图标.图片都在一张图片上显示,通过调整图片的位置展示
优点: 节省空间 减少加载时间
background-position: -110px -110px;
background-origin: /*背景图片的原点*/
background-attachment:fixed; /*页面出现滚动条 是否跟着滚动条滚动 fixed是不滚动*/
弹性盒
占位
一个元素不能又使用弹性盒又使用隐藏
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style>
*{
margin:0;
padding: 0;
}
#box{
width: 100%;
height:400px;
background: #ff9;
display: flex;/*要排列小盒子 要把弹性盒子给父元素*/
flex-direction: row-reverse;/* 排列方向 row默认横向 column竖着排列 column-reverse反着竖着排*/
}
#box>div{
font-size: 30px;
flex-grow: 1;/*分配方式 可简写成flex*/
}
#box>div:nth-child(1){
flex: 0.2;/*占比是20%*/
}
#box>div:nth-child(2){
flex: 0.5;/*占比是50%*/
}
#box>div:nth-child(3){
flex: 0.3;/*占比是30%*/
}
</style>
</head>
<body>
<div id="box">
<div class="innerbox" style="background:pink">111</div>
<div class="innerbox" style="background:blue">222</div>
<div class="innerbox" style="background:green">333</div>
</div>
</body>
变形
- 旋转
<head>
<meta charset="UTF-8">
<title>变形</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
margin:0 auto;
transform: rotate(30deg);
/*rotateX rotateY 以x轴y轴旋转 deg是角度*/
}
body{
perspective: 1000px;/*透视效果*/
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
- 缩放
取值为0-1为缩小 1以上为放大 scaleX:横向缩放 scaleY:纵向缩放 scaleZ
transform: scale(0.5);
- 平移
transform: translate(30px,30px);
- 扭曲
单位是deg角度 正值为向左上扭曲,负值为向右上扭曲 没有z轴扭曲
transform: skew(30deg);
过渡
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
#box{
margin:100px auto;
width: 100px;
height: 100px;
background: red;
transition: 1s ease-in height;
/*过渡1s,加速运行,只有height变化中用到过渡*/
}
#box:hover{/*鼠标经过*/
width: 50px;
height:200px;
}
#box:active{/*鼠标点击 未松开的动作*/
background: purple;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
动画
- 关键帧 @keyframes可以有很多个关键帧,但不能重名
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
#box{
height: 100px;
width: 100px;
margin:0;
background: red;
position: absolute;
animation:run 5s 3s 3 backwards alternate;
/* 关键帧名 运行时间 延迟时间 结束后的状态 往返*/
}
@keyframes run{
0%{left:0px;}
100%{left:500px;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
来源：CSDN
作者：程序员_乐乐今天吃桃子
链接：https://blog.csdn.net/qq_41826265/article/details/103573552