search

博客列表 >盒模型以及HTML布局。。。。。

盒模型以及HTML布局。。。。。

BARRY
BARRY原创
2020年09月14日 00:58:48575浏览

作业

盒模型知识点 以及位置大小计算
  1. 边框的样式有：solid（实线），dashed（虚线），dotted（电线）。
  2. border（边框）以内的盒子区域 统称为盒子的可视区域，内容只能出现在width和height设置的区域。
  3. marigin（外边距）主要用来改变盒子的位置关系，只影响到盒子的排列位置,不影响大小。padding（内边距）主要用来改变内容的位置关系。
  4. 默认盒子的计算公式：内容区+内边距+边框，
    盒子模型的实际宽度 : width+左右padding+左右border，
    盒子模型的实际长度 : width+上下padding+上下border。

box-sizing

  • box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框
  • 盒模型box-sizing尺寸有两种：content-box 和 border-box; 默认的是 content-box； 区别是两者的盒子的宽度是否包含边框和内边距. 
    1. <!DOCTYPE html>
    2. <html lang="zh-cn">
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <title>box-sizing</title>
    6.   <style>
    7.     .test {
    8.       width: 200px;
    9.       height: 70px;
    10.       padding: 10px;
    11.       border: 10px solid blueviolet;
    12.       box-sizing: content-box;
    13.       background: plum;
    14.     }
    15.     .test2 {
    16.       width: 200px;
    17.       height: 70px;
    18.       padding: 10px;
    19.       border: 10px solid blueviolet;
    20.       box-sizing: border-box;
    21.       background: palegreen;
    22.       margin-top: 20px;
    23.     }
    24.   </style>
    25. </head>
    26. <body>
    27.   <div class="test">content-box</div>
    28.   <div class="test2">border-box</div>
    29. </body>
    30. </html>

绝对定位和相对定位

