search

博客列表 >演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系

演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系

JiaJieChen
JiaJieChen原创
2021年03月24日 16:09:31776浏览

演示box-sizing功能并实例

1.首先了解盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。
CSS中组成一个块级盒子需要:
content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。如下图：

这个图片内部200*200的地方是content内容区域,padding是内边距,border是边框,,margin是外边距。相信大家看了这个简介之后对于盒模型有一定的理解。下面来介绍一下padding和margin的语法

2.padding和margin语法

①padding/内边距全写和简写
属性 几值 语法/含义
padding-top 是设置上内边距，大小用数值表示
padding-right 是设置右内边距，大小用数值表示
padding-buttom 是设置下内边距，大小用数值表示
padding-left 是设置左内边距，大小用数值表示
padding 四值 0px(上) 0px(右) 0px(下) 0px(左) 顺时针编写
padding 三值 0px(上) 0px(左右相等) 0px(下)
padding 两值 0px(上下相等) 0px(左右相等)
padding 一值 0px(上下左右相等)
②margin/外边距全写和简写
属性 几值 语法/含义
margin-top 是设置上外边距，大小用数值表示
margin-right 是设置右外边距，大小用数值表示
margin-buttom 是设置下外边距，大小用数值表示
margin-left 是设置左外边距，大小用数值表示
margin 四值 0px(上) 0px(右) 0px(下) 0px(左) 顺时针编写
margin 三值 0px(上) 0px(左右相等) 0px(下)
margin 两值 0px(上下相等) 0px(左右相等)
margin 一值 0px(上下左右相等)

3.box-sizing功能

属性 含义
box-sizing-border-box 可以改变这个属性盒子原本计算大小的规则，将文本内容，内边距，边框，外边距的大小值计算方式合成一个主体
box-sizing-content-box 还原这个属性盒子的计算方式，只能将文本内容，外边距，边框大小值计算在内，外边框大小值不计算在内

细说box-sizing功能和实列

①浏览器原本计算盒模型大小方式

我们可以从这张图片里面看到浏览器的默认计算盒模型大小的方式，我们给盒子设置了高200px，宽200px，边框上下高左右宽1px，内边距上下高10px，左右宽5px，外边距上下宽10px，上下高10px，但是浏览器的计算方式不会把外边距给计算到内，所以设计网页页面的时候往往外边距会破坏整个网页布局，所以我们要用到box-sizing-border-box功能，请往下看。

②设置box-sizing:border-box改变原本盒模型计算大小方式

设置好box-sizing:border-box后，计算方式改变成了把文本内容，内边距，边框，外边距的大小值计算方式合成了一个主体，就是原本设置好的宽200像素，高200像素，这样可以更好的设计页面布局大小。

③*{}初始化小技巧

我们一般会用这个代码进行页面的初始化，把所有元素的外边距，内边距设置为0，计算方式设置为box-sizing：border-box

  1.   <style type="text/css">
  2.      * {
  3.         padding: 0px;
  4.         margin: 0px;
  5.         box-sizing: border-box;
  6.       }
  7.     </style>
④代码块
  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 type="text/css">
  9.       * {
  10.         padding: 0px;
  11.         margin: 0px;
  12.         box-sizing: border-box;
  13.       }
  14.       #box {
  15.         /* 设置盒子边框大小为1个像素 */
  16.         border: 1px solid;
  17.         background: aqua;
  18.         /* 设置盒子宽度为200像素 */
  19.         width: 200px;
  20.         /* 设置盒子高度为200像素 */
  21.         height: 200px;
  22.         /* 设置内边距上下高度为10像素 左右宽度为5像素 */
  23.         padding: 10px 5px;
  24.         /* 设置外边距上下高度/左右宽度为10像素 */
  25.         margin: 10px;
  26.         /* box-sizing: border-box; */
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div id="box">box</div>
  32.   </body>
  33. </html>

演示相对定位与绝对定位的区别与联系

1.定位属性

属性 含义
position: static 默认定位
position：relative 相对定位，相对自己的定位元素位置，没有脱离文档流
position：absolute 绝对定位，相对自己的原始定位位置，脱离文档流
position:fixed 固定定位，相对html位置，脱离文档流

2.定位属性演示

①relative相对定位演示

从这个图片我们可以看出，用相对定位去定位一个盒子，我们可以定位它距离html的顶边，左边，距离大小，还可以证明relative相对定位属性没有把这个盒子脱离文档流，盒子还在文档流中。

②absolute绝对定位演示

从这个图片我们可以看出，absolute绝对定位把第一个盒子脱离文档流了，第二个盒子代替了它原先的位置。它和相对定位不同的是，相对定位没有脱离文档流，二绝对定位脱离了文档流，绝对定位是相对自己原始的位置。

③fixed固定定位演示

从图片上可以看出，固定定位也脱离了文档流，而且还固定在设置好的坐标上不会动弹，就算是自己滑动滚轮使得页面上下滑动，它还是在这个坐标上不会随意动弹。

④代码块
  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>
  8.     <style type="text/css">
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       :root {
  15.         border: 2px solid;
  16.       }
  17.       /* 我这边设置了两个盒子来演示定位元素的区别
  18.         1.相对定位元素：position：relative */
  19.       /*#box1 {
  20.          设置盒子边框大小
  21.         border: 1px solid;
  22.          设置盒子宽度大小
  23.         width: 200px;
  24.          设置盒子高度大小
  25.         height: 200px;
  26.          设置盒子背景颜色
  27.         background: aqua;
  28.         设置相对定位元素：position：relative
  29.         position: relative;
  30.          距离相对html顶部50像素距离
  31.         top: 50px;
  32.          距离相对html左部50像素距离
  33.         left: 50px;
  34.       }*/
  35.       /* 2.绝对定位元素:position:absolute
  36.        #box1 {
  37.         /* 设置盒子边框大小
  38.         border: 1px solid;
  39.         /* 设置盒子宽度大小
  40.         width: 200px;
  41.         /* 设置盒子高度大小
  42.         height: 200px;
  43.         /* 设置盒子背景颜色
  44.         background: aqua;
  45.         /* 设置绝对定位元素:position:absolute
  46.         position: absolute;
  47.         top: 3em;
  48.         left: 3em;
  49.       } */
  51.       #box1 {
  52.         /* 设置盒子边框大小  */
  53.         border: 1px solid;
  54.         /* 设置盒子宽度大小  */
  55.         width: 200px;
  56.         /* 设置盒子高度大小  */
  57.         height: 200px;
  58.         /* 设置盒子背景颜色  */
  59.         background: aqua;
  60.         /*设置盒子是固定定位：position：fixed**/
  61.         position: fixed;
  62.         left: 220px;
  63.       }
  65.       #box2 {
  66.         /* 设置盒子边框大小 */
  67.         border: 1px solid;
  68.         /* 设置盒子宽度大小 */
  69.         width: 200px;
  70.         /* 设置盒子高度大小 */
  71.         height: 2000px;
  72.         /* 设置盒子背景颜色 */
  73.         background: palevioletred;
  74.         /* position: relative;
  75.         top: 3em; */
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <div id="box1">我是固定定位</div>
  81.     <div id="box2">我是默认定位</div>
  82.   </body>
  83. </html>
上一条：学习CSS（二）下一条：万岳在线教育源码,教育系统源码,教育直播源码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多