search

博客列表 >html盒模型和布局的基础知识

html盒模型和布局的基础知识

无声胜有声丶
无声胜有声丶原创
2020年08月07日 14:29:091306浏览

1.盒模型的大小与位置的设置与计算

盒子模型：
宽度Width：150pk
高度height：150px
盒子边框border: 5px solid
盒子内边距padding: 10px
盒子背景色background-color
盒模型的计算方式：
宽度Width 150+边框border（左5+右5） 如果你盒模型加了内边距Padding那么它的计算方式是：宽度Width 150+内边距padding（左10+右10）+边框border（左5+右5）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>盒模型的大小与位置的设置与计算</title>
  7.   </head>
  8.   <style>
  9.     .box {
  10.       /* 盒子大小 */
  11.       width: 150px;
  12.       height: 150px;
  13.       /* 盒子边框 */
  14.       border: 5px solid;
  15.       /* 盒子背景色 */
  16.       background-color: lightseagreen;
  17.       /* 内边距 */
  18.       padding: 10px;
  19.       /* 绝对定位，盒子的位置 */
  20.       position: absolute;
  21.       top: 50px;
  22.       left: 100px;
  23.     }
  24.   </style>
  25.   <body>
  26.     <div class="box">盒子</div>
  27.   </body>
  28. </html>

2.自定义盒模型

box-sizing：允许您以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box；默认值
box-sizing: border-box; 那么这个值它就解决防止破坏页面中许多盒子的大小。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>自定义盒子</title>
  7.   </head>
  8.   <style>
  9.     /* 自定义盒子 */
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       box-sizing: border-box;
  14.     }
  15.     .box {
  16.       width: 200px;
  17.       height: 200px;
  18.       background-color: lightseagreen;
  19.       border: 5px solid;
  20.       /* 默认值 */
  21.       box-sizing: content-box;
  22.       box-sizing: border-box;
  23.     }
  24.   </style>
  25.   <body>
  26.     <div class="box">盒子</div>
  27.   </body>
  28. </html>

3.绝对定位与相对定位的区别与应用

绝对定位：如果他父节点有定位，那么他就相当于父节点定位，如父节点没有定位就看父节点的父节点有没有定位，依次类推，如祖先节点都没有定位，那就相对于body定位。
相对定位：相对于父节点的地位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>绝对定位与相对定位</title>
  7.   </head>
  8.   <style>
  9.     .box.one {
  10.       width: 200px;
  11.       height: 200px;
  12.       border: 1px solid;
  13.       background-color: palevioletred;
  14.       /* 绝对定位 */
  15.       position: absolute;
  16.       top: 50px;
  17.       left: 50px;
  18.     }
  19.     .box.two {
  20.       width: 100px;
  21.       height: 100px;
  22.       border: 1px solid;
  23.       background-color: orangered;
  24.       /* 相对定位 */
  25.       position: relative;
  26.       top: 50px;
  27.       left: 50px;
  28.     }
  30.   </style>
  31.   <body>
  32.     <div class="box one">
  33.       盒子1
  34.       <div class="box two">盒子2</div>
  35.     </div>
  36.   </body>
  37. </html>

4. 固定定位与绝对定位的区别

