RGB以及文档流
2022/4/20 6:16:40
本文主要是介绍RGB以及文档流,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
继承
继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ font-size: 30px; } p{ /* 为一个元素设置样式同样会应用到他的后代元素 继承是发生在祖先元素和后代元素中的 方便我们开发,利用继承可以将一些通用样式统一设置到同一个祖先元素中 并不是所有样式都会继承,比如背景相关和样式相关的 */ color: red; background-color: aqua; } </style> </head> <body> <p> <!--P元素中不能放任何块元素 --> 我是一个p元素 <span>我是p元素中的span</span> </p> <span>我是p元素外面的p元素</span> </body> </html>
选择器的权重
样式的权重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ color: blue; } div{ color: red; } .red{ color: aqua !important; } /* 样式冲突,取决于选择器的权重/优先级决定 选择器的权重 内联样式 1000 div里面的style="color:" id选择器 100 类和为类选择器 10 元素选择器 1 通配选择器 0 继承样式 无优先级 比较优先级时,需要将所有的选择器优先级进行相加计算,最后优先级越高,越先显示 选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器 如果优先级相等则优先显示最下方的样式 在开发中!important慎用 能不用就不用 */ div#box1{ color: brown; } div{ font-size: 20px; } *{ font-size: 50px; } </style> </head> <body> <div id="box1" class="red" >我是一个div <span>我是div中的span</span> </div> </body> </html>
像素与百分比以及长度单位em rem
查看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html{ font-size: 50px; } .box1{ /* 长度单位 像素 屏幕实际是由一个一个小方块构成的 不同屏幕的像素大小不一样 像素越小显示的越清晰 同样的300像素在不同的设备下显示效果不一样 百分比 百分比可以设置属性相对父元素属性的百分比 设置百分比可以使子元素跟随父元素的改变而改变 em em是相对自身元素的字体大小计算的 1em=1font-size em会根据字体大小改变而改变 rem rem是相对于根元素的字体大小 */ width: 200px; height: 200px; background-color: orange; } .box2{ width: 50%; height: 50%; background-color: aqua; } .box3{ font-size: 20px; width: 10rem; height: 10rem; background-color: greenyellow; } </style> </head> <body> <!-- 快捷 div.box1或者直接.box1--> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>
RGB
RGB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 100px; height: 100px; /* 颜色单位 CSS中直接使用颜色名字来设置颜色 不方便,所以不常用 主要用的方式为RGB值 RGB值 通过三种颜色的不同浓度来调配颜色 0-255 语法:RGB(红色,绿色,蓝色) RGBA值 A透明效果 1表示完全不透明 0.5表示半透明 0表示全透明 十六进制RGB #红绿蓝 00-ff 如果颜色两位两位重复可以进行简写 */ background-color: red; background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0,0.5); background-color: #ff0000; background-color: #f00; } </style> </head> <body> <div class="box1"> </div> </body> </html>
文档流
文档流 创建的元素默认都是在文档流中进行排列 元素主要有两个状态 在文档流里和不在元素在文档流的特点 块元素 在页面中独占一行,垂直排列 默认宽度是父元素的全部 默认高度是文字的高度 行内元素 行内元素不会独占一行,是自左向右水平排列 如果一行中满了,则会换到第二行 默认宽度和高度都是文字的宽高
这篇关于RGB以及文档流的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?