为什么outline-width不会引起回流而border-width会引起?

1、盒模型

  1. 标准盒子模型:box-sizing: content-box (height只包括content高度)
    在这里插入图片描述
  2. IE盒模型:box-sizing: border-box (height = padding + border + content), 为了设置padding和border时不撑开盒子
    在这里插入图片描述

2、 什么是outline

  1. 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
  2. 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline

3、border和outline的区别是什么

  1. border 可应用于几乎所有有形的 html 元素,而 outline 是针对链接、表单控件和 ImageMap 等元素设计
  2. outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需 JavaScript 配合 CSS 来控制
  3. outline 是不占空间的,不会像 border 那样影响元素的尺寸或者位置,既不会增加额外的 width 或者 height

参考:CSS轮廓(outline)属性详解及 outline 与 border 的区别

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108479504