博客列表 >伪类/盒子模型及单位

伪类/盒子模型及单位

**
**原创
2021年12月30日 15:34:00423浏览

伪类选择器

结构伪类

方法一:

  1. <body>
  2. <!-- 结构伪类:根据元素位置获取元素 -->
  3. <ul class="list">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. <li>item6</li>
  10. <li>item7</li>
  11. <li>item8</li>
  12. </ul>
  13. <style>
  14. /* 分组结构伪类 */
  15. /* 第一个元素 */
  16. .list > li:nth-of-type(1) {
  17. background-color: violet;
  18. }
  19. /* 最后一个元素 */
  20. .list > li:nth-of-type(8) {
  21. background-color: violet;
  22. }
  23. /* 第5个元素 */
  24. .list > li:nth-of-type(5) {
  25. background-color: violet;
  26. }
  27. /* 选择第5个,相当于倒数第4个元素 */
  28. .list > li:nth-last-of-type(4) {
  29. background-color: red;
  30. }
  31. /* 第一个和倒数第一个元素可以简写 */
  32. .list > li:first-of-type {
  33. color: darkorchid;
  34. }
  35. .list > li:last-of-type {
  36. color: lightblue;
  37. }
  38. </style>
  39. </body>

方法二

  1. <body>
  2. <ul class="list">
  3. <li>item1</li>
  4. <li>item2</li>
  5. <li>item3</li>
  6. <li>item4</li>
  7. <li>item5</li>
  8. <li>item6</li>
  9. <li>item7</li>
  10. <li>item8</li>
  11. </ul>
  12. <style>
  13. /* 实际开发过程中,使用n + b(偏移量)来匹配元素 */
  14. /* 1. 匹配单个,a=0 */
  15. .list > :nth-of-type(0n + 3) {
  16. background-color: lightgreen;
  17. }
  18. .list > :nth-of-type(3) {
  19. background-color: red;
  20. }
  21. /* 2. 匹配一组:a=1 */
  22. .list > :nth-of-type(n) {
  23. background-color: skyblue;
  24. }
  25. /* 匹配第3个子元素后面的所有兄弟元素 */
  26. .list > :nth-of-type(1n + 3) {
  27. color: darkred;
  28. }
  29. /* a=-1,功能与a=1是一样,但是反向取,取前3个 */
  30. .list > :nth-of-type(-n + 3) {
  31. background-color: lightgreen;
  32. }
  33. /* 匹配最后3个 */
  34. .list > :nth-last-of-type(-n + 3) {
  35. background-color: seagreen;
  36. }
  37. /* 2n+0:匹配偶数位元素 even */
  38. .list > :nth-of-type(2n) {
  39. background-color: gray;
  40. }
  41. /* 2n+1:匹配奇数位元素 odd */
  42. .list > :nth-of-type(2n + 1) {
  43. background-color: lightgrey;
  44. }
  45. .list > :nth-of-type(even):hover {
  46. background-color: red;
  47. }
  48. .list > :nth-of-type(odd):hover {
  49. background-color: darkred;
  50. }
  51. </style>
  52. </body>

状态伪类/表单伪类

  1. <body>
  2. <!-- 表单伪类 -->
  3. <input type="text" />
  4. <input type="text" disabled />
  5. <input type="radio" name="sex" id="m" value="0" /><label></label>
  6. <input type="radio" name="sex" id="f" value="1" /><label></label>
  7. <p>
  8. <button>提交</button>
  9. </p>
  10. <style>
  11. input:disabled {
  12. background-color: yellow;
  13. }
  14. input:enabled {
  15. background-color: cyan;
  16. }
  17. /* 单选按钮选中后,将它的标签文本前景色设置为红色 */
  18. input:checked + label {
  19. color: red;
  20. }
  21. button {
  22. width: 100px;
  23. height: 30px;
  24. border: none;
  25. outline: none;
  26. background-color: seagreen;
  27. color: white;
  28. }
  29. button:hover {
  30. background-color: coral;
  31. cursor: pointer;
  32. }
  33. </style>
  34. </body>

字体图标引入

1、字体图标下载

https://www.iconfont.cn/ 根据需要挑选自己需要的字体图标,并下载至本地项目根目录,根据需要设置字体图标目录名称(本项目设置为:font)。

2、字体使用

Font class方式插入

①引入字体CSS文件

  1. <link rel="stylesheet" href="./font/iconfont.css" />

②字体使用

  1. <body>
  2. <p><span class="iconfont icon-cart"></span> </p>
  3. <style>
  4. .iconfont.icon-cart {
  5. font-size: 30px;
  6. color: red;
  7. }
  8. </style>
  9. </body>

Symbol 方式插入

①引入字体JS文件

  1. <script src="./font/iconfont.js"></script>

②字体使用

  1. <body>
  2. <svg class="icon" aria-hidden="true">
  3. <use xlink:href="#icon-fabulous"></use>
  4. </svg>
  5. </body>

盒模型的属性

盒子模型总共有5个属性分别为:width/height/border/padding/margin

  1. <body>
  2. <div class="box">Box</div>
  3. <style>
  4. /* 盒子模型的属性 */
  5. .box {
  6. width: 200px;
  7. height: 200px;
  8. background: violet;
  9. border: 10px dashed currentColor;
  10. background-clip: content-box;
  11. box-sizing: border-box;
  12. /* 值得顺序;上 右 下 左 */
  13. padding: 5px 10px 15px 20px;
  14. /* 三值语法:上 右 下 左 */
  15. padding: 5px 10px 20px;
  16. /* 双值:第一个上下,第二个左右 */
  17. padding: 25px;
  18. /* 单值:四个方向一样 */
  19. }
  20. .box {
  21. border-top: 20px solid red;
  22. border: 5px solid green;
  23. }
  24. /* 样式重置 */
  25. * {
  26. padding: 0;
  27. margin: 0;
  28. box-sizing: border-box;
  29. }
  30. </style>
  31. </body>

em/rem的区别

说明:em和rem都是相对单位,em当前或父级的font-size绑定,而rem是永远和html中的font-size绑定

  1. <body>
  2. <div class="box"></div>
  3. <style>
  4. * {
  5. padding: 0;
  6. margin: 0;
  7. box-sizing: border-box;
  8. }
  9. .box {
  10. /* 1em = 当前或父级的font-size绑定 */
  11. height: 5em;
  12. background-color: green;
  13. }
  14. /* rem:永远和html中的font-size绑定 */
  15. html {
  16. font-size: 10px;
  17. }
  18. .box {
  19. width: 20rem;
  20. height: 15rem;
  21. background-color: grey;
  22. }
  23. </style>
  24. </body>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议