1.元素显示模式——
块元素：独占一行，宽、高、内外边距可以设置 div h1~h6 li
行内元素：一行多个，宽高、内外边距设置无效 span a
行内块元素：可以一行多个，还可以设置宽高、内外边距 img
2.全局属性——
<!-- title ：鼠标悬停时，提示词-->
<a href="#" title="恭喜你，上天了">去云端</a>
<!-- tabindex : 正数 负数 0 -->
<div title="你中奖了，小可爱~" tabindex="1">我是盒子</div>
<div title="你中奖了，小可爱~" tabindex="2">我是盒子</div>
<!--spellcheck:拼写检查 true false -->
<input type="text" spellcheck="false">
<!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 -->
<form action="#">
<input type="text" name="user" id="">
<button accesskey="l">提交</button>
</form>
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true false-->
<div contenteditable="true">我是一个不允许编辑的盒子</div>
3.行内样式——<div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>
4.内部样式——在head最后添加 <style>编写样式</style>
5.外部样式——文件格式为css，调用需在html文件里head末尾添加<link rel="stylesheet" href="css文件地址">
6.基础选择器——* 选中所有标签，# id选择器，. 类名选择器，
7.基础选择器——ul>li 只选亲儿子，ul li 后代选择器
8.逗号选择器——用逗号隔开，选择全部
9.属性选择器——input[type="text"]
10.伪类选择器——
/* a:link 、a:visited 、a:hover 、a:active */——顺序
/* 伪类选择器：元素在不同状态下的样式 */
/* ：link 为访问的来凝结样式 */
a:link {
color: green;
}
/* 访问之后的样式 */
a:visited {
color: red;
}
/* 获取焦点时的样式 */
a:focus {
color: blue;
}
/* 鼠标悬停时的样式 */
a:hover {
color: pink;
}
/* active 用户点击之后按住鼠标 */
a:active {
background-color: pink;
}
11.结构伪类选择器——
/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
.father .son:nth-child(2) {
background-color: pink;
}
/* 先找.father，再找.father里的.son，然后对.son进行排序 */
.father .son:nth-of-type(2) {
background-color: aqua;
}
12.伪元素选择器——为选中的标签添加内容和格式
p::before {
content: "##3#";
color: pink;
}
p::after {
content: "and you";
color: red;
}
input::placeholder {
color: pink;
}
div::selection {
color: aqua;
}
13.字体样式——
p {
/* 字体大小 字号 */
font-size: 12px;
/* 字体 */
font-family: "微软雅黑";
/* 字体粗细 400:正常 700：加粗 */
font-weight: 700;
/* 字体样式 /
font-style: normal;
}
14.文本缩进——
p {
text-indent: 2em;——缩进当前字体2字符
}
15.文本对齐方式——
div {
/* 对齐方式：text-align 居中的是内容*/
text-align: center;
}
16.文本修饰——
a {
/* 清除a链接默认样式 */
text-decoration: none;
}
ul li:nth-child(1) {
text-transform: uppercase;——内容小写转大写
}
ul li:nth-child(2) {
text-transform: lowercase;——内容大写转小写
}
18.行高——
div {
/* 单行文本借助行高垂直居中 */
line-height: 200px;
}
20.背景样式——
div {
background: pink url(./背景.jpg) no-repeat right bottom;——设置背景各种样式
}
21.列表样式——
li {
/* 去除li默认样式的 */
list-style: none;
list-style: decimal;
}
22.标签模式转化——
pan {
/* 将行内元素转化为行内块元素 */
display: inline-block;
}
23.文本轮廓线——
input {
outline-style: none;——去除默认样式
outline-style: dashed;
/* outline-style: dotted;
outline-style: double; */
outline-color: aqua;——为轮廓添加颜色
/* outline-width: thick; */
/* outline-width: 40px; */
outline: none;
}
24.边框——
div {
width: 300px;
height: 300px;
background-color: pink;——背景颜色
border-width: 3px;——边宽
border-color: rgb(33, 29, 29);——边框颜色
border-style: solid;——边框样式
border-top-left-radius: 50%;
border-top-right-radius: 50px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 20px;
25.合并相邻边框
table {
border-collapse: collapse;——合并边框
border-collapse: separate; ——不合并边框
}
26.颜色——
div {
/* opacity 0-1 0时，只是视觉上看不到，原来位置还在保留
设置透明度的 */
opacity: 0;
}
27.元素隐藏方式——
div {
/* 1、设置透明度隐藏 0-1 保留原来位置*/
opacity: 0;
/*2、 display :none 不保留原来位置*/
display: none;
/* 3、visibility：hidden 保留原来位置*/
visibility: hidden;
}
28.鼠标样式以及放拖拽——
textarea {
/* 防止拖拽 */
resize: none;
/* 鼠标样式 */
cursor: initial;
}
定位
29.绝对定位——
.father {
position: relative;——相对定位（让子元素的定位标准是自己）
width: 600px;
height: 600px;
background-color: aqua;
}
.son1 {
/* 绝对定位会放弃原来的位置 子绝父相 逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/
position: absolute;
left: 90px;
bottom: 40px;
background-color: blue;
/* 显示的优先级 z-index*/
z-index: 2;
}
30.固定定位——
.box1 {
/* 固定定位 相对于可视窗口进行定位 放弃原来位置 */
position: fixed;
top: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}
31. 粘性定位——让某一段文字滑动到一个位置时不再移动
p {
position: sticky;——粘性定位
top: 20px;
background-color: pink;
}
盒子模型
32.盒子模型——
<body>
<!-- 盒子大小： content（内容）+padding（内边距）+border（边框） margin（外边距）不会影响盒子大小 -->
</body>
33.边框——
div {
border: 20px solid black;
}
34.内边距——
div {
width: 200px;
height: 200px;
border: 1px solid black;
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
/* 两个值时，第一个值代表上下的padding值，第二个值代表左右的padding值 */
padding: 10px 50px;
/* 三个值：上 左右 下 */
padding: 10px 40px 50px;
/* 四个值：上 右 下 左 */
padding: 10px 20px 30px 40px;
/* padding的值不能为负值 */
}
34.外边距——
.box1 {
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
/* 上 右 下 左 */
margin: 10px 20px 30px 40px;
/* 实现元素的水平居中 */
margin: 0 auto;
}
35.外边距塌陷——
.father {
/* 1、给父元素加边框 */
border: 1px solid black;
/* 2、给父元素添加内边距 */
padding: 10px;
/* 3、overflow: hidden; 偏方 */
overflow: hidden;
}
36.避免padding（内边距）将盒子撑大——
div {
padding: 30px;
/* 解决padding影响盒子大小 */
box-sizing: border-box;
}
flex布局
37.flex布局——
.box {
display: flex;
/* 改子元素排列方式 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 改变主轴对齐方式 */
/* space-between:两边贴边，中间评分剩余空间 */
justify-content: space-between;
/* space-around：平分在子项的两边 */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* justify-content: center; */
/* 允许换行 */
flex-wrap: wrap;
/* 侧轴单行 */
align-items: center;
/* 侧轴对齐方式 */
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
38.去除默认标签边距——
ul {
margin: 0;
padding: 0;
}
39.设置自己的字体——
@font-face {
font-family: 自取字体名;
src: url(字体地址);
}
div {
font-family: 字体名;——调用字体
}
40.颜色渐变——
div {
width: 300px;
height: 300px;
background-image: linear-gradient(渐变方式, red, pink, green, blue);
background-image: repeating-linear-gradient(渐变方式, yellow, pink, red);
background-image: radial-gradient(red, pink, blue, greenyellow);
}
41.浮动——
img {
/* 文字环绕 */
float: left;——浮动方式
width: 100px;
}
p {
/* 清除浮动 */
clear: both;
}
动画
42.2d转换——
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 移动 */
/* transform: translateX(200px) translateY(100px); */
/* transform: translateY(100px); */
/* 单独写会发生覆盖，复合：x ，y */
/* transform: translate(50px, 50px); */
/* 旋转 */
/* transform: rotateZ(45deg); */
/* 缩放 */
/* transform: scaleX(1.5) scaleY(2); */
/* transform: scale(0.5); */
/* 改原点 对移动无影响，对旋转、缩放有影响*/
transform-origin: top left;——改元素原点
}
43.3d转换——需给父亲元素加上transform-style: preserve-3d;以及perspective
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px auto;
transform-style: preserve-3d;
perspective: 800px;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 移动 */
transform: translateZ(-200px);
/* 旋转 */
transform-origin: left;
transform: rotateX(45deg);
transform: rotateY(45deg);
/* 背部可见性 */
backface-visibility: hidden;
}
44.过渡——元素从一种状态到另一种状态的过程显示出来
div {
width: 100px;
height: 100px;
background-color: pink;
/*transition-property: width, height, background-color;——指定过渡属性的名称
transition-duration: 5s;*/——过渡时间
transition: all 3s ——全部显示3秒完成
}
div:hover {
width: 1200px;
height: 200px;
background-color: green;
}
45.动画——过渡的多次结合
/* 1、定义动画 */
@keyframes 动画名字 {
from {——第一种状态
border-radius: 0;
transform: translateX(0) rotateZ(0);
}
to {——第二种状态
border-radius: 50%;
transform: translateX(1100px) rotateZ(360deg);
}
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* animation-name：调用的动画名字 */
animation-name: 动画名字;
/* animation-duration：动画执行所需时间 */
animation-duration: 3s;
/* animation-delay:动画延迟时间 */
/* animation-delay: 1s; */
/* animation-timing-function 动画方式 */
/* animation-timing-function: steps(12); */
/* 控制动画执行次数 */
animation-iteration-count: infinite;
/* 动画方向 */
animation-direction: alternate;
animation-fill-mode: forwards;
}
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
