PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 盒模型的学习

盒模型的学习

阿杰
阿杰 原创
2020年06月18日 17:31:12 868浏览

1.盒模型常用属性

  • padding属性（边框内壁与内部元素之间的距离）
    padding：1px 2px 3px 4px; (顺序是上右下左)
    padding：1px 2px; (上下/左右)
    padding：1px 2px 3px; (上1px下2px左右3px)
    也可以具体分为：padding-top、padding-right、padding-bottom、padding-left

  • margin属性（边框外壁与其他元素之间的距离）
    margin：1px 2px 3px 4px; (顺序是上右下左)
    margin：1px 2px; (上下/左右)
    margin：1px 2px 3px; (上1px下2px左右3px)
    也可以具体分为：margin-top、margin-right、margin-bottom、margin-left
    注意：当两个盒子在垂直方向上，外边距会产生折叠

    1.       .box{
    2.           width: 200px;
    3.           height: 200px;
    4.       }
    5.       .box.one{
    6.           padding: 10px;
    7.           border: 2px solid #000000;
    8.           background-color: lightgreen;
    9.           background-clip: content-box;
    10.           margin-bottom: 20px;
    11.       }
    13.       .box.two{
    14.           padding: 10px;
    15.           border: 2px solid #000000;
    16.           background-color: lightcoral;
    17.           background-clip: content-box;
    18.           /* 当两个盒子在垂直方向上，外边距会产生折叠 */
    19.           margin-top: 30px;
    20.       }
    22.       <div class="box one"></div>
    23.       <div class="box two"></div>

  • border属性（边框）
    上下左右边框具体分为：border-top、border-bottom、border-left、border-right
    边框颜色：border-color
    边框样式：border-style/(常用solid-实线、dashed-波折线)

    1.       .box.one{
    2.           padding: 10px;
    3.           border: 2px solid #000000;
    4.           background-color: lightgreen;
    5.           background-clip: content-box;
    6.           margin-bottom: 20px;
    7.           border-style: dashed;
    8.       }
    10.       .box.two{
    11.           padding: 10px;
    12.           border: 2px solid #000000;
    13.           background-color: lightcoral;
    14.           background-clip: content-box;
    15.           /* 当两个盒子在垂直方向上，外边距会产生折叠 */
    16.           margin-top: 30px;
    17.           border-style: solid;
    18.       }

2.元素的定位

一旦一个元素被添加了position，且值非static，那么它就是定位元素

  • position：relative;（相对定位是相对于自己做了偏移，这个元素在文档流中的位置不释放）

    1.       .box.parent{
    2.           background-color: lightblue;
    3.           /* 一旦一个元素被添加了position，且值非static，那么它就是定位元素 */
    4.           position: relative;
    5.           /* 相对定位是相对于自己做了偏移，这个元素在文档流中的位置不释放 */
    6.           left: 30px;
    7.           top: 30px;
    8.       }
    10.       <div class="box parent">
    11.           <div class="box son"></div>
    12.       </div>

  • position：absolute；（绝对定位:相对于它的父级进行定位，没有定位父级的情况下它的定位父级默认是<body>）

    1.       .son{
    2.           width: 100px;
    3.           height: 100px;
    4.           background-color: violet;
    6.           /* 绝对定位*/
    7.           position: absolute;
    8.           left: 50px;
    9.           top: 50px;
    10.       }

  • position：fixed； 固定定位：忽略你的定位父级，总是相对于<body>定位

3.元素大小计算

  1.         .box{
  2.             width: 200px;
  3.             height: 180px;
  4.             border: 3px solid #000000;
  5.             padding: 10px;
  6.             background-color: violet;
  7.             background-clip: content-box;
  8.         }
  10.         <div class="box"></div>

  • 计算元素的宽高
    width：content-width + padding-left/right + border-left/right = 200+20+6=226
    height：content-height + padding-top/bottom + border-top/bottom = 180+20+6=206
    目前padding和border的值会影响到盒子的大小

  • 如何设置盒子大小随padding和border的变化而变化
    box-sizing：重新计算盒大小
    box-sizing：content-box; 默认值，以内容区为准
    box-sizing: border-box; 以边框为准

    1.       .box{
    2.           width: 200px;
    3.           height: 180px;
    4.           border: 3px solid #000000;
    5.           padding: 40px;
    6.           background-color: violet;
    7.           background-clip: content-box;
    9.           /* box-sizing：重新计算盒大小 */
    10.           /* content-box：默认值，以内容区为准 */
    11.           box-sizing: border-box;
    12.       }

  • 通过js获取元素的大小与位置

    1.       .box{
    2.           width: 200px;
    3.           height: 180px;
    4.           padding: 10px;
    5.           border: 2px solid #000000;
    6.           margin: 10px;
    7.           background-color: lightgreen;
    8.           background-clip: content-box;
    9.       }
    11.       .pos{
    12.           position: relative;
    13.           top: 30px;
    14.           left: 50px;
    15.       }
    1. <div class="box pos"></div>
    1.   const box = document.querySelector(".box");
    2.   // 1.内容区大小与位置
    3.   // 大小 = width/height + padding
    4.   console.log(box.clientWidth);
    5.   console.log(box.clientHeight);
    6.   // clientLeft/clientTop: 表示padding到border外边缘的距离：就是边框宽度
    7.   console.log(box.clientLeft);
    8.   console.log(box.clientTop);
    9.   // 更多的时候用了获取可视区大小：视口
    10.   console.log(document.documentElement.clientWidth);
    11.   console.log(document.documentElement.clientHeight);
    13.   // 2.当前元素的定位偏移量，与定位有关
    14.   // 定位父级
    15.   console.log(box.offsetParent);
    16.   // 这个元素现在是一个真正的盒子，包括了内容、padding、border
    17.   // 真实宽高：加上border
    18.   console.log(box.offsetWidth);
    19.   console.log(box.offsetHeight);

