search

博客列表 >2020.08.01-02周末班作业

2020.08.01-02周末班作业

sunyinF
sunyinF原创
2020年08月13日 01:10:22587浏览

1.盒模型的大小与位置的设置与计算；
大小由width定义宽度、height定义高度；
位置的设置主要由外边距margin控制，依次顺序为上右下左顺时针方向；可切换成单一方向如margin-top:10px(距离上面增加十个像素点)；
盒的计算为：内容区+内边距+边框；

  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>Document</title>
  7.     <style>
  8.       .he1 {
  9.         /*内容区*/
  10.         width: 200px; /*宽度*/
  11.         height: 200px; /*高度*/
  12.         background: #ff0; /*背景*/
  13.         padding: 10px; /*内边距*/
  14.         background-clip: content-box; /*背景裁切*/
  15.         margin: 20px; /*外边距*/
  16.         border: 2px solid; /*边框，不加颜色代码为默认色*/
  17.       }
  18.       .he2 {
  19.         width: 300px;
  20.         height: 300px;
  21.         background: #f00;
  22.         margin: 30px; /*外边距*/
  23.         border: 2px dashed; /*dashed:虚线；solid：实线；*/
  24.       }
  25.       /* 两个盒子外边距重叠时会出现折叠/塌陷 */
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="he1">盒一</div>
  30.     <div class="he2">盒二</div>
  31.   </body>
  32. </html>


