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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 代码的初始化 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* :root===html */
        :root{
            /* 浏览器默认：font-size: 16px ; */
            /* 为了便于计算和使用方便 */
            font-size: 10px;
        }
        /* em,rem */
        /* em:根据元素的上下文来确定它的值； */
        /* rem:根据根元素的字号来设置 */
        /* 将W3C的标准盒子转为IE的盒子 */
        /* 就是将盒子的padding和border计算在它的width和height内； */
        /* 就用box-sizing */
        /* box-sizing: border-box; */
        /* 当前盒子的边际在那里，当前盒子不在内容区，而是到了边框，这时候内容区就会被压缩。
        内容区始终包含了内边距和边框的*/
        .box{
            width: 20em;
            height: 20em;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p>1. 理解 box-sizing功能并实例演示; </p>
    <p> 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系</p>
    <div class="box">
    </div>
</body>
</html>

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

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

2、相对定位与绝对定位，并实例演示他们的区别与联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        body{
            border: 2px solid red;
        }
        /* relative相对定位（相对于自身定位） */
       .box{
           width: 10rem;
           height: 10rem;
           background-color: aquamarine;
           /* position: static;静态定位，没有定位，默认 */
           /* position: static; */
            /* 相对定位，自动的转为定位元素了 */
            /* 定位元素：只要这个元素上有非static的定位属性，就是定位元素 */
           position: relative;
           /* 只要有定位元素，定位偏移就有效了 */
           top:5rem;
           left: 10rem;
           font-size: 5rem;
       }
       /* absolute:绝对定位，根据父元素定位，脱离了文档流 */
       /* 文档流：显示顺序与书写顺序一致 */
       /* 相对于它在原始文档流中的位置进行定位 */
      .box1{
          height: 10rem;
          border: 2px solid aquamarine;
          position: relative;
      }
       .box2{
        width: 10rem;
           height: 10rem;
           background-color: rgb(253, 72, 238);
           position: absolute ;
           left: 10rem;
           top:12rem;
           font-size: 2rem;
       }
    </style>
</head>
<body>
    <div class="box">box</div>
    <h1></h1>
    <div class="box1">
        <div class="box2">box1</div>
        <h2>PHP学习</h2>
    </div>
</body>
</html>

第四课 box-sizing功能示例、相对定位与绝对定位的区别与联系及示例

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

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

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

2、相对定位与绝对定位，并实例演示他们的区别与联系

定位的展示

更多相关文章

随机推荐