• 【CSS】盒子模型的计算


    1、标准盒子的尺寸计算

    盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框

    盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>盒子自身尺寸</title>
     6     <style>
     7         div.box1{
     8             width:200px;
     9             height:200px;
    10             padding:20px;
    11             border:5px red solid;
    12         }
    13         /*盒子自身的宽度:200px + 20px*2 + 5px*2 = 250px*/
    14         /*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/
    15 
    16 
    17         div.box2{
    18             width:200px;
    19             height:200px;
    20             padding:20px;
    21             border:5px red solid;
    22             margin:50px 100px;
    23             margin-left:-100px;/*当左侧外边距变为负值:盒子的占位宽度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/
    24         }
    25         /*盒子占位的宽度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/
    26         /*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/
    27 
    28         /* 当盒子的外边距为负值时,盒子占位的尺寸有可能小于盒子自身的尺寸*/
    29     </style>
    30 </head>
    31 <body>
    32     <div class="box1"></div>
    33 
    34     box2前面的文字
    35      <div class="box2"></div>
    36     box2后面的文字
    37 </body>
    38 </html>
    View Code

    2、框架盒子(怪异盒子)的尺寸计算

      直接将宽/高属性设定为盒子自身的整体尺寸,如果带有内边距或边框,则通过缩小内容区域来实现

    实现盒子类型的转换
    box-sizing:盒子类型设置

    3、思考:当盒子无法确定具体的宽高数值时,怎么办?
    问题任务:需要设定一个带有30px边框的盒子,整体宽度为浏览器窗口的50%
    解决办法:将盒子转换成为框架盒子!

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>问题任务</title>
     6     <style>
     7         *{
     8             margin:0;
     9             padding:0;
    10         }
    11 
    12         .box{
    13             background-color:black;
    14             color:white;
    15             border:30px red solid;
    16             width:50%;
    17             box-sizing: border-box;
    18             padding:30px;
    19         }
    20     </style>
    21 </head>
    22 <body>
    23     <div class="box"></div>
    24 </body>
    25 </html>
    View Code

    4、box-sizing的实际应用:
    要求一:实现一个两栏并列的网页布局(提示:通过float属性实现并列)
    要求二:其中左列为30%宽,右列为70%宽
    要求三:两列盒子中的内容距离盒子边缘有一定的空白距离

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>两列布局</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         div{
    12             float:left;
    13             height:300px;
    14             padding:50px;
    15             box-sizing:border-box;
    16         }
    17 
    18 
    19         .leftbox{
    20             background-color:#0d8ddb;
    21             width:30%;
    22         }
    23 
    24         .rightbox{
    25             background-color: pink;
    26             width:70%;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31     <div class="leftbox">左边的盒子内容</div>
    32     <div class="rightbox">右边的盒子</div>
    33 </body>
    34 </html>
    View Code
  • 相关阅读:
    liunx 文件权限注意
    面试必备之乐观锁与悲观锁
    Hibernate之二级缓存
    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句详解(SQL数据库和Oracle数据库的区别)
    ThreadLocal-面试必问深度解析
    Java 8系列之重新认识HashMap(知乎精文)
    Collection接口和Collections类的简单区别和讲解
    细说mysql索引
    【Java面经】非科班渣硕面经
    关于group by的用法 原理(好文章啊,图文并茂,简单易懂)
  • 原文地址:https://www.cnblogs.com/mtszw/p/9203412.html
Copyright © 2020-2023  润新知