码迷,mamicode.com
首页 > 其他好文 > 详细

盒子的计算

时间:2020-02-28 20:42:47      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:inf   模糊   pxe   order   dash   高度   body   set   alt   

1、盒子模型:

由一下几个部分构成:

  • width:内容宽度
  • height:内容高度
  • padding:内填充(border和content之间的填充,分为四个方向:top、right、bottom、left)
  • border:边框(有着各种的样式:none(默认)、solid(实线)、dashed(虚线)、dotted(点线)、double(双实线))
  • margin:外边距(border之外与其他元素节点的距离,分为四个方向:top、right、bottom、left)

技术图片

2、盒子模型的计算:

盒子宽度计算 = margin左右+border左右+padding左右+width

盒子高度计算 = margin上下+border上下+padding上下+height

3、几个相关的css属性

box-sizing:定义计算盒子总宽度和总高度的方法
  • box-sizing:content-box;定义width,height代表content的宽和高
  • box-sizing:border-box;定义width,height代表元素边框盒(包含border,padding,content)的宽和高

代码示例:

<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 1px solid #000;
            margin: 20px;
        }
        
        .box1 {
            box-sizing: content-box;
        }
        
        .box2 {
            box-sizing: border-box;
        }
    </style>
</body>
border-radius: px||%||em,设置圆角(四个方向)
box-shadow:盒子的阴影

示例:box-shadow: offset-x offset-y blur spread color inset;\\X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

盒子的计算

标签:inf   模糊   pxe   order   dash   高度   body   set   alt   

原文地址:https://www.cnblogs.com/Zxq-zn/p/12333195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!