Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing 属性的功能，绝对定位，相对定位 ----0323
Blogger Information
Blog 18
fans 1
comment 0
visits 12210
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 属性的功能，绝对定位，相对定位 ----0323
木樨
Original
538 people have browsed it

1.理解 box-sizing 功能并演示

box-sizing 属性

  • border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  • content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
  • inherit：从父元素继承 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.         padding: 0;
  12.         margin: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       /* :root === html */
  16.       html {
  17.         font-size: 10px;
  18.       }
  19.       /* em,rem  */
  20.       /* em: 根据元素的上下文来确定它的值 */
  21.       /* rem: 根据根元素的字号来设置 */
  22.       .box {
  23.         width: 200px;
  24.         height: 200px;
  25.         border: 2px solid #000;
  26.         padding: 1rem;
  27.         margin: 1rem;
  28.         font-size: 1.6rem;
  29.         background-color: greenyellow;
  30.         /* 考虑将w3c的标准盒子转为IE的盒子 */
  31.         /* 将盒子的padding和border计算在width,height内 */
  32.         /* box-sizing: border-box; */
  33.         /* 再转为标准盒子 */
  34.         box-sizing: content-box;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="box">item1</div>
  40.   </body>
  41. </html>

2.理解相对定位与绝对定位的功能并演示

position 属性

  • static(默认):默认文档流，靠 margin 来定位,忽略 top, bottom, left, right 声明
  • relative(相对定位)：相对于原位置的左上角通过 left、top 属性来重新定位,但不会让出原空间位置。
  • absolute(绝对定位)：相对于最近的那个脱离了标准流的父元素定位，如果没有则相对于当前视窗左上角定位，让出原空间位置。通过 left、top 属性来定位
  • fixed(固定定位)：总是以视窗左上角通过 top、left 定位(或以视窗右下角通过 right、bottom 定位)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  8.     <style>
  9.       .box {
  10.         width: 20em;
  11.         height: 15em;
  12.         background-color: lightgreen;
  14.         /* 默认:静态定位,就是没有定位 */
  15.         /* position: static; */
  17.         /* 相对定位: 自动的转为定位元素了 */
  18.         /* 定位元素: 只要这个元素上有非static的定位属性,就是定位元素 */
  19.         /* position: relative; */
  21.         /* 只要是定位元素,定位偏移量有效 */
  22.         /* 相对于它在文档流中的原始位置进行定位 */
  23.         /* top: 5em;
  24.         left: 4em; */
  26.         /* 绝对定位 :定位元素脱离了文档流,相对于它在文档流中的原始位置进行定位 */
  27.         /* 文档流: 显示顺序与书写顺序一致 */
  28.         /* position: absolute;
  29.         top: 5em;
  30.         left: 4em; */
  31.       }
  33.       .parent {
  34.         border: 1px solid #000;
  35.         /* 转为定位元素,做为绝对定位元素的定位父级/定位参考/定位包含块 */
  36.         position: relative;
  37.         min-height: 30em;
  38.       }
  40.       .box {
  41.         /* 固定定位 : 永远相对于html定位*/
  42.         position: fixed;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="parent">
  48.       <div class="box"></div>
  49.     </div>
  50.   </body>
  51. </html>

3.使用绝对定位实现“块级居中”

实现效果为：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  8.     <style>
  9.       .parent {
  10.         border: 1px solid;
  11.         background-color: yellow;
  12.         width: 25em;
  13.         height: 25em;
  14.         /* 转为定位元素，做为box的定位父级 */
  15.         position: relative;
  16.       }
  18.       /* 使用绝对定位一步搞定块元素的垂直水平居中 */
  19.       .box {
  20.         width: 15em;
  21.         height: 15em;
  22.         background-color: lightgreen;
  23.         /* 绝对定位 */
  24.         position: absolute;
  25.         /* 定位空间 */
  26.         top: 0;
  27.         left: 0;
  28.         right: 0;
  29.         bottom: 0;
  30.         /* 垂直和水平的居中 */
  31.         margin: auto;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="parent">
  37.       <div class="box"></div>
  38.     </div>
  39.   </body>
  40. </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