box-sizing详解

一、前言

实现一个很常规的功能, 鼠标停留出现3个像素的上边框,然而鼠标停留后出现了抖动,审查元素后发现是三个像素撑起了这个元素, 将其余元素向下挤, 才出现了这个抖动,一个比较常用的解决办法是先给元素一个3像素transparent背景的上边框,鼠标停留在将背景色改为其他颜色。这样就不会撑大元素

后来又想起来有个box-sizing, 好像也可以做到,于是尝试了一下确实可以,看了一下mdn文档中对于box-sizing的描述, 做一个记录

二、正文

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

user agent可以理解为浏览器, 其中box-sizing有两个值,一个是content-box,另一个是border-box

分别介绍这两种

box-sizing属性

1. content-box

box-sizing属性的默认值,标准盒子模型(w3c盒模型),也就是width只表示内容的宽度,height表示内容的高度,整个元素的高度则等于 height + padding(上下) + border(上下) + margin(上下) ,同理宽度等于 width + padding(左右) + border(左右) + margin(左右),标准盒模型如下

标准盒模型

2. border-box

怪异盒模型(IE盒模型),元素的padding和border是被包括在宽度和高度里面的, 也就是说元素实际高度等于 height + margin(上下),元素的宽度等于 width + margin(左右),IE盒模型如下

IE盒模型

应用

一般来说加了 <!DOCTYPE html> 声明就是选用标准盒模型, 如果没声明则由浏览器决定选用哪种模型

不能说IE盒模型不好, 两者各有用处,就像在前言中提出的问题,用box-sizing: border-box 就可以轻松解决,不针对具体业务场景谈这些其实没什么意义,IE盒模型中border和padding属于宽高部分,在布局上更轻松,而且很多UI比如bootstrap就是用的IE盒模型,其实原因也比较简单,因为栅格一般是通过百分比实现的,比如三栏就是控制每一栏的宽度为33.33%,而栅格还支持间距也就是padding, 如果用标准盒模型,实现起来就很麻烦,因为这个padding会让每一栏的宽度超过33%

三、总结

日常开发中会出现各种小bug,不要放过这些看似简单的小bug。

要知道你和大佬之间的差距就在于大佬抓住这个小bug,刨根问题,究其原因,长此以往懂得越来越多

前段时间的面试也告诉我这个道理,一定要深究,面试官抛出的问题可能我能回答出来,但是如果将问题更深入一点,可能就会因为没考虑过而答不出来