锐客网

  1. 首页 > it技术 > >

css 盒模型

css

CSS 盒模型 在 CSS 中，我们可以通过：

  • box-sizing: conent-box; 将盒子设置为标准模型（盒子默认为标准模型）
  • box-sizing: border-box; 将盒子设置为 IE 模型（也叫做怪异盒子）
话不多说直接上图
css 盒模型
文章图片

.container{ width:200px; border:1px solid red; padding:10px; margin:20px; }

如果
box-sizing: conent-box;

那么写的 width:200px 是content，就是图中的蓝色区域。
如果
box-sizing: border-box;

如下图
css 盒模型
文章图片

width 的200px 就是 content + padding + border
【css 盒模型】border-box 更加好用。

    推荐阅读


    上一篇：Golang|Golang 入门系列（六）理解Go中的协程（Goroutine）

    下一篇：CSS BFC是什么（）