【HTML/CSS】什么是盒子模型

时间 2019-12-06

标签 HTML/CSS 什么盒子模型栏目 CSS 繁體版

原文原文链接

CSS盒子模型就是在网页设计中常常用到的CSS技术所使用的一种思惟模型。网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)，CSS盒子模式都具有这些属性。

盒模型一共有2种模式

标准盒子的长宽 = content的长宽html

怪异盒子的长宽 = content的长宽+ padding + border浏览器

在html的首部，咱们常常会看到一个<!Doctype html>的声明，浏览器根据这个声明来判断这个文件是什么类型的，并根据这来判断怎么解析文件。spa

当咱们写了<!Doctype html>的声明的时候，不管在哪一种内核的浏览器下盒子模型都会被解析为标准盒模型
当咱们没写声明或声明丢失的时候，部分有IE内核的浏览器则会触发怪异模型(IE6,7,8)
在CSS3中咱们能够经过设置box-sizing的属性来完成标准或者怪异模式之间的切换
（1）box-sizing ： content-box 采用标准模式也是默认样式
（2）box-sizing： border-box 采用怪异模式

以上就是我对盒子模型的理解，若有异议欢迎评论留言。