search

博客列表 >Chapter6 盒模型与元素位置与大小

Chapter6 盒模型与元素位置与大小

无关
无关原创
2020年06月29日 12:03:05570浏览

一、盒模型常用属性

1、效果图：

2、源码（属性说明一并附在源码中）：

  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.             width: 120px;
  10.             height: 100px;
  11.         }
  12.         .box.one{
  13.             /* 1.padding：内边距 */
  14.             padding:40px;
  15.             /* 2.margin:外边距 margin-top,margin-bottom */
  16.             margin-bottom: 20px;
  17.             /*3.border： 边框：=粗细+虚实+颜色 */
  18.             border:10px solid rgb(49, 192, 44);
  19.             /* 4.background-color: 背景色; */            
  20.             background-color: lightcoral;
  21.             /* 5.background-clip:规定背景的绘制区域 它有三个值：*/         
  22.             /* background-clip: content-box;--背景被裁剪到内容框。 */
  23.             /* background-clip:padding-box--    背景被裁剪到内边距框。 */
  24.             /* background-clip:border-box    --背景被裁剪到边框盒。 */
  25.              background-clip: content-box;  
  26.         }
  27.         .box.two{
  28.             padding:10px;
  29.             margin-top: 40px;
  30.             border:2px solid lightcoral;
  31.             background-color: lightgreen;
  32.             background-clip:padding-box;
  33.         }.box.parent{
  34.             width:300px;
  35.             height: 200px;
  36.             border:5px solid yellow;
  37.             background-color: lightblue;
  38.         /* 6.position：一旦一个元素被添加了position，且值非static，那么她就是定位元素 */
  39.             /* position: static;--HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 */
  40.             /* position:fixed;--元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： */
  41.             /* position:relative;--相对定位元素的定位是相对其正常位置。 */
  42.             /* position:absolute;--绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
  43.             /* position: sticky;-- 基于用户的滚动位置来定位。 */
  44.             position:relative;
  45.         /* 相对定位是相对自己做了偏移，这个元素在文档流中的位置不释放 */
  46.             left:30px;
  47.             top:40px;             
  48.         }
  50.         .son.no1{
  51.         width: 100px;
  52.         height: 140px;
  53.         background-color:orange;
  54.         /*  position:absolute;--绝对定位:相对于其定位父级进行定位 */
  55.         position:absolute;
  56.         /* fixed-固定定位总是相对于body定位，忽略其定位的父级 */
  57.         position:fixed;     
  58.         /* 相同的属性，优先级按顺序执行，后面的覆盖前面的，这3个position，最后一个有效 */
  59.         /* position:absolute;    */
  60.         left: 200px;
  61.         top:10px;
  62.         }
  63.         .son.no2{
  64.         width: 100px;
  65.         height: 140px;
  66.         background-color:purple;
  67.         /*  position:absolute;--绝对定位:相对于其定位父级进行定位 */
  68.         position:absolute;
  69.         /* fixed-固定定位总是相对于body定位，忽略其定位的父级 */
  70.         /* position:fixed;      */
  71.         /* 相同的属性，优先级按顺序执行，后面的覆盖前面的，这3个position，最后一个有效 */
  72.         /* position:absolute;    */
  73.         right: 170px;
  74.         bottom:10px;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="box one"></div>
  80.     <div class="box two"></div>
  81.     <hr/>
  82.     <div class="box parent">
  83.         <div class="son no1"></div>
  84.         <div class="son no2"></div>
  85.     </div>   
  87. </body>
  88. </html>

二、元素大小的重新计算： box-sizing的用法

1、效果图：



2、源码

  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.     /* 样式初始化 */
  9.     .box1{
  10.         margin: 0;
  11.         padding:0;
  12.         /*1. box-sizing 属性有3个值: */
  13.         /* 1.1 box-sizing:border-box;元素的宽度和高度包括 padding 和 border  */
  14.        /* 1.2  box-sizing: content-box；指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。
  15.            元素的填充和边框布局和绘制指定宽度和高度除外 */
  16.         /* 1.3 box-sizing: inherit；指定 box-sizing 属性的值，应该从父元素继承 */
  17.         box-sizing: border-box;
  18.         /* 元素的宽度和高度包括 padding 和 border   */
  19.     }   
  21.     .box11{
  22.         width: 100px;
  23.         height: 80px;
  24.         background-color:red ;
  25.         border:4px dashed blue ;
  26.         padding:10px;
  27.         margin-bottom: 20px; 
  28.     /* 1.1 box-sizing:border-box;元素的宽度和高度包括了 padding 和 border  */
  29.         box-sizing: border-box;
  30.        /* 2.background-clip:规定背景的绘制区域 它有三个值：*/         
  31.     /* 2.1 background-clip: content-box;--背景被裁剪到内容框。 */
  32.         /* 2.2 background-clip:padding-box--    背景被裁剪到内边距框。 */
  33.         /* 2.3 background-clip:border-box    --背景被裁剪到边框盒。 */
  34.         background-clip:content-box;  
  35.      /* width :100=border4*2+padding10*2+contentbox72 ; */
  36.      /*  height:80=border4*2+padding10*2+contentbox52 ; */
  37.      /* 背景颜色大小：72*52; */
  39.     }
  40.     .box12{
  41.         width: 100px;
  42.         height: 80px;
  43.         background-color:red ;
  44.         border:4px dashed blue ;
  45.         padding:10px;
  46.         margin-bottom: 20px;
  47.         box-sizing: border-box; 
  48.         /* 2.2 background-clip:padding-box--    背景被裁剪到内边距框。 */
  49.          background-clip:padding-box;   
  50.      /* width :100=border4*2+padding10*2+contentbox72 ; */
  51.       /*  height:80=border4*2+padding10*2+contentbox52 ; */
  52.        /* 背景颜色大小：(100-4*2)*(80-4*2)=92*72; */
  54.     }
  55.     .box13{
  56.         width: 100px;
  57.         height: 80px;
  58.         background-color:red ;
  59.         border:4px dashed blue ;
  60.         padding:10px;
  61.         margin-bottom: 10px; 
  62.         box-sizing: border-box; 
  63.         /* 2.3 background-clip:border-box    --背景被裁剪到边框盒。 */
  64.         background-clip:border-box; 
  65.         /* width :100=border4*2+padding10*2+contentbox72 ; */
  66.       /*  height:80=border4*2+padding10*2+contentbox52 ; */
  67.         /* 背景颜色大小：100*80; */
  69.     }
  72.     .box21{
  73.         width: 100px;
  74.         height: 80px;
  75.         background-color:orange;
  76.         border:4px solid blue;
  77.         padding: 20px; 
  78.         margin-bottom: 10px;  
  79.         box-sizing: content-box;   
  80.         background-clip:content-box
  81.        /* width :=border4*2+padding20*2+contentbox100=148 ; */
  82.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  83.         /* 背景颜色大小：100*80; */          
  84.     }
  85.     .box22{
  86.         width: 100px;
  87.         height: 80px;
  88.         background-color: orange;
  89.         border:4px dashed blue;
  90.         padding: 20px; 
  91.         margin-bottom: 10px;  
  92.         box-sizing: content-box;       
  93.         background-clip:padding-box; 
  94.      /* width :=border4*2+padding20*2+contentbox100=148 ; */
  95.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  96.         /* 背景颜色大小：(100+20*2)*(80+20*2)=140*120;      */
  97.     }
  98.     .box23{
  99.         width: 100px;
  100.         height: 80px;
  101.         background-color:orange;
  102.         border:4px dashed blue;
  103.         padding: 20px; 
  104.         margin-bottom: 10px;  
  105.         box-sizing: content-box;     
  106.         background-clip:border-box; 
  107.         /* width :=border4*2+padding20*2+contentbox100=148 ; */
  108.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  109.         /* 背景颜色大小：(100+20*2+4*2)*(80+20*2+4*2)=148*128;      */
  110.     }
  113.     .box31{
  114.         width: 100px;
  115.         height: 80px;
  116.         background-color: lightgreen;
  117.         border:4px dashed red;
  118.         padding: 20px; 
  119.         margin-bottom: 10px;  
  120.         box-sizing:  inherit;
  121.         background-clip: content-box ; 
  122.         /* width :=border4*2+padding20*2+contentbox100=148 ; */
  123.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  124.         /* 背景颜色大小：100*80;      */     
  126.     }
  127.     .box32{
  128.         width: 100px;
  129.         height: 80px;
  130.         background-color:  lightgreen;
  131.         border:4px dashed red;
  132.         padding: 20px; 
  133.         margin-bottom: 10px;  
  134.         box-sizing: inherit;       
  135.         background-clip:padding-box;     
  136.          /* width :=border4*2+padding20*2+contentbox100=148 ; */
  137.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  138.        /* 背景颜色大小：(100+20*2)*(80+20*2)=140*120;      */  
  139.     }
  140.     .box33{
  141.         width: 100px;
  142.         height: 80px;
  143.         background-color: lightgreen;
  144.         border:4px dashed red;
  145.         padding: 20px; 
  146.         margin-bottom: 10px;  
  147.         box-sizing:  inherit;       
  148.         background-clip:border-box;   
  149.          /* width :=border4*2+padding20*2+contentbox100=148 ; */
  150.       /*  height:=border4*2+padding20*2+contentbox80=128 ; */
  151.         /* 背景颜色大小：(100+20*2+4*2)*(80+20*2+4*2)=148*128;      */
  153.     }
  154.     </style>
  156. </head>
  157. <body>
  158.     <h3> 一、 box-sizing: border-box; 元素的宽度和高度包括 padding 和 border </h3>
  159.     <p> box1: width :100=border4*2+padding10*2+contentbox72 ;    </p>
  160.     <p> box1: height:80=border4*2+padding10*2+contentbox52 ; </p> 
  161.     <br/>
  163.     <div class="box1">     
  164.     <p>1. box11:背景颜色大小：72*52; </p> 
  165.         <div class="box11">box11 </div> 
  166.     <p>2. box12:背景颜色大小：(100-4*2)*(80-4*2)=92*72; </p>   
  167.         <div class="box12">box12</div>
  168.     <p>3. box13: 背景颜色大小：100*80; </p> 
  169.         <div class="box13">box13</div> 
  170.     </div>  
  171.     <hr/>
  172.     <h3> 二、 box-sizing: content-box；指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。
  173.         <br>
  174.         元素的填充和边框布局和绘制指定宽度和高度除外 */ </h3>
  175.     <p> box2: width :=border4*2+padding20*2+contentbox100=148 ;   </p>
  176.     <p> box2: height:=border4*2+padding20*2+contentbox80=128 ; </p> 
  177.     <br>
  179.     <div class="box2">
  180.        1. 背景颜色大小：100*80;
  181.         <div class="box21">box21 </div> 
  182.         2.背景颜色大小：(100+20*2)*(80+20*2)=140*120;
  183.         <div class="box22">box22</div>
  184.         3.背景颜色大小：(100+20*2+4*2)*(80+20*2+4*2)=148*128;
  185.         <div class="box23">box23</div>
  186.     </div>
  187.     <hr/> 
  188.     <h3>三、 box-sizing: inherit；指定 box-sizing 属性的值，应该从父元素继承</h3>
  189.     <p> box3: width :=border4*2+padding20*2+contentbox100=148 ;   </p>
  190.     <p> box3: height:=border4*2+padding20*2+contentbox80=128 ; </p> 
  192.     <div class="box3"> 
  193.         1. 背景颜色大小：100*80;
  194.         <div class="box31">box31 </div> 
  195.        2. 背景颜色大小：(100+20*2)*(80+20*2)=140*120; 
  196.         <div class="box32">box32</div>
  197.         3.背景颜色大小：(100+20*2+4*2)*(80+20*2+4*2)=148*128;
  198.         <div class="box33">box33</div>             
  199.     </div>
  203. </body>
  204. </html>

三、 定位元素的水平与垂直

1.1 水平居中：
  1.  margin-left:auto;
  2.  margin-right:auto;
1.2垂直居中-通过绝对定位来实现：
  1.     position:absolute;        
  2.     top:0;
  3.     left: 0;        
  4.     right:0;
  5.     bottom: 0;
  6.     margin: auto;

1.效果图

2.源码

  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.     .container{
  10.         margin-top:60px;
  11.         margin-left:20px;    
  12.         width: 300px;
  13.         height: 300px;
  14.         border:10px dashed orange;
  15.         background-color: lightgreen; 
  16.      /* 转为定位元素 */
  17.         position:relative; 
  19.     }
  20.     .box1{
  22.         width: 120px;
  23.         height: 60px;
  24.         border:5px dashed blue;
  25.         background-color: yellow;  
  26.         color:red;    
  27.         /* 水平居中 */
  28.         /* 让浏览器自动计算左右居中margin-left:auto;  margin-right:auto; */
  29.         margin-left:auto;
  30.         margin-right:auto;      
  32.     }
  33.     .box2{       
  34.         width: 160px;
  35.         height: 80px;
  36.         border:5px dashed yellow;
  37.         background-color: lightsalmon;  
  38.         color:blue;
  39.   /* 通过绝对定位来实现垂直居中 */
  40.        position:absolute;
  41.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  42.         /* 左上角开始 */
  43.         top:0;
  44.         left: 0;
  45.          /* 右下角结束 */
  46.         right:0;
  47.         bottom: 0;
  48.         margin: auto; 
  49.     }
  50.     form{
  51.         width: 300px;
  52.         height: 200px;
  53.         background-color: lightpink;
  54.         position: absolute;
  55.         top:0;
  56.         left: 0;
  57.         right:0;
  58.         bottom: 0;
  59.         margin: auto;        
  60.     }
  61.     form label{
  62.         background-color: yellow;
  63.         color:brown;
  64.     }
  65.     form input{       
  66.         background-color: lightgoldenrodyellow;
  67.         color:red;
  68.     }
  70.     input:focus {
  71.         background-color: rgb(39, 214, 62);
  72.     }
  73.     .btn{
  74.         width: 90px;
  75.         height: 40px;
  76.         background-color: orangered;
  77.         color:black;
  78.         font-size: 1.2rem;
  79.         margin-top: 10px;
  80.         margin-left: 120px;
  83.     }
  88. </style>
  89. <body>
  90.     <div class="container">
  91.         <div class="box1"> box1水平居中</div>
  92.         <div class="box2">box2垂直居中</div>
  93.     </div>
  94.     <hr/>
  95.     <form action="">
  96.         <p>电话呼叫系统：</p>
  98.      <label for="acode">区号：</label>
  99.      <input type="area code" name="acode" id="acode"placeholder="3位数字" autofocus required />
  100.      <br>
  101.      <label for="telephone">电话号码：</label>
  102.      <input type="text" name="phone" id="telephone" placeholder="8位数字" required/>
  103.      <br>
  104.      <button class="btn">拨打</button>
  106.     </form>
  107. </body>
  108. </html>
上一条：Grid布局php中文网部分页面下一条：flex PC端的一个布局方案 一个移动端的布局方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
武2020-06-29 16:10:101楼
脑细胞组团阵亡，，，