Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型相关知识
Blogger Information
Blog 14
fans 0
comment 0
visits 7667
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型相关知识
鹏建
Original
641 people have browsed it

  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.       div,
  9.       span {
  10.         border: 1px solid red;
  11.       }
  12.       div {
  13.         width: 700px;
  14.       }
  15.       span {
  16.         background-color: red;
  17.         display: block;
  18.       }
  19.       /* span{ margin-left: auto; 
  20.         margin-right: 200px;
  21.          width: 200px;}   */
  22.       /* span{
  23.          margin-left: 200px;
  24.         margin-right: auto;
  25.         width: 200px; 
  26.       }  */
  27.       span {
  28.         margin-left: 200px;
  29.         margin-right: 200px;
  30.         width: auto;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div>
  36.       <span>我爱中华</span>
  37.     </div>
  38.   </body>
  39. </html>

注：span是行内元素，没有宽度和高度，需转化成块元素。

  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>box-sizing属性</title>
  7.     <style>
  8.       div {
  9.         border: 5px solid red;
  10.         width: 200px;
  11.         height: 50px;
  12.         background-color: yellow;
  13.         padding: 10px;
  14.         margin: 10px;
  15.       }
  16.       div {
  17.         /* 元素总宽度为width+2*padding+2*border=230 */
  18.         box-sizing: content-box;
  19.       }
  20.       div {
  21.         /* 元素总宽度为width=200 ,内容区为width-2*padding-2*border=170*/
  22.         box-sizing: content-box;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div>
  28.       追风筝的人
  29.     </div>
  30.   </body>
  31. </html>

  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.       .box1 {background-color: lightseagreen;
  9.         width: 200px;
  10.         height: 200px;
  11.         margin: 5px;
  12.       }
  13.       .box2 {background-color: lime;
  14.         width: 300px;
  15.         height: 100px;
  16.         margin: 15px;
  17.       }
  18.       /* 两个相邻元素均有外边距时，两者之间距离以最大外边距为准 */
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="box1"></div>
  23.     <div class="box2"></div>
  24.   </body>
  25. </html>

  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.       .box {
  9.         border: 1px solid;
  10.         width: 800px;
  11.         height: 600px;
  12.       }
  13.       .box1 {
  14.         background-color: yellow;
  15.         width: 200px;
  16.         height: 200px;
  17.         float: left;
  18.       }
  19.       .box2 {
  20.         background-color: red;
  21.         width: 200px;
  22.         height: 300px;
  23.         float: right;
  24.       }
  25.       .box3 {
  26.         background-color: yellowgreen;
  27.         width: 200px;
  28.         height: 400px;
  29.         /* 清楚左浮动 */
  30.         clear: left;
  31.         /* 设定右浮动 */
  32.         float: right;
  33.       }
  34.       .box4 {
  35.         background-color: pink;
  36.         width: 200px;
  37.         height: 100px;
  38.         clear: left;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="box">
  44.       <div class="box1"></div>
  45.       <div class="box2"></div>
  46.       <div class="box3"></div>
  47.       <div class="box4"></div>
  48.     </div>
  49.   </body>
  50. </html>

  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.       .box1 {
  9.         background-color: yellow;
  10.         width: 100px;
  11.         height: 100px;
  12.         /* 相对定位，即相对于自己 */
  13.         position: relative;
  14.         margin: 50px;
  15.       }
  16.       .box {
  17.         border: 1px solid;
  18.         width: 400px;
  19.         height: 300px;
  20.         position: relative;
  21.       }
  22.       .box2 {
  23.         background-color: yellowgreen;
  24.         width: 200px;
  25.         height: 200px;
  26.         /* 绝对定位，即相对于设定为relative的元素 */
  27.         position: solution;
  28.         margin: 50px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box1"></div>
  34.     <div class="box">
  35.       <div class="box2"></div>
  36.     </div>
  37.   </body>
  38. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=固定定位, initial-scale=1.0" />
  6.     <title>固定定位</title>
  7.     <style>
  8.       body {
  9.         background-color: grey;
  10.         height: 1000px;
  11.       }
  12.       .box {
  13.         width: 200px;
  14.         height: 200px;
  15.         background-color: lightgrey;
  16.        bottom: 0px;
  17.        right: 0px;
  18.        position: fixed; 
  19.       }
  20.       button{float: right;
  21.       }
  22.       p{font-size: 25px;    
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="box">
  28.       <button onclick="this.parentNode.style.display = 'none'" >关闭</button>
  29.       <p>华图公务员培训</p>
  30.     </div>
  31.   </body>
  32. </html>

作业总结：实践操作能检验知识掌握与否，而且操作时会出现各种各样的问题，这样促进思考，促进理解，进而才能转化为自己的财富为我所用。多练习，实践出真知！

问题：固定定位案例中，设定bottom=0和right=0后，广告栏不在右下方，设定position=fixed后才居右下方？

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来定位还没吃透, 多做点练习, 多看点手册
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post