Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 状态伪类与盒模型
Blogger Information
Blog 25
fans 0
comment 0
visits 10610
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
状态伪类与盒模型
PHui
Original
260 people have browsed it

1.伪类实战

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>用户注册</title>
  8.     <link rel="stylesheet" href="css/fake.css"
  9.   </head>
  10.   <body>
  11.     <form
  12.       action=""
  13.       method="post"
  14.       enctype="application/x-www-form-urlencoded"
  15.       target="_blank"
  16.       id="rigster"
  17.     >
  18.       <fieldset>
  19.         <legend>用户注册</legend>
  20.         <div class="username">
  21.           <label for="uname">用户名:</label>
  22.           <input
  23.             type="text"
  24.             id="uname"
  25.             name="username"
  26.             placeholder="请输入用户名"
  27.             required
  28.             autofocus
  29.           />
  30.         </div>
  31.         <div class="password">
  32.           <label for="psd">密码:</label>
  33.           <input
  34.             type="password"
  35.             id="psd"
  36.             name="password"
  37.             placeholder="请输入密码"
  38.             required
  39.           />
  40.         </div>
  41.         <div class="email">
  42.           <label for="myemail">邮箱:</label>
  43.           <input
  44.             type="email"
  45.             id="myemail"
  46.             name="email"
  47.             placeholder="格式xxxx@xx.com"
  48.             required
  49.           />
  50.         </div>
  51.         <div class="remem">
  52.           <input type="checkbox" id="rem" name="remember" checked />
  53.           <label for="rem">记住我</label>
  54.         </div>
  55.         <button>提交</button>
  56.       </fieldset>
  57.     </form>
  58.   </body>
  59. </html>

css

  1. label {
  2.   width: 52px;
  3.   height: 35px;
  4.   text-align: left;
  5.   display: inline-block;
  6. }
  7. fieldset {
  8.   width: 250px;
  9. }
  10. button {
  11.   width: 230px;
  12. }
  13. fieldset legend {
  14.   text-align: center;
  15. }
  17. /* ? 匹配到获取焦点的元素 */
  18. fieldset :focus {
  19.   background-color: gainsboro;
  20.   transition: 0.8s;
  21. }
  23. /* ? 匹配被选中的复选框元素 */
  24. input[type="checkbox"]:checked + label {
  25.   color: red;
  26. }

效果

2.盒模型

盒模型五个核心属性：

1.width: 宽度
2.height: 高度
3.padding: 内边距
4.border: 边框
5.margin: 外边距

  1.     <div class="box"></div>
  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   padding: 10px;
  5.   border: 2px solid red;
  6.   margin: 10px;
  7.   box-sizing: border-box;
  8.   background-clip: content-box;
  9.   background-color: yellow;
  10. }


box-sizing: 定义如何计算一个元素的总宽度和总高度

  1. content-box:任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
  2. bored-box:设置的边框和内边距的值是包含在 width 内的。
    width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
    height(高度) + padding(内边距) + border(边框) = 元素实际高度
    注：border-box 不包含 margin。
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post