-绝对定位的应用 

  1.     <title>绝对点位</title>
  2.     <style>
  3.       p {
  4.         position: absolute;
  5.         width: 120px;
  6.         height: 120px;
  7.         top: 100px;
  8.         left: 0px;
  9.         background-color: gold;
  10.       }
  12.       div {
  13.         position: absolute;
  14.         width: 300px;
  15.         height: 300px;
  16.         top: 80px;
  17.         left: 180px;
  18.         border: 1px solid;
  19.         background-color: honeydew;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <p>相对于页面定位，距离页面的顶部100像素，距离左边0像素</p>
  25.     <div>
  26.       相对于页面定位的div元素，距离顶端80像素，距离左边180像素
  27.       <p>
  28.         相对于父元素div定位的，距离div元素的顶端100像素，距离div元素的左边0像素
  29.       </p>
  30.     </div>
  31.   </body>

运行结果

相对定位 

  1. <title>相对定位</title>
  2.     <style>
  3.       div {
  4.         width: 200px;
  5.         height: 400px;
  6.         border: 1px solid;
  7.         margin-left: 80px;
  8.         margin-top: 100px;
  9.       }
  10.       p {
  11.         width: 150px;
  12.         height: 100px;
  13.         background-color: #c8edff;
  14.       }
  15.       .left {
  16.         position: relative;
  17.         left: -50px;
  18.       }
  19.       .right {
  20.         position: relative;
  21.         left: 140px;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div>
  27.       <p>正常段落的状态</p>
  28.       <p class="left">相对自己的正常位置向左偏移了50像素</p>
  29.       <p class="right">相对自己的正常位置向右偏移了140像素</p>
  30.     </div>
  31.   </body>

运行结果

固定定位和绝对定位的区别

固定定位于绝对定位最根本的区别还是偏移基准的不同，固定定位是相对于浏览器窗口，而绝对定位是相对于父级元素。 

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <title>固定定位和绝对定位</title>
  4.     <style>
  5.       #gd {
  6.         width: 300px;
  7.         height: 300px;
  8.         background: plum;
  9.         position: fixed;
  10.       }
  11.       #jd {
  12.         width: 300px;
  13.         height: 300px;
  14.         background: greenyellow;
  15.         position: absolute;
  16.         left: 400px;
  17.         top: 400px;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div id="jd">我是绝对定位，我的位置会随着窗口大小变化</div>
  23.     <div id="gd">我是固定定位，我的位置不会随着浏览器滚动条变化</div>
  24.   </body>

运行结果对比

绝对定位实现垂直居中

  1.   <head>
  2.     <meta charset=" utf-8" />
  3.     <title>垂直居中</title>
  4.     <style type="text/css">
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: border-box;
  9.       }
  10.       .father {
  11.         background-color: yellowgreen;
  12.         width: 500px;
  13.         height: 500px;
  14.         margin: 0 auto;
  15.         position: relative;
  16.       }
  17.       .children {
  18.         background-color: red;
  19.         position: absolute;
  20.         width: 200px;
  21.         height: 200px;
  22.         top: 0;
  23.         left: 0;
  24.         right: 0;
  25.         bottom: 0;
  26.         margin: auto;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="father">
  32.       <div class="children">垂直居中</div>
  33.     </div>
  34.   </body>

运行结果

绝对定位实现两列布局

  1.   <head>
  2.     <meta charset="UTF-8" />
  3.     <title>两列布局</title>
  4.     <style>
  5.       * {
  6.         margin: 0px;
  7.         padding: 0px;
  8.       }
  9.       .main {
  10.         background: powderblue;
  11.         position: relative;
  12.         overflow: hidden;
  13.       }
  14.       .border {
  15.         background-color: lightgreen;
  16.         border: 2px solid red;
  17.         height: 300px;
  18.       }
  19.       .left {
  20.         width: 200px; /*定宽的列*/
  21.         height: 600px;
  22.       }
  23.       .right {
  24.         width: 100%; /*自适应宽度的列*/
  25.         height: 600px;
  26.         position: absolute;
  27.         top: 0px;
  28.         left: 220px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="main">
  34.       <div class="left border"></div>
  35.       <div class="right border"></div>
  36.     </div>
  37.   </body>

运行结果

浮动实现三列布局

  1.  <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>三列布局</title>
  5.     <style>
  6.       @import url(buju3.css);
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <!-- 头部 -->
  11.     <div class="header">
  12.       <div class="content">
  13.         <ul>
  14.           <li><a href="">首页</a></li>
  15.           <li><a href="">秒杀</a></li>
  16.           <li><a href="">团购</a></li>
  17.           <li><a href="">精品女装</a></li>
  18.           <li><a href="">客服</a></li>
  19.         </ul>
  20.       </div>
  21.     </div>
  22.     <!-- 主体 -->
  23.     <div class="container">
  24.       <div class="left">左侧</div>
  25.       <div class="main">内容</div>
  26.       <div class="right">右侧</div>
  27.     </div>
  28.     <!-- 底部 -->
  29.     <div class="footer">
  30.       <div class="content">
  31.         <p>这是 底部 ，没啥好写的</p>
  32.       </div>
  33.     </div>
  34.   </body>
  1. /* buju3.css代码（初始化开始） */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   /* 去掉下滑线 */
  9.   text-decoration: none;
  10.   color: red;
  11. }
  12. /* 鼠标悬停改变颜色 */
  13. a:hover {
  14.   color: yellowgreen;
  15. }
  16. /* 列表去掉小黑点 */
  17. li {
  18.   list-style: none;
  19. }
  20. /* （ 初始化结束）头部和底部 */
  21. .header,
  22. .footer {
  23.   height: 40px;
  24.   background-color: lightcyan;
  25. }
  26. .content {
  27.   width: 1000px;
  28.   margin: auto;
  29. }
  30. .content:first-of-type li {
  31.   float: left;
  32.   padding: 0 20px;
  33.   line-height: 40px;
  34. }
  35. .footer {
  36.   text-align: center;
  37.   line-height: 40px;
  38. }
  39. /* 主体内容区 */
  40. .container {
  41.   width: 1000px;
  42.   background-color: thistle;
  43.   margin: 20px auto;
  45.   /* 绝对定位（设置为定位父级） */
  46.   position: relative;
  47.   min-height: 550px;
  48. }
  49. /* 左侧 */
  50. .left {
  51.   width: 200px;
  52.   background-color: yellow;
  53.   min-height: 550px;
  54.   /* 绝对定位 */
  55.   position: absolute;
  56.   top: 0;
  57.   left: 0;
  58. }
  59. /* 左侧 */
  60. .right {
  61.   width: 200px;
  62.   background-color: yellow;
  63.   min-height: 550px;
  64.   position: absolute;
  65.   top: 0;
  66.   right: 0;
  67. }
  68. .main {
  69.   width: 600px;
  70.   background-color: slateblue;
  71.   min-height: 550px;
  72.   position: absolute;
  73.   top: 0;
  74.   left: 200px;
  75. }

运行结果

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

运行结果

上一条：模板字面量及模板标签下一条：vue路由组件实现Hash路由案例，Gitee的Git版本控制流程-vue-54课9.10
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多