4.元素的水平与垂直对齐

  1.         .container{
  2.             height: 300px;
  3.             width: 300px;
  4.             background-color: lightgreen;
  5.         }
  7.         .container .item{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: violet;
  11.         }
  13.         <div class="container">
  14.             <div class="item"></div>
  15.         </div>

  • 水平居中
    text-align: center; 这个对块级元素不起作用
    margin: auto; 让浏览器自动计算左右外边距

    1.       .container .item{
    2.           width: 100px;
    3.           height: 100px;
    4.           background-color: violet;
    6.           /* 水平居中 */
    7.           /* text-align: center; */
    8.           /* margin-left: 100px;             */
    9.           /* 让浏览器自动计算左右外边框 */
    10.           margin: auto;
    11.       }

  • 垂直居中
    margin: auto; 不起左右，垂直居中实现不了
    使用flex布局

    1.       .container{
    2.           height: 300px;
    3.           width: 300px;
    4.           background-color: lightgreen;
    5.           display: flex;
    6.       }
    8.       .container .item{
    9.           width: 100px;
    10.           height: 100px;
    11.           background-color: violet;
    13.           /* 水平居中 */
    14.           /* text-align: center; */
    15.           /* margin-left: 100px;             */
    16.           /* 让浏览器自动计算左右外边距 */
    17.           margin: auto;
    19.           /* 垂直居中 */
    20.           /* display: table-cell;
    21.           vertical-align: middle; */
    22.           align-items: center;
    23.       }


    通过绝对定位来实现垂直居中

    1.       .container{
    2.           height: 300px;
    3.           width: 300px;
    4.           background-color: lightgreen;
    5.           /* display: flex; */
    7.           /* 转为定位元素 */
    8.           position: relative;
    9.       }
    11.       .container .item{
    12.           width: 100px;
    13.           height: 100px;
    14.           background-color: violet;
    16.           /* 水平居中 */
    17.           /* text-align: center; */
    18.           /* margin-left: 100px;             */
    19.           /* 让浏览器自动计算左右外边距 */
    20.           /* margin: auto; */
    21.           margin-left: auto;
    22.           margin-right: auto;
    24.           /* 垂直居中，默认margin-top/bottom:0 */
    25.           /* align-items: center; */
    26.           margin-top: auto;
    27.           margin-bottom: auto;
    29.           /* 通过绝对定位来实现垂直居中 */
    30.           position: absolute;
    31.           /* 让当前元素绝对定位的上下文充满整个父级容器 */
    32.           /* 左上角开始 */
    33.           top: 0;
    34.           left: 0;
    35.           /* 右下角结束 */
    36.           right: 0;
    37.           bottom: 0;
    38.       }


    案例：实现登录表单在页面中水平垂直居中

    1.       body{
    2.           background-color: #efefef;
    3.       }
    4.       form{
    5.           width: 300px;
    6.           height: 300px;
    7.           background-color: lightgreen;
    9.           position: absolute;
    10.           /* 让当前元素绝对定位的上下文充满整个父级容器 */
    11.           /* 左上角开始 */
    12.           top: 0;
    13.           left: 0;
    14.           /* 右下角结束 */
    15.           right: 0;
    16.           bottom: 0;
    18.           /* 水平垂直居中 */
    19.           margin: auto;
    20.       }
    22.   <form action="">
    23.       <p>
    24.           <label for="">Email:</label>
    25.           <input type="email" name="" id="">
    26.       </p>
    27.       <p>
    28.           <label for="">Password:</label>
    29.           <input type="password" name="" id="">
    30.       </p>
    31.       <button>提交</button>
    32.   </form>

上一条： CSS盒子模型 下一条： nginx expires设置数据过期时间
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程