文章目录
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;
区块属性
盒子模型
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;
}
浮动
在视觉格式化模型中,页面中盒子的排列方式分为三种:
-
常规流
-
浮动
-
定位
浮动的基本特点:
当一个元素浮动后,该元素一定会成为块盒(display为block);
例子:
a元素是一个inline,行盒。
当设置浮动后,float: left;在浏览器的开发工具中查看,它的display属性已经从inline(行盒),变成了block(块盒)。
a {
float: left;
}
浮动盒子的排列方式:
-
none: 默认值,不浮动,为常规流
-
left: 靠上靠左排列
-
right: 靠上靠右排列
浮动盒子向左或向右移动,直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止
动画 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>
后端必须掌握
- 选择器【十分重要】
- css三大特征:层叠性,继承性,优先级
- 盒子模型
- 定位
- 浮动,清除浮动(****)
- 常见的属性——字体,背景,列表,边框等等
- 元素的隐藏,元素内容的溢出,【overflow,fisplay,visibility】
- 【开发中,推荐使用外部引入的方式】