简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2022.10.21第七课：盒模型和状态伪类的学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7386
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
2022.10.21第七课：盒模型和状态伪类的学习
启动未来
Original
545 people have browsed it

2022.10.21第七课：盒模型和状态伪类的学习

1.笔记

css中的状态伪类很多，在表单中，常用的主要有：

  • :focus——-元素获得焦点
  • :checked ——-元素被选择，或者默认选择
  • :disabled ——-元素被禁用
  • :required ——-元素被强制要求必须填写
  • :hover ——-鼠标悬停在元素上时候，适合于html所有的元素

2.实例代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <link rel="stylesheet" href="form-fake.css">
  9. </head>
  10. <body>
  11.     <form action="" method="post" enctype="multipart/form-data" name="" >
  12.         <fieldset>
  13.             <legend style="color:blue"><b>基本信息</b></legend><br>
  14.             <div>
  15.                 <label for="uname">姓&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;</label>
  16.                 <input type="text" maxlength="30"  name="username" id="uname" required>
  17.             </div><br>
  18.             <div>
  19.                 <label for="secret">性&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;</label>
  20.                 男<input type="radio" name="gender" id="male" value="male">
  21.                 女<input type="radio" name="gender" id="female" value="female">
  22.                 保密<input type="radio" name="gender" id="secret" value="secret" checked>
  23.             </div><br>
  24.             <div>
  25.                 <label for=""pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;</label>
  26.                 <input type="password" name="" id="pwd" required>
  27.             </div><br>
  28.             <div>
  29.                 <label for="jg">籍&nbsp;&nbsp;&nbsp;&nbsp;贯:&nbsp;&nbsp;</label>
  30.                 <input type="text" name="jg" id="jg" disabled>
  31.             </div><br>
  32.             <div>
  33.                 <label for="tel">手机号：</label>
  34.                 <input type="number" name="tel" id="tel">
  35.             </div><br>
  36.             <div>
  37.                 <label for="qq">QQ&nbsp;&nbsp;号:&nbsp;&nbsp;</label>
  38.                 <input type="number" name="qq" id="qq" min="3" max="30"></div>
  39.             <br>
  40.             <div>
  41.                 <label for="birth">生&nbsp;&nbsp;&nbsp;&nbsp;日：</label>
  42.                 <input type="date" name="birthday" id="birth" value="2022-10-19" min="1900-01-01" max="2099-12-31">
  43.             </div><br>
  44.             <div>
  45.                 <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
  46.                 <input type="email" name="email" id="email">
  47.             </div><br>
  48.             <div>
  49.                 <label for="url">博&nbsp;&nbsp;&nbsp;&nbsp;客：&nbsp;&nbsp;</label>
  50.                 <input type="url" name="url" id="url">
  51.             </div>
  52.             <br>
  53.         </fieldset>
  54.         <br><br>
  55.         <fieldset>
  56.             <legend style="color:blue"><b>附加信息</b></legend>
  57.             <div>
  58.                 <label for="">兴趣爱好：</label>
  59.                 <input type="checkbox" name="hobby[]" value="sport" id="sport">体育
  60.                 <input type="checkbox" name="hobby[" id="read" value="read">读书
  61.                 <input type="checkbox" name="hobby[]" id="music" value="music">音乐
  62.                 <input type="checkbox" name="hobby[]" id="art" value="art">艺术
  63.                 <input type="checkbox" name="hobby[]" id="eat" value="eat">美食
  64.                 <input type="checkbox" name="hobby[]" id="other" value="other">其他
  65.             </div><br>
  66.             <div>
  67.                 <label for="edu">最高学历</label>
  68.                 <select name="edu" id="edu">
  69.                 <option value="" disabled selected>--请选择--</option>
  70.             <optgroup label="义务教育">义务教育
  71.                 <option value="幼儿园">幼儿园</option>
  72.                 <option value="小学">小学</option>
  73.                 <option value="初中">初中</option>
  74.             </optgroup>
  75.             <optgroup label="中等教育">
  76.                 <option value="高中">高中</option>
  77.                 <option value="中专">中专</option>
  78.             </optgroup>
  79.             <optgroup label="高等教育">
  80.                 <option value="大专">大专</option>
  81.                 <option value="本科">本科</option>
  82.                 <option value="硕士">硕士</option>
  83.                 <option value="博士">博士</option>
  84.             </optgroup>
  85.             </select>
  86.             </div><br>
  87.             <div>
  88.                 <label for="lang">精通语言</label>
  89.                 <input type="search" name="search" id="search" list="details">
  90.                 <datalist id="details">
  91.                     <option value="php">php</option>
  92.                     <option value="html">html</option>
  93.                     <option value="javascript">javascript</option>
  94.                     <option value="css">css</option>
  95.                     <option value="python">python</option>
  96.                     <option value="java">java</option>
  97.                     <option value="c++">c++</option>
  98.                     <option value=".net">.net</option>
  99.                 </datalist>
  100.             </div>
  101.         </fieldset><br><br>
  102.         <fieldset>
  103.             <legend style="color:blue"><b>其他信息</b></legend>
  104.             <div>
  105.                 <label for="avatar">上传头像：</label>
  106.                 <input type="file" name="avatar" id="avatar">
  107.             </div><br>
  108.             <div>
  109.                 <label for="sfzzm">身份证正面：</label>
  110.                 <input type="file" name="sfzzm" id="sfzzm">
  111.             </div><br>
  112.             <div>
  113.                 <label for="sfzfm">身份证反面：</label>
  114.                 <input type="file" name="sfzzm" id="sfzfm">
  115.             </div><br>
  116.             <div>
  117.                 <textarea name="jianjie" id="jianjie" cols="30" rows="10" placeholder="请输入个人简介"></textarea>
  118.             </div>
  119.         </fieldset><br>
  120.             <div>
  121.                 <button type="submit" value="提交">提交</button>
  122.             </div>
  123.     </form>
  124. </body>
  125. </html>

