盒子模型box-sizing属性的用法

tech2024-12-12  5

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .content { width: 300px; height: 300px; background-color: red; } .aside { width: 100px; height: 200px; background-color: blue; float: left; } .article { width: 200px; height: 200px; background-color: green; float: right; border: 20px solid #000; padding: 20px; box-sizing: border-box; /*这个元素的宽高等于原来定义的内容的宽高。*/ box-sizing: content-box; /*默认的:元素的宽高 = 边框 + 内边距 + 内容宽高*/ } </style> </head> <body> <div class="content"> <div class="aside"></div> <div class="article"></div> </div> </body> </html>
最新回复(0)