固定定位和绝对定位的区别是：固定定位是指相对于窗口的定位，绝对定位是指相对于有定位的祖先节点来定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>绝对定位和固定定位的区别</title>
  7.     <link rel="stylesheet" href="/0801/iconfont/iconfont.css" />
  8.     <style>
  9.       /* 绝对定位：把盒子用绝对定位，定位到左上角 */
  10.       .box {
  11.         width: 200px;
  12.         height: 200px;
  13.         background-color: pink;
  14.         position: absolute;
  15.         top: 50px;
  16.         left: 50px;
  17.       }
  19.       /* 固定定位：把购物车小图标用固定定位，定位到窗口的右下角 */
  20.       .iconfont {
  21.         font-size: 3rem;
  22.         color: red;
  23.         position: fixed;
  24.         right: 10px;
  25.         bottom: 10px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="iconfont icon-gouwuche"></div>
  31.     <div class="box">盒子</div>
  32.   </body>
  33. </html>

5.使用绝对定位实现垂直居中

首先垂直居中为什么会这么的困难，因为任何一个页面都是宽度受限而高度无限的。
那么可以用绝对定位position: absolute;来实现垂直居中。
如你需要水平居中只需要在绝对定位position: absolute;中添加（margin-left: auto;）（margin-right: auto;）两属性就可实现。
具体代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用绝对定位实现垂直居中</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .box {
  14.         width: 200px;
  15.         height: 200px;
  16.         background-color: lightseagreen;
  17.         /* 定位元素 */
  18.         position: relative;
  19.       }
  20.       .box > .module {
  21.         width: 50px;```css
  23.         height: 50px;
  24.         background-color: lime;
  25.         /* 绝对定位 */
  26.         position: absolute;
  27.         /* 定位起点 */
  28.         top: 0;
  29.         left: 0;
  30.         /* 定位终点 */
  31.         right: 0;
  32.         bottom: 0;
  33.         /* 垂直居中 */
  34.         margin: auto;
  35.         /* 水平居中的代码如下 */
  36.         /* margin-left: auto; */
  37.         /* margin-right: auto; */
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="box">
  43.       <div class="module">模块</div>
  44.     </div>
  45.   </body>
  46. </html>

6.使用浮动实现三列布局

浮动:是只允许水平浮动，没有垂直浮动
具体代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用浮动实现三列布局</title>
  7.   </head>
  8.   <style>
  9.     .content {
  10.       background-color: #cccccc;
  11.       width: 600px;
  12.       min-height: 400px;
  13.       margin: auto;
  14.     }
  15.     .module1 {
  16.       width: 100px;
  17.       background-color: tan;
  18.       min-height: 400px;
  19.       float: left;
  20.     }
  21.     .module2 {
  22.       width: 100px;
  23.       background-color: turquoise;
  24.       min-height: 400px;
  25.       float: right;
  26.     }
  27.     .module3 {
  28.       width: 400px;
  29.       background-color: yellow;
  30.       min-height: 400px;
  31.       float: left;
  32.     }
  33.   </style>
  34.   <body>
  35.     <div class="content">
  36.       <div class="module1">第一模块</div>
  37.       <div class="module2">第二模块</div>
  38.       <div class="module3">第三模块</div>
  39.     </div>
  40.   </body>
  41. </html>

7.使用绝对定位实现二列布局

使用绝对定位布局的时候你的定位父节点和参考点很重要。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用绝对定位实现二列布局</title>
  7.   </head>
  8.   <style>
  9.     .content {
  10.       width: 500px;
  11.       background-color: slategray;
  12.       margin: auto;
  13.       min-height: 400px;
  14.       /* 转为子元素的定位父节点 */
  15.       position: relative;
  16.     }
  17.     .left {
  18.       width: 200px;
  19.       background-color: steelblue;
  20.       min-height: 400px;
  21.       /* 绝对定位,注意这里是定位左边节点 */
  22.       position: absolute;
  23.       top: 0;
  24.       left: 0;
  25.     }
  26.     .right {
  27.       width: 200px;
  28.       background-color: steelblue;
  29.       min-height: 400px;
  30.       /* 绝对定位，注意这里是定位右边节点 */
  31.       position: absolute;
  32.       top: 0;
  33.       right: 0;
  34.     }
  35.   </style>
  36.   <body>
  37.     <div class="content">
  38.       <div class="left">左侧</div>
  39.       <div class="right">右侧</div>
  40.     </div>
  41.   </body>
  42. </html>

8.使用圣杯布局实现三列布局

圣杯布局主要细节：
1.主题区（内容）优先显示以及默认高度是自适应。
2.圣杯布局中的所有快元素实行浮动
3.给左右区域添加相对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用圣杯布局实现三列布局</title>
  7.   </head>
  8.   <style>
  9.     .container {
  10.       overflow: hidden;
  11.       padding: 0 100px;
  12.     }
  13.     .container > * {
  14.       min-height: 200px;
  15.       float: left;
  16.     }
  17.     .container > .left {
  18.       width: 100px;
  19.       background-color: lightskyblue;
  20.       margin-left: -100%;
  21.       position: relative;
  22.       right: 100px;
  23.     }
  24.     .container > .right {
  25.       width: 100px;
  26.       background-color: lightskyblue;
  27.       margin-left: -100px;
  28.       position: relative;
  29.       left: 100px;
  30.     }
  32.     .container > .main {
  33.       width: 100%;
  34.       background-color: lightsalmon;
  35.     }
  36.   </style>
  37.   <body>
  38.     <div class="container">
  39.       <div class="main">内容模块</div>
  40.       <div class="left">左边模块</div>
  41.       <div class="right">右边模块</div>
  42.     </div>
  43.   </body>
  44. </html>

上一条：showdoc 自动生成API文档下一条：私有版 showdoc 文档管理工具
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议