2022-8-23 css

  • 2022-8-23 css已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

一个标签可以有多个css样式
浏览器处理冲突的能力,如果一个属性通过两个相同的选择器设置到这个元素上,会根据样式的层叠规则
样式的层叠规则——按照样式的声明顺序来层叠的【就近原则】
选择器必须是同一种
样式不冲突不会层叠


✏️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的字号决定的,页面的字号也会发生变化
百分比:相对于父元素的比例
✒️字体大小

​/* 字体大小 */

1  ​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);  1 2 

✒️圆角

    ​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; /*隐藏*/  1  ​ /* 溢出策略 */ ​overflow:scroll; div{ width: 50px; height: 500px; overflow: hidden; display: inline-block;  } div:hover{     overflow:visible;     width:885px; } 

✒️动画 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>