简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > box-sizing功能。相对定位与绝对定位。绝对定位：块级居中。
Blogger Information
Blog 20
fans 0
comment 0
visits 11667
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功能。相对定位与绝对定位。绝对定位：块级居中。
愿情的博客
Original
574 people have browsed it

一.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>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！