盒模型box-sizing功能" class="reference-link">>盒模型box-sizing功能

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。

CSS中组成一个块级盒子需要:
content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

padding和margin语法" class="reference-link">>padding和margin语法

1.padding内边距全写和简写

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

2.margin外边距全写和简写

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

box-sizing功能" class="reference-link">>box-sizing功能

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

实例展示box-sizing功能

定义盒子模型box尺寸为20rem(200px)后，内边距padding是10px，边框border是2px，整个盒子的尺寸在页面中显示尺寸为224px。

对盒子模型的属性box-sizing修改为box-sizing：border-box后，盒子计算规则改变，这个时候包含内容、内边距、边框等合成一个主体，尺寸为box的width设置值。

在网页设计中我们通常会在CSS加载之初对页面进行初始化，便于后续的页面布局设计。

  1.   /* 初始化 */
  2.       * {
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.       }

案例页面代码如下：

  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: border-box;
  14.       }
  16.       /* :root === html  */
  17.       :root {
  18.         /* font-size: 16px; */
  19.         font-size: 10px;
  20.       }
  21.       /* em,rem  */
  22.       /* em: 根据元素的上下文来确定它的值 */
  23.       /* rem: 根据根元素的字号来设置 */
  25.       .box {
  26.         /* font-size: 16px; */
  27.         font-size: 30px;
  28.         /* width: 200px; */
  29.         /* width: 12.5em; */
  30.         /* width: 12.5rem; */
  31.         width: 20rem;
  32.         /* height: 200px; */
  33.         /* height: 12.5em; */
  34.         /* height: 12.5rem; */
  35.         height: 20rem;
  36.         border: 2px solid;
  37.         /* padding: 上 右 下 左; 顺时针顺序 */
  38.         padding: 10px 5px 5px 10px;
  39.         /* 三值: 左右相同,而上下不同 */
  40.         padding: 10px 5px 5px;
  41.         /* 二值进行简化 */
  42.         padding: 10px;
  44.         /* 外边距margin设置方式与padding同 */
  45.         /* margin: 10px; */
  47.         background-color: lightgreen;
  48.         box-sizing: border-box;
  50.         /* 考虑将w3c的标准盒子转为IE的盒子 */
  51.         /* 将盒子的padding和border计算在width,height内 */
  52.         /* box-sizing: border-box; */
  53.         /* 再转为标准盒子 */
  54.         /* box-sizing: content-box;
  55.         background-clip: content-box; */
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <div class="box">box</div>
  61.   </body>
  62. </html>

相对定位与绝对定位、固定定位的区别" class="reference-link">>相对定位与绝对定位、固定定位的区别

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

我们通过定位操作实例来加深印象。

网页上设计两个box，box2嵌入box，下面有一行文本，便于显示位置关系。如下图：

  1.     <div class="box">
  2.       <div class="box2">box2</div>
  3.       我就这里
  4.     </div>

开启box2的相对定位后，位置发生变化，如下图：

  1. position: relative;
  2.      top: 10rem;
  3.      left: 10rem;

开启box2的绝对定位后，脱离文档流，文本行位置发生变化，如下图：

  1. position: absolute;
  2.      top: 10rem;
  3.      left: 10rem;

当我们给box也开启相对定位后，box位置平移，box2的位置跟随box也相应平移，如下图：

然后我们开启box2的固定定位后，box2的位置不再受box位置影响，如下图：

  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定位</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       :root {
  16.         /* font-size: 16px; */
  17.         font-size: 10px;
  18.       }
  20.       .box {
  21.         background-color: lightgreen;
  22.         width: 30rem;
  23.         height: 30rem;
  24.         position: relative;
  25.         left: 10rem;
  26.         top: 10rem;
  27.       }
  28.       .box2 {
  29.         background-color: orange;
  30.         width: 25rem;
  31.         height: 25rem;
  32.         font-size: 30px;
  33.         /* 默认:静态定位,就是没有定位 */
  34.         /* position: static; */
  36.         /* 相对定位: 自动的转为定位元素 */
  37.         /* 定位元素: 只要这个元素上有非static的定位属性,就是定位元素 */
  38.         /* 只要是定位元素,定位偏移量有效 */
  39.         /* 相对于它在文档流中的原始位置进行定位 */
  40.         /* position: relative;
  41.         top: 10rem;
  42.         left: 10rem; */
  44.         /* 绝对定位 */
  45.         /* 绝对定位元素脱离了文档流 */
  46.         /* 文档流: 显示顺序与书写顺序一致 */
  47.         /* 相对于它在文档流中的原始位置进行定位 */
  48.         /* position: absolute;
  49.         top: 10rem;
  50.         left: 10rem; */
  52.         /* 固定定位 */
  53.         /* 永远相对于html定位 */
  54.         position: fixed;
  55.         top: 10rem;
  56.         left: 10rem;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="box">
  62.       <div class="box2">box2</div>
  63.       我就这里
  64.     </div>
  65.   </body>
  66. </html>

更多相关文章

  1. CSS盒模型以及CSS定位
  2. 传统定位布三行三列和flex布局
  3. Selenium3自动化测试【16】元素定位之Tag
  4. 323作业
  5. 210323 CSS 盒子模型 字体图标 定位
  6. 传统定位和flex定位
  7. 固定定位：模态框
  8. 【css入门】css盒模型及css定位的常用属性详解
  9. box-sizing

随机推荐

  1. android检查网络是否正常
  2. 移动设备操作系统知识点简摘又名我的期末
  3. Android 驱动开发---Android Linux 内核
  4. android listview选中某一行，成选中状态颜
  5. android:文件下载
  6. Android WebKit实例简单实现
  7. 宏达电夺回Android冠军宝座
  8. Android MVC
  9. zabbix for android
  10. 浅入浅出 Android 安全：第一章 Android