Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第四课 box-sizing功能示例、相对定位与绝对定位的区别与联系及示例
Blogger Information
Blog 6
fans 0
comment 0
visits 3500
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
第四课 box-sizing功能示例、相对定位与绝对定位的区别与联系及示例
phpcn_u40613
Original
528 people have browsed it

1、box-sizing功能并实例演示;

  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.     <style>
  9.         /* 代码的初始化 */
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         /* :root===html */
  16.         :root{
  17.             /* 浏览器默认：font-size: 16px ; */
  18.             /* 为了便于计算和使用方便 */
  19.             font-size: 10px;
  20.         }
  21.         /* em,rem */
  22.         /* em:根据元素的上下文来确定它的值； */
  23.         /* rem:根据根元素的字号来设置 */
  24.         /* 将W3C的标准盒子转为IE的盒子 */
  25.         /* 就是将盒子的padding和border计算在它的width和height内； */
  26.         /* 就用box-sizing */
  27.         /* box-sizing: border-box; */
  28.         /* 当前盒子的边际在那里，当前盒子不在内容区，而是到了边框，这时候内容区就会被压缩。
  29.         内容区始终包含了内边距和边框的*/
  30.         .box{
  31.             width: 20em;
  32.             height: 20em;
  33.             padding: 10px;
  34.             margin: 10px;
  35.             border: 2px solid red;
  36.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <p>1. 理解 box-sizing功能并实例演示; </p>
  42.     <p> 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系</p>
  43.     <div class="box">
  45.     </div>
  46. </body>
  47. </html>

没设置box-sizing: border-box; 时：

设置了box-sizing: border-box; 时：

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>定位</title>
  8.     <style>
  9.         body{
  10.             border: 2px solid red;
  11.         }
  12.         /* relative相对定位（相对于自身定位） */
  13.        .box{
  14.            width: 10rem;
  15.            height: 10rem;
  16.            background-color: aquamarine;
  17.            /* position: static;静态定位，没有定位，默认 */
  18.            /* position: static; */
  19.             /* 相对定位，自动的转为定位元素了 */
  20.             /* 定位元素：只要这个元素上有非static的定位属性，就是定位元素 */
  21.            position: relative;
  22.            /* 只要有定位元素，定位偏移就有效了 */
  23.            top:5rem;
  24.            left: 10rem;
  25.            font-size: 5rem;
  26.        }
  27.        /* absolute:绝对定位，根据父元素定位，脱离了文档流 */
  28.        /* 文档流：显示顺序与书写顺序一致 */
  29.        /* 相对于它在原始文档流中的位置进行定位 */
  30.       .box1{
  31.           height: 10rem;
  32.           border: 2px solid aquamarine;
  33.           position: relative;
  34.       }
  35.        .box2{
  36.         width: 10rem;
  37.            height: 10rem;
  38.            background-color: rgb(253, 72, 238);
  39.            position: absolute ;
  40.            left: 10rem;
  41.            top:12rem;
  42.            font-size: 2rem;
  43.        }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="box">box</div>
  49.     <h1>PHP中文网</h1>
  50.     <div class="box1">
  51.         <div class="box2">box1</div>
  52.         <h2>PHP学习</h2>
  53.     </div>
  55. </body>
  56. </html>

定位的展示

Correcting teacher：天蓬老师天蓬老师

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