2.box-sizing解决了什么问题；
解决了盒子默认计算方式的修改，实现布局计算统一；

  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>Document</title>
  7.     <style>
  8.       .he1 {
  9.         width: 200px;
  10.         height: 200px;
  11.         background: #faa;
  12.         border: 10px solid;
  13.         padding: 20px;
  14.         /* box-sizing: content-box; content-box:默认计算方式 ; */
  15.         box-sizing: border-box; /* border-box:改变盒模型计算方式为width设置的值 */
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="he1">盒一</div>
  21.   </body>
  22. </html>


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>Document</title>
  7.     <style>
  8.       .he1 {
  9.         width: 200px;
  10.         height: 200px;
  11.         /* position: static; 默认静态定位属性，可以不写 */
  12.         position: relative; /*relative:设置当前位置为参照物*/
  13.         background: #f00;
  14.         left: 50px;
  15.       }
  16.       .he2 {
  17.         width: 300px;
  18.         height: 300px;
  19.         position: relative;
  20.         background: #ff0;
  21.         top: 10px;
  22.       }
  23.       .he3 {
  24.         width: 100px;
  25.         height: 100px;
  26.         position: absolute; /*absolute：以父级为参照物移动 */
  27.         top: 50px;
  28.         left: 50px;
  29.         background: #fff;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <!-- 相对定位 -->
  35.     <div class="he1">相对定位</div>
  36.     <!-- 绝对定位 -->
  37.     <div class="he2">
  38.       <div class="he3">
  39.         绝对定位
  40.       </div>
  41.     </div>
  42.   </body>
  43. </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>Document</title>
  7.     <style>
  8.       .he1 {
  9.         width: 200px;
  10.         height: 200px;
  11.         /* position: static; 默认静态定位属性，可以不写 */
  12.         position: relative; /*relative:设置当前位置为参照物*/
  13.         background: #f00;
  14.         left: 50px;
  15.       }
  16.       .he2 {
  17.         width: 300px;
  18.         height: 300px;
  19.         position: relative;
  20.         background: #ff0;
  21.         top: 10px;
  22.       }
  23.       .he3 {
  24.         width: 100px;
  25.         height: 100px;
  26.         position: absolute; /*absolute：以父级为参照物移动 */
  27.         top: 50px;
  28.         left: 50px;
  29.         background: #fff;
  30.       }
  31.       .he4 {
  32.         width: 100px;
  33.         height: 100px;
  34.         position: fixed; /*fixed 固定为当前窗口定位移动 */
  35.         top: 550px;
  36.         left: 0;
  37.         background: #ccc;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <!-- 相对定位 -->
  43.     <div class="he1">相对定位</div>
  44.     <!-- 绝对定位 -->
  45.     <div class="he2">
  46.       <div class="he3">
  47.         绝对定位
  48.       </div>
  49.     </div>
  50.     <div class="he4">固定定位</div>
  51.   </body>
  52. </html>

5.为什么垂直居中如此困难。使用绝对定位实现；
因为水平居中可以用margin: auto;来实现，但margin-top和margin-bottom使用auto是没有数值的0 ;

  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>Document</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .he1 {
  14.         width: 300px;
  15.         height: 300px;
  16.         background: #fee;
  17.         position: relative; /*设为父级定位*/
  18.         top: 20px;
  19.         left: 20px;
  20.       }
  21.       .he1 .he2 {
  22.         width: 100px;
  23.         height: 100px;
  24.         background: #fff;
  25.         position: absolute;
  26.         top: 0;
  27.         left: 0;
  28.         right: 0;
  29.         bottom: 0;
  30.         margin: auto;
  31.         font-size: 12px;
  32.         text-align: center;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="he1">
  38.       <div class="he2">绝对垂直居中</div>
  39.     </div>
  40.   </body>
  41. </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>Document</title>
  7.     <style>
  8.       @import url(0812_4.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div class="header">
  13.       <div class="nav">
  14.         <ul>
  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.           <li><a href="">客服</a></li>
  20.         </ul>
  21.       </div>
  22.     </div>
  23.     <div class="main">
  24.       <div class="left">左边</div>
  25.       <div class="right">右边</div>
  26.     </div>
  27.     <div class="footer">
  28.       <div class="foot"><p>尾部</p></div>
  29.     </div>
  30.   </body>
  31. </html>
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #333;
  9.   font-size: 14px;
  10. }
  11. li {
  12.   list-style: none;
  13. }
  14. a:hover {
  15.   color: blue;
  16. }
  17. .header {
  18.   width: 100%;
  19.   height: 50px;
  20.   background: #ccc;
  21. }
  22. .header .nav {
  23.   width: 800px;
  24.   margin: auto;
  25. }
  26. .header .nav li {
  27.   float: left;
  28.   padding: 15px;
  29. }
  30. .main {
  31.   width: 800px;
  32.   position: relative;
  33.   min-height: 600px;
  34.   margin: auto;
  35. }
  36. .main .left {
  37.   width: 400px;
  38.   height: 600px;
  39.   background: #f00;
  40.   position: absolute;
  41.   top: 0;
  42.   left: 0;
  43. }
  44. .main .right {
  45.   width: 400px;
  46.   height: 600px;
  47.   background: #ff0;
  48.   position: absolute;
  49.   top: 0;
  50.   right: 0;
  51. }
  52. .footer {
  53.   width: 100%;
  54.   height: 50px;
  55.   margin: auto;
  56.   text-align: center;
  57.   background: #ccc;
  58. }


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>Document</title>
  7.     <style>
  8.       @import url(0812_5.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div class="header">
  13.       <div class="nav">
  14.         <ul>
  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.           <li><a href="">客服</a></li>
  20.         </ul>
  21.       </div>
  22.     </div>
  23.     <div class="container">
  24.       <div class="left">左边</div>
  25.       <div class="main">内容</div>
  26.       <div class="right">右边</div>
  27.     </div>
  28.     <div class="footer">
  29.       <div class="foot"><p>尾部</p></div>
  30.     </div>
  31.   </body>
  32. </html>
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #333;
  9.   font-size: 14px;
  10. }
  11. li {
  12.   list-style: none;
  13. }
  14. a:hover {
  15.   color: blue;
  16. }
  17. .header {
  18.   width: 100%;
  19.   height: 50px;
  20.   background: #ccc;
  21. }
  22. .header .nav {
  23.   width: 800px;
  24.   margin: auto;
  25. }
  26. .nav:first-of-type li {
  27.   float: left;
  28.   padding: 15px;
  29. }
  30. .container {
  31.   width: 800px;
  32.   min-height: 600px;
  33.   margin: 10px auto;
  34. }
  35. .container .left {
  36.   width: 200px;
  37.   min-height: 600px;
  38.   background: #f00;
  39.   float: left;
  40. }
  41. .container .main {
  42.   width: 400px;
  43.   min-height: 600px;
  44.   background: #ccc;
  45.   float: left;
  46. }
  47. .container .right {
  48.   width: 200px;
  49.   min-height: 600px;
  50.   background: #ff0;
  51.   float: right;
  52. }
  53. .footer {
  54.   width: 100%;
  55.   height: 50px;
  56.   margin: auto;
  57.   text-align: center;
  58.   background: #ccc;
  59. }


8.默写出圣杯布局的思想。并用圣杯布局实现三列布局；
一、内容区必须优先渲染，DOM结构中将主体内容写到前面；
二、主体区域必须自适应，占据整个容器的全部空间；
三、内容区，左边，右边必须全部浮动；
四、通过设置左右两侧外边距打负值使它回到容器中；
五、给容器设置左右的内边距，宽度与左、右二侧宽度相等，将左右区域挤出来；
六、给左右两侧添加相对定位。将它们最终放到正确的位置上；

  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>Document</title>
  7.     <style>
  8.       @import url(0812_6.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.       <div class="main">
  14.         日前，总台央视记者从云南省决战决胜脱贫攻坚系列新闻发布会楚雄州专场获悉，楚雄彝族自治州建档立卡贫困人口已从2014年底的88733户333825人减少到2019年底的2903户8331人，贫困行政村从644个减少到1个，25个贫困乡镇全部退出，7个贫困县全部摘帽，贫困发生率从12.25%下降到0.46%。
  15.       </div>
  16.       <div class="left">左边</div>
  17.       <div class="right">右边</div>
  18.     </div>
  19.   </body>
  20. </html>
  1. .container > * {
  2.   min-height: 400px;
  3.   float: left;
  4. }
  5. .container .left,
  6. .container .right {
  7.   width: 200px;
  8.   background: #f00;
  9. }
  10. .container .main {
  11.   width: 100%;
  12.   background: #ccc;
  13. }
  14. .container {
  15.   overflow: hidden;
  16.   padding: 0 200px;
  17. }
  18. .container .left {
  19.   margin-left: -100%;
  20.   position: relative;
  21.   right: 200px;
  22. }
  23. .container .right {
  24.   margin-left: -200px;
  25.   position: relative;
  26.   left: 200px;
  27. }

上一条：【前端开发-HTML】之盒模型，模型计算方式与布局技术下一条：PHP大牛成长之路：JavaScript常用类型、流程控制与json字符串
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多