<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型</title> <style> div{ height: 200px; width: 200px; background: #6A5ACD; padding: 20px; } /* 默认的box-sizing的值为content-box(标准模式),width==文本内容的宽度, 所以设置padding之后,会撑大块元素的 使其整体变大 */ .boder-box{ /* 总的宽度固定不变,所以设置padding之后减少的是content的宽度 */ box-sizing: border-box;/* 怪异模式又名ie模式,设置盒模型就是用的这个模式 */ } </style> </head> <body> <div class="boder-box"> 你站在桥上看风景,看风景的人在窗前看你 </div> <div class="content-box"> 你站在桥上看风景,看风景的人在窗前看你 </div> </body> </html>