HTML5系列代码:盒子尺寸的计算方法

    技术2023-04-08  109

    height 属性设置元素的高度。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>盒子尺寸的计算方法</title> <style type="text/css"> div { margin:5px; width:200px; /* 宽度200px */ height:80px; /* 高度80px */ background-color:#fe0; border:10px solid #f90; /* 边框宽度为10px */ padding:10px; /* 内边距宽度为10px */ font-weight:bold; font-size:18px; line-height:40px; } /* 属性值border-box */ .s1 { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* 属性值padding-box */ .s2 { box-sizing:padding-box; -webkit-box-sizing:padding-box; -moz-box-sizing:padding-box; } /* 属性值content-box */ .s3 { box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } </style> </head> <body> <div class="s1">border-box</div> <div class="s2">padding-box</div> <div class="s3">content-box</div> </body> </html>
    Processed: 0.010, SQL: 9