Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础盒子模型
Blogger Information
Blog 19
fans 0
comment 0
visits 16174
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
html基础盒子模型
῀℡῀ᵒᵐᵍᵎᵎᵎ
Original
1294 people have browsed it

框模型相关知识

1.盒模型

  • 我们常说的盒子模型一般有四个属性

    • border 值为边框的宽度，相当于现实中盒子的包装。
    • aadding 值为内边距，指盒子内容距离盒子边框的距离
    • content 值为盒子的主要内容
    • margin 值用于盒子与盒子之间，表示盒子与盒子之间的距离

真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border = padding+content+border

1.1border

  • border就是边框。边框有三个要素：像素(粗细)、线型、颜色

  • 颜色默认是黑色。其余两个属性必须，否则显示不出来边框

  • border:1px solid red

  • 重点是 border 的拆分

  • 上面的例子我们明白了 border 属性，是由三个小属性综合而成的,顺序为 上右下左

1.1.1 按照三要素拆分

border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色

1.1.2 按照方向来拆

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

1.2padding margin有四个方向

  • 方法有两种，第一种分开写小属性，第二种放在一起写综合属性，用空格分隔

  • 小属性
    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;
    margin-top: 30px;
    margin-right: 20px;
    margin-bottom: 40px;
    margin-left: 100px;

  • 综合属性(上、右、下、左)，顺时针方向
    padding:30px 20px 40px 100px;
    margin:30px 20px 40px 100px;
  • 如果只写了三个值，则顺序为：上、右、下；还有一个跟右一样
    padding: 20px 30px 40px;
    margin: 20px 30px 40px;
  • 如果只写了两个属性,就是上下左右

实列代码

  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.   </head>
  9.   <style type="text/css">
  10.     .total {
  11.       width: 600px;
  12.       /*border:1px solid red;*/
  13.       margin: 0 auto;
  14.     }
  15.     div {
  16.       border-radius: 15px;
  17.       text-align: center;
  18.       margin-top: 10px;
  19.     }
  20.     .header {
  21.       /*border: 1px solid red;*/
  22.       background: #c9f790;
  23.     }
  24.     .nav {
  25.       border: 1px /*solid*/ red;
  26.       background: #c9f790;
  27.     }
  29.     .left {
  30.       /*border: 1px solid red;*/
  31.       width: 370px;
  32.       display: inline-block;
  33.       background: #c9f790;
  34.       vertical-align: top;
  35.       margin-top: 0px;
  36.     }
  37.     .right {
  38.       /*border: 1px solid red;*/
  39.       width: 220px;
  40.       height: 197px;
  41.       display: inline-block;
  42.       background: #c9f790;
  43.       vertical-align: top;
  44.       margin-top: 0px;
  45.     }
  46.     .footer {
  47.       /*border: 1px solid red;*/
  48.       background: #c9f790;
  49.     }
  50.     .bg1 {
  51.       background: #d6f7cd;
  52.       margin: 5px 10px;
  53.     }
  54.     .style1 {
  55.       font-weight: bolder;
  56.     }
  57.     .style2 {
  58.       margin-top: 50px;
  59.     }
  60.     .style3 {
  61.       text-align: left;
  62.     }
  63.   </style>
  65.   <body>
  66.     <div class="total">
  67.       <div class="header">
  68.         <div class="style1">header</div>
  69.         <div>我是头部</div>
  70.       </div>
  71.       <div class="nav">
  72.         <div class="style1">nav</div>
  73.         <div>我是导航</div>
  74.       </div>
  75.       <div class="content">
  76.         <div class="left">
  77.           <div>
  78.             <div>
  79.               <div class="style1">article</div>
  80.               <div>我是中间</div>
  81.             </div>
  82.             <div class="bg1">
  83.               <div>section</div>
  84.               <div>我是广告一</div>
  85.             </div>
  86.             <div class="bg1">
  87.               <div>section</div>
  88.               <div>我是广告二</div>
  89.             </div>
  90.           </div>
  91.         </div>
  92.         <div class="right">
  93.           <div class="style1 style2">aside</div>
  94.           <div class="style3">
  95.             我是右边
  96.           </div>
  97.         </div>
  98.       </div>
  99.       <div class="footer">
  100.         <div class="style1">footer</div>
  101.         <div>我是底部</div>
  102.       </div>
  103.     </div>
  104.   </body>
  105. </html>

实列截图

课后总结：

  • 所有的HTML元素都可以看做盒子，包括：实际内容（content），内边距（padding），边框 （border），外边距（margin）四个属性
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：border颜色默认并不是黑色, 而是也内容区文本前景色同名, 如果内部文本是红色, 那么边框默认就是红色了, 你可以试一下
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