pseudo class selector
/* :hover 鼠标悬停 */
a:hover {
/* cursor 鼠标样式 */
cursor: pointer;
font-size: 40px;
}
Struct pseudo-class selector
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: green;
}
/* 从全部属性中排序寻找 */
ul li:nth-child(3) {
background-color: blue;
}
/* 从li（选中属性）中排序寻找 */
ul li:nth-of-type(4) {
background-color: chartreuse;
}
Pseudo-element selector
ul li::before {
content: ">";
}
ul li::after {
content: url();
}
/* input::placeholder 表单提示词 */
input::placeholder {
color: rgb(62, 226, 56);
}
/* ::selection 选中时 */
ul li:nth-child(4)::selection {
color: pink;
}
text related styles
div {
/* width: 300px; */
height: 200px;
background-color: pink;
/* text-indent: 2em; */
/* 文本水平对齐方式 */
text-align: center;
/* overflow: auto; */
/* 行高 单行文本垂直居中 行高=元素高度*/
line-height: 200px;
}
list
ul li {
height: 30px;
list-style: none;
list-style: circle;
}
Element display mode transition
.box {
/* 行内元素无法设置宽、高 转换为行内块元素 */
/* display: none;隐藏元素，脱离文档流 */
display: none;
/* display: inline-block; 将元素转换为行内块元素 */
/* display: inline; 行内元素 */
width: 300px;
height: 300px;
background-color: pink;
}
span {
display: inline-block;
/* display: block; 块元素 */
width: 300px;
height: 300px;
background-color: rgb(15, 105, 66);
}
frame
div {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 10px; */
/* border-width 边框宽度 */
/* border-width: 20px;
border-style: solid;
border-color: rgb(35, 223, 18); */
border: 4px solid black;
/* border-radius: 50%; 边框弧度*/
border-top-left-radius: 40%;
}
Merge Adjacent Borders
table {
/* 合并相邻边框 */
border-collapse: collapse;
}
shadow
div {
width: 300px;
height: 300px;
background-color: pink;
/* box-shadow: 20px 20px 10px 10px black; */
}
p {
text-shadow: red 5px 5px;
}
contour line
input[type="text"] {
outline: none;
outline-style: groove;
}
anti-drag
textarea {
/* 防止文本拖拽 */
resize: none;
/* vertical-align改变与文字的对齐方式 */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
hidden element
.box1 {
/* display: none; 脱离文档流，原来的位置不再保留 */
/* display: none; */
/*visibility: hidden; 元素隐藏，位置保留 */
/* visibility: hidden; */
/* opacity: 0; */
background-color: pink;
}
absolute positioning
.grandfather {
position: relative;
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father {
/* position: relative; */
width: 600px;
height: 600px;
background-color: pink;
margin: 400px;
}
.son {
/* position: absolute; 绝对定位：不保留原来位置 子绝父相 父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
如果都没找到，则相对于浏览器进行定位
*/
position: absolute;
/* top: -100px; */
bottom: -100px;
left: 500px;
width: 100px;
height: 100px;
background-color: aqua;
}
.son2 {
width: 100px;
height: 100px;
background-color: rgb(40, 65, 65);
}
fixed positioning
div {
/* 固定定位:相对于可视区域进行定位 */
position: fixed;
right: 40px;
top: 50%;
width: 100px;
height: 100px;
background-color: pink;
}
sticky positioning
body {
height: 4000px;
}
.one {
position: sticky;
top: 0;
background-color: pink;
}
The inner and outer margins of the box model
</!-- 内边距 --!/>
div {
width: 600px;
height: 600px;
background-color: pink;
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
padding: 30px;
padding: 30px 50px;
padding: 10px 60px 90px;
/* 上，左右，下 */
padding: 10px 30px 60px 90px;
/* 上 右 下 左 */
}
</!-- 外边距 --!/>
ul li {
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span {
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
margin: 40px;
margin: 40px 30px;
margin: 40px 30px 23px;
margin: 40px 2px 34px 40px;
}
Margin collapse problem
</!-- margin塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走
给父元素添加边框
overflow:hidden; -------偏方
--!>
Text overflow solution
div {
width: 800px;
height: 800px;
background-color: pink;
/* overflow: auto; */
/* overflow: hidden; */
/* overflow: visible;s */
}
style inheritance
<!-- css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身更改样式
--!>
<style>
div,
div span,
div a {
font-size: 40px;
}
div {
font-size: 50px;
color: #807474;
/* padding: 13px; */
}
/* css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身更改样式
*/
</style>
<body>
<div>
杀手锏得看懂开始<br>
<span>我是经常都是</span><br>
<a href="#">；的策略模式的流程的</a>
<i>cdjckdd </i>
</div>
</body>
Solve the problem that padding affects the size of the box
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 40px;
border: 2px solid red;
box-sizing: border-box;
}
flex layout
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* 排列方式 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* 主轴上的布局 */
justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
/* 侧轴 */
/* align-items 单行的 align-content：多行的*/
align-items: center;
/* align-items: end; */
align-items: start;
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
positioning supplement
/* z-index 定位中显示的优先级 */
float
.father {
width: 1000px;
/* height: 1000px; */
background-color: pink;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
background-color: blue;
float: left;
/* 浮动，会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时，其父元素的高度发生塌陷 */
}
.son3 {
width: 400px;
background-color: black;
}
Solution to float problem
ul li {
/* float: left; */
float: right;
list-style: none;
margin-right: 20px;
}
/* div {
clear: both;
} */
p {
/* clear 清楚浮动 */
clear: both;
}
无序列表在浮动的同时通过clear：both命令不会改变段落位置
gradient
div {
width: 400px;
height: 800px;
background-image: linear-gradient(to right, green, pink, yellow, red);
}
font icon
去阿里矢量图库收藏字体图标，然后导入自己想加的html中
media query
div {
background-color: pink;
}
@media only screen and (min-width: 320px) and (max-width: 700px) {
div {
background-color: blue;
}
}
通过拖拽网页大小呈现不同的变化
2d animation
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
/* transform: translate(-40px, 40px); */
/* transform: translateX(70px); */
/* transform: translateY(-60px); */
/* 旋转 */
/* transform: rotateZ(40deg); */
/* 复合写法 旋转永远放在最后一个 */
/* transform: translate(100px) rotateZ(45deg); */
/* transform: rotateZ(45deg) translate(100px); */
/* transform: scale(1.5); */
/* transform: scaleX(2); */
/* transform: scaleY(2); */
/* transform: skew(40deg); */
/* 向右下移动100px 旋转45度 缩放1.5 */
transform: translate(100px, 100px) scale(1.5) rotate(45deg);
}
3d animation
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
transform: rotateX(45deg);
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
backface-visibility: hidden;
transform-origin: bottom;
}
over
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
/* transition 谁变化给谁加 */
transition: all 5s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/* backface-visibility: hidden; */
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
animation
@keyframes myMovie {
from {
width: 200px;
background-color: pink;
}
to {
width: 800px;
background-color: aqua;
}
}
@keyframes myfirst {
0% {
width: 200px;
background-color: pink;
}
20% {
width: 400px;
background-color: green;
}
80% {
width: 800px;
background-color: red;
}
100% {
width: 1200px;
background-color: aquamarine;
}
}
div {
width: 200px;
height: 50px;
background-color: aqua;
animation: myMovie 5s infinite alternate steps(4);
animation: myfirst 5s infinite alternate steps(400);
}