目录
1.CSS
css三大特性
- 层叠性
- 一个标签可以有多个css样式
- 浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到这个元素上，会根据样式的层叠规则
- 样式的层叠规则——按照样式的声明顺序来层叠的【就近原则】
- 选择器必须是同一种
- 样式不冲突不会层叠
- 继承性
- 子标签会继承父标签的某些样式，比如文本颜色和字号
- 优先级
- 权重
- 继承的权重是0——最低
- 行内样式的权重是100
- 权重相同的——就近原则
- ！important命令——无限大
- css权重公式——贡献值
- 继承、*——0000
- 标签选择器——0001
- 类、伪类选择器——0010
- id选择器——0100
- 行内样式——1000
- ！important——无穷大
- width，height——大于无穷大
- 权重不能被继承
- 贡献值是没有进位的
- 如果同时有！important与max-width，max-height
- ！important是不管用的
- 权重
常用单位
- px像素：最常用
- em：绝对单位，由父类的字号决定，比如父级的字号是16px，可以设置成2em（32px）
- rem：绝对单位，由整个html的字号决定的，页面的字号也会发生变化
- 百分比：相对于父元素的比例
字体大小
-
/* 字体大小 */ font-size: 20px; /* 字体样式 */ font-style: italic; /* 字体粗细 */ font-weight: bold; /* 字体修饰 */ text-decoration:line-through; /* 字体 */ font-family: monospace; /* 复合属性 */ font: 130px italic bolder ;
背景
-
一般情况下不要既有背景颜色又有背景图片
-
/* 背景颜色 */ /* background-color: rgba(255,255,0); */ /* 设置颜色可以用——英语、十六进制、如果部、rgb、rgba */ width: 1200px; height: 1200px; /* 背景图片 */ background-image: url(../../2022-8-22/morning/img/a.webp); /* 背景大小 */ background-size: 1200px; /* 背景图片不重复 */ background-repeat:no-repeat; /* 背景的位置 */ background-position: center;
列表
list-style-type:lower-greek;
list-style-image: url(../../2022-8-22/morning/img/a.webp);
圆角
width: 200px;
height: 200px;
background-color: yellow;
/* 圆角 */
border-radius:15px;
/* 左下圆角 */
border-bottom-left-radius: 68px;
/* 虚线 */
border-style: dashed;
区块属性
<style>
div{
height: 300px;
width: 300px;
background: yellow;
/* 显示方式块级变为行级 */
display: inline;
}
span{
height: 200px;
width: 200px;
background: orange;
/* 显示方式行级变为块级 */
display: block;
/* 显示方式隐藏 */
/* display: none; */
/* 内联块 */
display: inline-block;
}
</style>
盒子模型
width: 300px;
height: 300px;
background: rgb(238, 107, 107);
/* 外边距 */
margin : 100px;
/* 盒子的边框线宽度,颜色,边框线 */
border: 10px blueviolet solid;
/* 内边距 */
padding-top: 10px;
/* 保证盒子的大小是300*300 盒子的外边距是 不包括的 */
box-sizing: border-box;
/* 保证当前div的尺寸是300*300 不包含内边距和边框线 */
box-sizing: content-box;
定位
文档流
- 在网页中将窗体自上到下的分成多行
- 在每一行从左到右的顺序排列元素——即为文档流
- 网页默认的布局方式
定位position
-
static：文档流，默认的
-
absolute：绝对定位
- 相对于一个父元素的绝对定位
- 当设置了绝对定位之后，原来的元素脱离了文档流。会在页面上浮起来。
-
relative：相对定位
- 相对于上一个元素的位置的定位
-
fixed：固定定位
-
/* 居中 */ margin: center; /* 固定定位 */ position: fixed; /* z轴的索引 */ z-index:1080;
-
【子绝父相】
- 子元素是绝对定位
- 父元素是相对定位
【定位left与盒子模型margin-left有什么区别】
- 定位left是相对于父元素的位置，margin是相对于自己的位置
- left是定位的属性
可见性
-
visibility：
-
visibility: hidden; /*隐藏*/ /* 溢出策略 */ overflow:scroll;
-
-
div{ width: 50px; height: 500px; overflow: hidden; display: inline-block; } div:hover{ overflow:visible; width:885px; } -
<div> <img src="../2022-8-22/morning/img/a.webp" alt=""> </div> <div> <img src="../2022-8-22/morning/img/a.webp" alt=""> </div> <div> <img src="../2022-8-22/morning/img/a.webp" alt=""> </div> <div> <img src="../2022-8-22/morning/img/a.webp" alt=""> </div> <div> <img src="../2022-8-22/morning/img/a.webp" alt=""> </div> -
浮动
-
清除浮动
-
<!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> <link rel="stylesheet" href="../../2022-8-22/cs.css"> <style> .div1 { width: 200px; height: 200px; background-color: aqua; position:absolute; z-index: -1; } .div3 { width: 200px; height: 200px; background-color: yellow; float: left; z-index: 200; } li{ list-style: none; float: left; width: 150px; height: 20px; background-color: aquamarine; margin-left: 20px; } ul{ background-color: pink; /* float: left; */ /* width: 100%; */ } .as::after{ content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } </style> </head> <body> <ul class="as"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <!-- <div style="clear: both;"></div> --> </ul> </body> </html>
-
动画
-
css3兼容性的问题
-
/*延迟*/ div{ /* 针对于火狐浏览器 */ /* -moz-transform: ; */ /* 针对于Safari 和Google */ /* -webkit-transform: ; */ /* 针对于Opera */ /* -o-transform: ; */ /* Transition -延迟转换*/ width: 100px; height: 100px; background-color: orange; transition: width 1s 3s,height 3s ease-in,background-color ease-out 3s; } div:hover{ width: 500px; height: 500px; background-color: aqua; }
-
-
transition与animate的区别
- transition只能通过固定的属性来开始与结束值
- animate可以一帧一帧的去实现效果
练习
.size {
width: 200px;
height: 200px;
border-top-right-radius: 65px;
border-bottom-left-radius: 65px;
background-color: green;
position: relative;
left: 100px;
top: 100px;
}
.size1 {
width: 200px;
height: 200px;
border-bottom-right-radius: 65px;
border-top-left-radius: 65px;
background-color: orange;
position: relative;
left: 100px;
}
.size2 {
width: 200px;
height: 200px;
border-bottom-right-radius: 65px;
border-top-left-radius: 65px;
background-color: blue;
position: relative;
right: 0px;
top: 100px;
}
.size3 {
width: 200px;
height: 200px;
border-top-right-radius: 65px;
border-bottom-left-radius: 65px;
background-color: red;
}
.a {
width: 300px;
height: 300px;
background: rgb(5, 230, 5);
border-top-left-radius: 50px;
}
.b {
width: 300px;
height: 300px;
background: rgb(12, 101, 235);
border-top-right-radius: 50px;
}
.c {
width: 300px;
height: 300px;
background: rgb(246, 136, 33);
border-bottom-left-radius: 50px;
}
.d {
width: 300px;
height: 300px;
background: rgb(238, 107, 107);
border-bottom-right-radius: 50px;
}
<table border="0" cellspacing="0px">
<tr>
<td>
<div class="a">
<div class="size back"></div>
</div>
</td>
<td>
<div class="b">
<div class="size2 back"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="c">
<div class="size1 back"></div>
</div>
</td>
<td>
<div class="d">
<div class="size3 back"></div>
</div>
</td>
</tr>
</table>
后端必须掌握
- 选择器【十分重要】
- css三大特征：层叠性，继承性，优先级
- 盒子模型
- 定位
- 浮动，清除浮动（****）
- 常见的属性——字体，背景，列表，边框等等
- 元素的隐藏，元素内容的溢出，【overflow，fisplay，visibility】
- 【开发中，推荐使用外部引入的方式】