目录
css
css的三大特性
层叠性
一个标签可以有多个css样式
浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到元素上，样式的层叠规则按照样式的声明顺序来层叠，就近原则
前提：选择器必须是同一种
样式不冲突，不会层叠
继承性
子标签会继承父标签的某些样式
比如文本颜色和字号
优先级
权重
- 继承0---最低
- 行内样式100
- 权重相同，就近原则
- !important命令，无限大
css权重公式
| 选择器 | 权重 |
|---|---|
| 继承、* | 0,0,0,0 |
| 标签选择 | 0,0,0,1 |
| 类、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| !important | 无穷大 |
| width,height | 大于无穷大 |
div ul li ————0,0,0,3(权重相加)
li————0,0,0,1
权重不能被继承
贡献值是没有进位
!important、如果同时有max-width,max-height,!important不管用
常用的单位
px
像素，最常用
em
绝对单位，由父级的字号决定，比如说父级的字号16px，我们可以设置成2em（32px）
rem
绝对单位，由整个html的字号决定的，当我们改变了浏览器的字号设置，页面的字号也会发生改变
百分比
相对于父元素的比例
字体
p {
/* 字体大小 */
font-size: 20px;
/* 字体样式 */
font-style: normal;
/* 字体粗细 */
font-weight: 100;
/* 字体修饰 */
text-decoration: underline;
/* 字体 */
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
/* 复合属性 */
/* font:30px italic bold; */
}
背景
div{
/* 背景颜色 */
background-color: skyblue;
width: 200px;
height: 200px;
/* 背景图片 */
background-image: url();
background-size: contain;
background-position: center ;
}
案例（模拟360图片）
<style>
div ul li {
list-style-type: circle;
list-style-position: outside;
list-style-image: none;
}
.div1 {
width: 200px;
height: 200px;
/* border-radius: 50px; */
border-bottom-left-radius: 100px;
border-style: solid;
border-top-right-radius: 100px;
background:-webkit-linear-gradient(rgb(91, 255, 91),rgb(216, 253, 216))
}
.div2{
width: 200px;
height: 200px;
border-top-left-radius: 100px;
border-style: solid;
border-bottom-right-radius: 100px;
background:-webkit-linear-gradient(rgb(255, 255, 220),rgb(255, 255, 114))
}
.div3{
width: 200px;
height: 200px;
/* border-radius: 50px; */
border-bottom-left-radius: 100px;
border-style: solid;
border-top-right-radius: 100px;
background:-webkit-linear-gradient(rgb(255, 227, 232),rgb(252, 93, 120))
}
.div4{
width: 200px;
height: 200px;
border-top-left-radius: 100px;
border-style: solid;
border-bottom-right-radius: 100px;
background:-webkit-linear-gradient(rgb(97, 163, 240),rgb(190, 190, 247))
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td><div class="div1"></div></td>
<td><div class="div4"></div></td>
</tr>
<tr>
<td><div class="div2"></div></td>
<td><div class="div3"></div></td>
</tr>
</table>
</body>
区块属性
定义一个元素的显示方式
<style>
.div1{
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
盒子模型
要会算盒子的各个尺寸
div {
height: 200px;
width: 200px;
background-color: orange;
/* 外边距 */
margin-top: 100px;
margin-left: 100px;
border: 10px solid red;
padding: 20px;
/* border-box 保证盒子的大小是300*300，外边距不包括 */
/* box-sizing: border-box; */
/* content-box：保证当前div的尺寸是300*300，不包含内边距和边框线 */
box-sizing: content-box;
}
先重置，初始化，再做盒子
*{
margin: 0;
padding: 0;
}
div{
height: 200px;
width: 200px;
background-color: orange;
padding: 20px;
}
文档流
在网页中将窗体自上而下分成好多行
并在每行从左到右的顺序排列元素，即为文档流。
网页默认的布局方式
定位position
父相子绝
子元素绝对定位
父元素相对定位
static
文档流，默认的
absolute
绝对定位
相对于一个父元素的绝对定位
当设置了定位后，原来的元素会脱离文档流，在页面上浮起来
relative
相对定位
相对于上一个元素的位置
fixed
固定定位
定位的left和top
right和bottom
left是相对于父元素的位置
left是定位的属性
margin-left有啥区别？
相对于自己的初始位置
margin是盒子模型的属性
在开发中，尽量统一使用
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
left: 150px;
top: 50px;
/* margin-left: 150px; */
/* display: none; */
}
.div2 {
width: 200px;
height: 200px;
background-color: skyblue;
/* 绝对定位 */
position: absolute;
/* 坐标 */
left: 150px;
top: 400px;
/* visibility: hidden; */
}
.container {
width: 600px;
height: 800px;
background-color: pink;
position: relative;
top: 100px;
left: 200px;
}
.nav {
width: 100%;
height: 100px;
background-color: red;
/* 水平居中 */
margin: auto;
position: fixed;
/* z轴的索引 */
z-index: 1;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
溢出策略
案例
<style>
div{
width: 50px;
height: 275px;
overflow: hidden;
display: inline-block;
}
div:hover{
overflow: visible;
width: 170px;
}
</style>
</head>
<body>
<div>
<img src="../img/螳螂.png" alt="">
</div>
<div>
<img src="../img/螳螂.png" alt="">
</div>
<div>
<img src="../img/螳螂.png" alt="">
</div>
<div>
<img src="../img/螳螂.png" alt="">
</div>
</body>
浮动
左浮动: float: left
<style>
.div1{
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
清除浮动
<div style="clear: both;"></div>
推荐使用
.ulstyle:after{
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
布局（了解）
双列布局
两列布局
三列布局
动画
div {
/* 针对于火狐浏览器 */
/* -moz-transition: ; */
/* 针对于Safari和Google */
/* -webkit-animation: ; */
/* 针对Opera浏览器 */
/* -o-animation: ; */
/* Transition */
width: 100px;
height: 100px;
background-color: orange;
transition: width 2s ease-in 3s,height 3s,background-color ease-out 2s;
/* transition-delay: 2s;
transition-property: width;
transition-timing-function: ease-in-out;
transition-duration: 3s; */
}
div:hover {
width: 500px;
height: 500px;
background-color:aqua;
}
animate
transition和animate区别
transition只能通过固定的属性来开始与结束值
.div1 {
/* 引用自定义动画，延迟时间 */
animation: myAnim 5s;
}
/* 先声明动画，再使用 */
@keyframes myAnim {
0% {
width: 100px;
height: 100px;
background-color: orange;
}
25%{
width: 200px;
height: 200px;
background-color: blue;
}
50% {
width: 400px;
height: 400px;
background-color: red;transform: rotate(45deg);
}
75% {
width: 200px;
height: 200px;
background-color: blue;transform: rotateZ(180deg);
}
100% {
width: 100px;
height: 100px;
background-color: orange;transform: rotate3d(270deg);
}
}
连接到外部的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__bounce animate__faster">An
animated element</h1>
</body>
</html>
flex布局
块级元素和行内块级元素
1.父容器要加上display:flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
/* 排列方向 */
/* flex-direction: row; */
/* 如果一条轴线上装不下，换行的方式 */
/* flex-wrap:wrap-reverse; */
/* flex-flow: row wrap; */
/* 设置主轴的排列策略 */
justify-content: space-evenly;
/* 交叉轴 */
align-items:flex-start;
align-content: center;
width: 900px;
height: 900px;
background-color: pink;
}
.flex1 {
width: 200px;
height: 200px;
background-color: green;
order: 1;
/* 要将哪个项目放大，默认是0 */
/* flex-grow: 2; */
/* 要将哪个项目缩小,默认是0 */
flex-shrink: 20;
align-self: flex-end;
}
.flex2 {
width: 200px;
height: 200px;
background-color: yellow;
order: -2;
}
</style>
</head>
<body>
<!-- flex布局
块级元素和行内块级元素
1.父容器要加上display:flex
-->
<div class="container">
<div class="flex1">123</div>
<div class="flex2">456</div>
<div class="flex1">123</div>
<div class="flex2">456</div>
<div class="flex1">123</div>
<div class="flex2">456</div>
</div>
<hr>
<div class="container">
<div class="flex1">123</div>
<div class="flex2">456</div>
<div class="flex1">123</div>
<div class="flex2">456</div>
<div class="flex1">123</div>
<div class="flex2">456</div>
</div>
</body>
</html>