上例中用到的状态伪类css代码如下

  1. input:focus {
  2.     background-color: lightgreen;
  3.     cursor:pointer;
  4.     transition:0.4s;
  5. }
  6. input:checked {
  7.     background-color: lightblue;
  8. }
  9. input:hover {
  10.     color:red;
  11.     font-size:large;
  12. }
  13. input:required {
  14.     border-radius:1px 2px 2px;
  15. }
  16. input:disabled {
  17.     background-color: lightcyan;
  18.     font-weight: bold;
  19. }

3.盒子模型

  • 笔记:
  • 盒模型是css中最基础、最重要的概念之一，盒模型把所有的页面元素看做一个盒子模型
  • 一个独立的盒子模型由内容、边框、内边距、外边距4个部分组成，核心属性有5个
  • margin\border\padding\width\height;
  • 可见属性是border;
  • 不可见属性margin\padding;
  • 盒子模型的计算方式——box-sizing
    • 默认为box-sizing:content-box,如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    • 实际中常用：box-sizing:border-box,告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
  • 盒子之间的距离用margin来表示；
  • 块级元素之间的竖直margin会出现塌陷的问题，两个元素之间的距离不是margin-bottom与margin-top之间的和，而是选择他们之中的最大的，如果两个相等，则等于其中的一个值
  • 关于margin\border\padding常用的有以下4种方式，以顺时针方向为准
    • 以padding为例
    • 四值：padding: 5px 10px 15px 20px;——分别表示：上、右、下、左四个方向的内边距。
    • 三值：padding: 5px 10px 15px;——分别表示：上、左右、下方向的内边距
    • 双值：padding: 5px 10px;—— 分别表示上下、左右方向的内边距
    • 单值：padding: 10px;等价于padding: 10px 10px 10px 10px;，表示上下左右四个方向的内边距全部相等。
    • 总结：记忆规则
    • 三值,双值记忆方法: 只要出现在第二个参数位置上,就必然代表”左右”。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！