一.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>

更多相关文章

  1. box-sizing
  2. 盒模型和定位
  3. 0323作业
  4. 0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中
  5. box-sizing功能及相对定位与绝对定位实例演示
  6. 演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系
  7. 学习CSS（二）
  8. box-sizing和定位原理
  9. css之盒模型与定位

随机推荐

  1. android关机重启流程代码
  2. Rexsee API介绍：Android屏幕锁定Keyguard
  3. Android获取手机信号强度/信号格数
  4. Android NDK入门之Hello Jni
  5. 基于MQTT实现Android消息推送(Push…
  6. Android 默认壁纸 简单分析
  7. Kotlin 风险高、RxJava 已过时，Android(安
  8. Android 如何从屏幕底部向上滑出一个view
  9. Android Android Studio 快捷键整理分享,
  10. android onTouchEvent和setOnTouchListen