欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css伪类/盒模型

程序员文章站 2022-06-01 20:29:34
...

伪类

分组结构伪类(nth-child会无视元素类型/nth-of-type不会)

  • :first-of-type 第一个
  • :nth-of-type(an+b) 第n个[可以-n][even双数][odd单数] a*n+b
  • :nth-last-of-type(an+b) 倒数第n个 a*n+b
  • :last-of-type 最后一个

    状态伪类

  • :disabled 禁用
  • :enabled 有效的
  • :checked 选中状态
  • :hover 鼠标悬停
  • :focus 获取焦点

盒模型

  • width 宽
  • height 高
  • border 边框
  • padding 内边距
  • margin 外边距
  • box-sizing:border-box; 使内边距和边框压缩到宽高中

样式重置

  1. *{
  2. padding:0;
  3. margin:0;
  4. box-sizing:border-box;
  5. }

单位

  • px 像素
  • em 根据单前或者父级font-size*10 ,默认body 1em=16px
  • rem 永远和html的font-size绑定
  • vh 视窗高度 1vh=1/100
  • vw 视窗宽度 1vw=1/100

案例

css伪类/盒模型
下面这个是上面盒子的没有添加box-sizing:border-box;
css伪类/盒模型
下面这个是下面盒子的添加了box-sizing:border-box;
css伪类/盒模型

  1. <style>
  2. *{
  3. padding:0;
  4. margin:0;
  5. box-sizing:border-box;
  6. }
  7. li{
  8. font-size:16px;
  9. }
  10. /* 第一个ul 前三个li */
  11. ul:first-of-type li:nth-of-type(-n+3),
  12. /* 第一个ul 后三个li */
  13. ul:first-of-type li:nth-last-of-type(-n+3),
  14. /* 第一个ul 后四个li后面两个 */
  15. ul:first-of-type li:nth-of-type(5),
  16. ul:first-of-type li:nth-of-type(4)+li+li
  17. {
  18. background-color:red;
  19. }
  20. /* 最后一个ul 双数 */
  21. ul:last-of-type li:nth-of-type(even){
  22. background-color:red;
  23. }
  24. /* 最后一个ul 单数 */
  25. ul:last-of-type li:nth-of-type(odd){
  26. background-color:green;
  27. }
  28. /* 最后一个ul li是双数hover效果 */
  29. ul:last-of-type li:nth-of-type(2n):hover{
  30. background-color:greenyellow;
  31. }
  32. input{
  33. width:10vw;
  34. height:5vw;
  35. }
  36. /* 被禁用的 */
  37. input:disabled{
  38. border:5px dashed slateblue;
  39. }
  40. /* 有效的 */
  41. input:enabled{
  42. border:5px dotted wheat;
  43. }
  44. /* 取消input默认轮廓 */
  45. input:focus{
  46. outline: unset;
  47. }
  48. select option:checked{
  49. background-color:orange;
  50. }
  51. </style>
  52. <ul>
  53. <li>1</li>
  54. <li>2</li>
  55. <li>3</li>
  56. <li>4</li>
  57. <li>5</li>
  58. <li>6</li>
  59. <li>7</li>
  60. <li>8</li>
  61. <li>9</li>
  62. <li>10</li>
  63. </ul>
  64. <ul>
  65. <li>1</li>
  66. <li>2</li>
  67. <li>3</li>
  68. <li>4</li>
  69. <li>5</li>
  70. <li>6</li>
  71. <li>7</li>
  72. <li>8</li>
  73. <li>9</li>
  74. <li>10</li>
  75. </ul>
  76. <input type="text" disabled >
  77. <input type="text">
  78. <select name="" id="">
  79. <option value="" checked >1</option>
  80. <option value="">2</option>
  81. <option value="">3</option>
  82. <option value="">4</option>
  83. <option value="">5</option>
  84. </select>
  85. <style>
  86. .d1 {
  87. width: 20em;
  88. /* rem永远绑定到html的font-size */
  89. height: 2rem;
  90. padding: 0.2rem;
  91. /* em绑定到自己或者父级font-size */
  92. border: 2em outset brown;
  93. margin: 0 auto 2em;
  94. background-color: blanchedalmond;
  95. background-clip: content-box;
  96. }
  97. </style>
  98. <div style="font-size:10px;" >
  99. <div class="d1" style="box-sizing:content-box;" ></div>
  100. <div class="d1" ></div>
  101. </div>

一个底

css伪类/盒模型

  1. <style>
  2. .footer_tab {
  3. position: fixed;
  4. bottom: 0;
  5. left: 0;
  6. width: 100%;
  7. display: flex;
  8. justify-content: space-between;
  9. background-color: #103588;
  10. z-index: 99;
  11. }
  12. .footer_tab .li {
  13. width: 1.85rem;
  14. height: 50px;
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. color: #fff;
  19. background-color: #103588;
  20. }
  21. .footer_tab .li i {
  22. margin-right: 0.1rem;
  23. background: center center no-repeat;
  24. background-size: 100% auto;
  25. }
  26. .footer_tab .li span {
  27. font-size: 0.14rem;
  28. }
  29. </style>
  30. <div class="footer_tab">
  31. <a class="li"><i class="iconfont icon-shouye"></i><span>首页</span></a>
  32. <a class="li"><i class="iconfont icon-phone"></i><span>电话</span></a>
  33. <a class="li"><i class="iconfont icon-zixun"></i><span>在线咨询</span></a>
  34. <a class="li"><i class="iconfont icon-news"></i><span>免费评估</span></a>
  35. </div>