博客列表 >表单中常用的状态伪类及盒模型的五个核心属性

表单中常用的状态伪类及盒模型的五个核心属性

安超
安超原创
2022年10月22日 05:11:31349浏览

表单中常用的状态伪类

表单中常用的状态伪类主要有:

  1. :checked
  2. :disabled
  3. :focus
  4. :required
  5. :valid
    实现效果图如下:
    表单伪状态
  1. <style>
  2. input:focus{
  3. color: red;
  4. }
  5. input:required{
  6. background-color:green;
  7. }
  8. input:checked{
  9. width: 50px;
  10. height: 50px;
  11. }
  12. input:invalid{
  13. border:10px solid red;
  14. }
  15. </style>
  16. <form action="" id="myForm" method="post">
  17. <div>
  18. <p>选择你的爱好</p>
  19. <input type="checkbox" name="surname[]" value="reading">读书
  20. <input type="checkbox" name="surname[]" value="sports">运动
  21. </div>
  22. <br>
  23. <div>
  24. <label for="tex">输入你的姓名</label>
  25. <input type="text" name="tex" id="tex">
  26. </div>
  27. <br>
  28. <div>
  29. <label for="raid">选择你的爱好</label>
  30. <input type="radio" name="sex" value="male">male
  31. <input type="radio" name="sex" value="female">female
  32. </div>
  33. <br>
  34. <div>
  35. <label for="num">输入数字</label>
  36. <input type="number" name="num" id="num" min="20" max="100" placeholder="input the number between 20 and 100" style="width:250px" required>
  37. </div>
  38. <br>
  39. <div>
  40. <label for="dat">选择日期</label>
  41. <input type="date" id="dat" name="dat">
  42. </div>
  43. <button type="button">提交</button>
  44. <button type="reset">重置</button>
  45. </form>

盒模型的五个核心属性

CSS中盒模型的五个属性主要为:
1.width
2.height
3.padding
4.border
5.margin
其中width 和 height为content的宽度和高度.
对于一个盒模型,宽度的计算公式为:
width(all) = width(content)+2 padding + 2 border + 2 margin
height(all)=height(content) + 2
padding +2 borer + 2 margin
盒子图

padding和margin的书写方式主要由三种(顺时针法则):
1.四个参数:padding/margin : 1px 2px 3px 4px
四个参数
2.三个参数:padding/margin :1px 2px 3px
三个参数
3.2个参数:padding/margin: 1px 2px
2个参数

为了计算的方便,在应用时,将盒子的类型规定为:box-sizing:border-box
这个时候,定义的尺寸为:2 border + 2 padding +content
boder-sizing:content-box的案例如下:
content-box

border-sizing:border-box的案例如下:
border-box

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议