• CSS 中 outline 和 border 的区别,outline 及 相关属性学习


    区别

    1. border 占用空间,outline 不占用空间,不会影响元素的尺寸和位置。

    2. border 可应用于几乎所有有形的 html 元素,而 outline 是针对链接、表单控件和 ImageMap 等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需 JavaScript 配合 CSS 来控制。

    outline 的作用

    1. 利用这些特性,我们常用 outline 来设置悬停的动态效果。之前一直困扰我的问题:hover 加边框会导致元素定位和大小的改变,同时也会影响其他元素位置的改变。

    2. 解决 hover 加边框会导致元素定位和大小的改变的问题,的另一只解决思路,用怪异盒模型,给元素加上 box-sizing: border-box; 属性。

    学习 outline

      outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

      注释:轮廓线不会占据空间,也不一定是矩形。

      可以按顺序设置如下属性:

    •   outline-color
    •   outline-style
    •   outline-width

      连写 和 border 一样:outline: 1px solid #000; 

      其它可能用到的值:

      inherit 规定应该从父元素继承 outline 属性的设置。

      none 规定元素不设置 outline 属性

     相关属性

    语法:

      outline-offset: length / inherit;

    例子:

      outline-offset: -10px; 向内推10px

      

  • 相关阅读:
    YbtOJ20030 连珠风暴
    YbtOJ20029 最大权值
    P6859 蝴蝶与花
    P4115 Qtree4
    P2486 [SDOI2011]染色
    P2487 [SDOI2011]拦截导弹
    P5163 WD与地图
    P3733 [HAOI2017]八纵八横
    CF1100F Ivan and Burgers
    P1712 [NOI2016]区间
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/13630932.html
Copyright © 2020-2023  润新知