search

博客列表 >box-sizing功能。相对定位与绝对定位。绝对定位：块级居中。

box-sizing功能。相对定位与绝对定位。绝对定位：块级居中。

愿情的博客
愿情的博客原创
2021年03月25日 13:46:38575浏览

一.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>box-sizing</title>
  8.     <style>
  9.         /* 初始化 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: 0;
  14.         }
  15.         /* :root=== html */
  16.         :root {
  17.             /* font-size: 16px; */
  18.             font-size: 10px;
  19.         }
  20.         /* em,rem */
  21.         /* em:根据元素得上下文来确定它得值 */
  22.         /* rem:根据根元素得字号来设置 */
  23.         .box {
  24.             /* font-size: 16px; */
  25.             font-size: 20px;
  26.             /* width: 200px; */
  27.             /* width: 12.5em; */
  28.             /* width: 12.5rem; */
  29.             width: 22rem;
  31.             /* height: 200px; */
  32.             /* height: 12.5em; */
  33.             /* height: 12.5rem; */
  34.             height: 21rem;
  37.             border: 2px solid black;
  38.             color: red;
  39.             /* padding: 上，右，下，左;顺时针顺序 */
  40.             /* 四个值： */
  41.             padding: 10px 5px 5px 10px;
  42.             /* 三个值：左右相同，上下不同 */
  43.             padding: 8px 10px 8px ;
  44.             /* 二值简化 只要写到第二个参数位置上的一定代表的是左右值*/
  45.             padding: 8px 10px;
  46.             /* padding: 10px; */
  47.             padding: 1rem;
  48.             margin: 1rem;
  51.             background-color: lightgreen;
  52.             /* 考虑将W3C的标准盒子转为IE盒子 */
  53.             /* 将盒子的padding和border计算在width,height内*/
  54.             box-sizing: border-box;
  55.             /* 再转为标准盒子 */
  56.             box-sizing: content-box;
  57.             background-clip: content-box;
  59.         }
  60.     </style>
  61.   </head>
  62.   <body>
  63.       <div class="box">box</div>
  64.       <!-- <h2>hello</h2> -->
  65.   </body>
  66. </body>
  68. </body>
  69. </html>

二.相对定位与绝对定位

定位

  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>
  9.     <style>
  10.       html {
  11.         /* border: 1px solid black; */
  12.       }
  13.       .box {
  14.         width: 20em;
  15.         height: 15em;
  16.         background-color: lawngreen;
  18.         /* 默认：静态定位，就是没有定位 */
  19.         /* position: :static */
  21.         /* 相对定位：自动的转为定位元素 */
  22.         /* 定位元素：只要这个元素上有非static的定位属性，就是定位元素 */
  23.         /* position: relative; */
  24.         /* 只要是定位偏移量，定位偏移量就有效 */
  25.         /* 相对于它在文档中的原始位置进行定位 */
  26.         /* top: 5em;
  27.         left: 4em; */
  29.         /* position: absolute; */
  30.         /* 绝对定位元素脱离了文档流 */
  31.         /* 文档流：显示顺序与熟悉顺序一致 */
  32.         /* 相对于它在文档流中的原始位置进行定位 */
  33.         /* top: 5em; */
  34.         /* left: 4em; */
  35.       }
  37.       .parent {
  38.         border: 1px solid black;
  40.         /* 转为定位元素，作为绝对定位元素的父级/定位参考/定位包含快 */
  41.         position: relative;
  43.         /* top: 4em;、 */
  44.         /* left: 4em; */
  45.         min-height: 30em;
  46.       }
  48.       /* 固定定位 */
  49.       /* 永远相对于html定位  */
  50.       .box {
  51.         /* position: fixed; */
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <!-- <div class="box"></div> -->
  57.     <!-- <h2>hello php</h2> -->
  59.     <div class="parent">
  60.       <!-- 父级定位元素 -->
  61.       <div class="box"></div>
  62.     </div>
  63.   </body>
  64. </html>

三.绝对定位的一个应用：块级居中

绝对定位块级居中

  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>
  9.     <style>
  10.       .box {
  11.         width: 15em;
  12.         height: 15em;
  13.         background-color: lawngreen;
  14.       }
  15.       /* 行内元素 */
  17.       .box {
  18.         /* 水平居中 */
  19.         /* text-align: center; */
  20.         /* 垂直居中 */
  21.         /* line-height: 15em; */
  22.       }
  24.       .parent {
  25.         border: 1px solid;
  26.         background-color: yellow;
  27.         width: 25em;
  28.         height: 25em;
  30.         /* 转为定位元素作为box的定位父级 */
  31.         position: relative;
  32.       }
  33.       /* 块元素居中 */
  34.       .box {
  35.         /* 水平居中 */
  36.         /* margin: auto auto auto auto; */
  37.         /* 上下auto,左右auto,但是没有出现我们想象中的垂直居中 */
  38.         /* margin: auto auto; */
  39.         /* margin: 0 80px; */
  40.         /* 为什么高度设置成auto是被解析成了0呢？ */
  41.         /* 这是基于一个布局常识 */
  42.         /* 布局的前提：页面宽高受限制，而而高度仅限内容的影响 */
  43.       }
  45.       /* 使用绝对定位一步到位块元素垂直居中 */
  47.       .box {
  48.         position: absolute;
  49.         /* 定位空间 */
  50.         top: 0;
  51.         left: 0;
  52.         right: 0;
  53.         bottom: 0;
  54.         /* 水平和垂直的居中 */
  55.         margin: auto;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="parent">
  61.       <div class="box"></div>
  62.     </div>
  63.   </body>
  64. </html>
上一条：【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)下一条：box-sizing
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多