深入理解border属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解border属性相关的知识,希望对你有一定的参考价值。

参考技术A 1 .css属性是为了显示图文。
2 .边框设计的初衷可能是为了白底的图片和外面区分,所以加一个1px的边框就能看清
3 .边框一般不需要跟随设备变大而变大。
4 .所以其他属性outline,box-shadow,text-shadow也是这来原因而决定的.

1 .1px
2 .thin:1px
3 .medium:3px,默认值。主要是因为border-style:double。至少需要3px才生效
4 .thick:4px

1 .none:所以单纯设置border-width,border-color没有边框显示的原因. 1.5px solid #000 .默认样式是这样

2 .solid:实线

3 .dashed:虚线 :颜色区和透明区的比例所占的不一样,chrome是2:1,IE,火狐是3:1

4 .dotted:圆点边框

5 .double:双线板框。线框的表现还和宽度有关系,宽度不同最后的表现也不一样

6 .其他:inset(内凹),out(外凹),沟槽(groove),ridge(山脊)

1 .border-color默认颜色是color色值,如果没有指定边框颜色,就会使用color的颜色,outline,,box-shadow,text-shadow也是这样

1 .右下方background定位技巧.background定位的一个局限是只能根据左上角定位,而不能相对右下角.一个宽度不固定的元素,我们需要在距离右边缘50像素的位置设置一个背景图片

2 .增加点击区域大小:通过使用透明边框可以增加点击区域的大小
border:50px solid transparent;

3 .三角形绘制

1 .背景图片相对于background-image属性的位置
2 .border-box
3 .content-box
4 .padding-box

1 .center:居中图片
2 .top.left

1 .上面构造出来的全等三角形,其实是由两个直角三角形拼接成的。
2 .所以如果设置某一条边的宽度是0,就可以只显示左边的,实现一个直角三角形

深入理解Spring Cloud一(4)Bean中的属性是如何刷新的?

参考技术A 上文说到Nacos配置中心文件变动通知,本文继续讲解后续动作,Bean中的属性值是如何刷新的。

要想动态刷新Bean中的属性值,Class上必须注解@RefreshScope,这个注解又是干什么的呢。

我们看一下@RefreshScope的源码,实际就是@Scope("refresh"),代理方式使用CGLIB。

@Scope注解的解析方法如下,解析出Bean的scope和代理模式。

最终调用ContextRefresher的refresh方法。

refreshEnvironment,刷新Environment里面的属性值,然后发布EnvironmentChangeEvent事件,里面包括了变动的key。我们可以通过监听这个事情,获得变动的配置key。

addConfigFilesToEnvironment,通过SpringApplication的构建,重新走一遍配置加载流程,获取所有的配置,然后更新到当前Context的Environment中。

至此Context的Environment已经是最新的了,但是Bean中的属性值还没有被刷新。

设置最新的Environment后,继续调用RefreshScope.refreshAll(),将@RefreshScope注解的Bean,进行destroy,然后发布RefreshScopeRefreshedEvent事件。

我们看一下destroy,并没有看到刷新Bean属性值的方法。

this.cache.clear()也没有刷新Bean属性值的方法,只是最终由StandardScopeCache实现的,使用ConcurrentMap做缓存清理。

我们需要了解AbstractBeanFactory中scope的Bean是如何创建的,才能解开谜团。

Scope是一个接口,RefreshScope是其中的一个实现,这里实际就是调用RefreshScope的get(String name, ObjectFactory<?> objectFactory)方法创建Bean。RefreshScope继承GenericScope,最终调用代码如下

我们看到创建的时候有this.cache.put(),配置刷新Bean销毁的时候有this.cache.clear(),玄机就在这里。

如果缓存中有BeanLifecycleWrapper对象则返回旧对象,否则放入缓存中。

我们再看BeanLifecycleWrapper.getBean()方法,标准的单例写法,双重检查加锁创建bean。

至此我们了解到,通过RefreshScope创建bean后,会进行缓存(通过BeanLifecycleWrapper实现),如果没有刷新配置,则一直使用缓存,当配置刷新时清除缓存,RefreshScope会重新创建bean,这时bean中的属性就是最新的了。

1.通过临时SpringApplication的构建,重新走一遍配置加载流程,获取所有的配置,然后更新到当前Context的Environment中。

2.通过RefreshScope控制Bean的生命周期,在配置刷新的时候,重建Bean对象。

以上是关于深入理解border属性的主要内容,如果未能解决你的问题,请参考以下文章

深入理解CSS行高line-height

深入理解border

郑州-第六十九期深入理解css盒模型

深入理解css系列 -- 常规流下的块级盒的横向格式化模型

深入理解Spring Cloud一(4)Bean中的属性是如何刷新的?

深入理解JavaScript中的属性和特性