search

博客列表 >0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中

0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中

千山暮雪
千山暮雪原创
2021年03月24日 18:20:15614浏览

盒模型

盒模型
CSS盒模型由内容区（content），内边距（padding），边框（border），外边距（margin）组成。width和height设置内容框（content box）的宽度和高度。
总宽度 = 左外边距 + 左边框 + 左内边距 + 内容区宽度 + 右内边距 + 右边框 + 右外边距
总高度 = 上外边距 + 上边框 + 上内边距 + 内容区高度 + 下内边距 + 下边框 + 下外边距
为方便排版，工作中常常使用box-sizing：border-box样式转化为html盒模型，width=content+padding+border(此时，当width、padding、border设定时，那么content会随着实际的宽度进行自动缩放；)
border-box

示例：

width和heigth都为200px，padding为5px，border为1px，在默认情况下，box占用了width+padding+border= 212

1

使用box-sizing：border-box后，width和heigth仍为200px，content压缩成了188.

]

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>Document</title>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             font-size: 10px;
  15.             box-sizing: border-box;
  16.         }
  18.         .box {
  20.             border: 1px solid red;
  21.             height: 20em;
  22.             width: 20em;
  23.             padding: 0.5em;
  24.             margin: 1em;
  26.             background-color: lightgreen;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div class="box"></div>
  33. </body>
  35. </html>

相对定位position: relative;

相对于元素框在文档流中的原始位置进行定位。元素框仍在文档流中。

相对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .pos_left {
  11.             position: relative;
  12.             left: -30px;
  13.         }
  15.         .pos_right {
  16.             position: relative;
  17.             right: -30px;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <h3>这是正常位置</h3>
  24.     <h3 class="pos_left">这个位置相对于正常位置向左</h3>
  25.     <h3 class="pos_right">这个位置相对于正常位置向右</h3>
  26. </body>
  28. </html>

绝对定位position: absolute;

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。

示例：

当没有相对定位元素时，从初始html定位。
初始定位
当有相对定位元素时，从相对定位元素定位。
相对元素

代码如下：其它代码相同，区别在是否开启position: relative;关闭效果为上图，开启效果如下图。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         .gf {
  17.             height: 40em;
  18.             width: 40em;
  19.             background-color: darkkhaki;
  20.         }
  22.         .parent {
  23.             /* 父级元素相对定位 */
  24.             position: relative;
  25.             background-color: lightgreen;
  26.             height: 20em;
  27.             width: 20em;
  28.             top: 5em;
  29.             left: 5em;
  30.             border: 1px solid #000000;
  31.         }
  33.         .box {
  34.             /* 子级元素绝对定位 */
  35.             position: absolute;
  36.             height: 10em;
  37.             width: 10em;
  38.             left: 15em;
  39.             top: 15em;
  40.             background-color: lightpink;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="gf">祖级元素
  47.         <div class="parent">
  48.             父级元素
  49.             <div class="box">绝对定位</div>
  50.         </div>
  51.     </div>
  52. </body>
  54. </html>

块元素的垂直居中方法

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-size: 10px;
  15.         }
  18.         .parent {
  19.             /* 父级元素相对定位 */
  20.             position: relative;
  21.             background-color: lightgreen;
  22.             height: 20em;
  23.             width: 20em;
  24.             top: 5em;
  25.             left: 5em;
  26.         }
  28.         .box {
  29.             /* 子级元素绝对定位 */
  30.             position: absolute;
  31.             height: 10em;
  32.             width: 10em;
  33.             left: 0;
  34.             top: 0;
  35.             bottom: 0;
  36.             right: 0;
  37.             margin: auto;
  38.             background-color: lightpink;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  45.     <div class="parent">
  46.         父级元素
  47.         <div class="box">绝对定位</div>
  48.     </div>
  50. </body>
  52. </html>
上一条：box-sizing功能及相对定位与绝对定位实例演示下一条：简单介绍编辑器vscode的安装与配置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多