08月26, 2018

css基础-css盒模型

1. 基本概念

盒子模型,英文即box model。无论是div、span、还是a都是盒子。

但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。

一个盒子中主要的属性就5个:width、height、padding、border、margin。

2. 标准模型和IE模型

alt

alt

标准模型和IE模型的区别:

W3C盒模型的width指的是content区,而IE盒模型width指的是content+padding+border。

早期的IE(5.5版本)用的是IE盒模型,而从IE6开始,只要在文档中声明(添加doctype)则,兼容使用W3C盒模型。

如果IE678未添加doctype,即怪异模式,那么也是用IE模型。 从IE9以后,则不用填写声名也用的是W3C模型。

补充:

所有的盒模型,只要没有添加doctype,都处于怪异模式,但此时,只有ie678使用ie盒模型,其他的虽然处于怪异模式,但仍旧使用标准模型,其实与普通模式效果相同,怪异模式是在ie6时代为了兼容ie5以及以前版本的浏览器保留的 现在实际使用中都使用标准模式添加doctype。

3.设置盒模型

box-sizing : content-box || border-box || inherit;

CSS3的box-sizing,当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;当设置为box-sizing:border-box时,将采用怪异模式解析计算;

4. 获取和设置盒模型对应宽和高

  1. dom.style.width/height (行内)
  2. dom.currentStyle.width/height (ie)
  3. window.getComputedStyle(dom).width/height (ff/chrome)
  4. dom.getBoundingClientRect().width/height

借鉴部分内容地址:https://github.com/smyhvae/Web/

本文链接:http://www.laijianlou.top/post/css02.html

-- EOF --

Comments