display

在网上下载一个小程序源码，排版样式挺好看的，参照着写了几个例子。 1、例子1效果图 代码实现 （1）全局样式app.wxss @import 'style/weui.wxss'; page{ background-color: #F8F8F8; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } .text-center{text-align: center;} /* 字体大小规范 */ .font-lv1{font-size: 36rpx !important;} .font-lv2{font-size: 32rpx !important;} .font-lv3{font-size: 28rpx !important;} .font-lv4{font-size: 24rpx !important;} .font-lv5{font-size: 20rpx !important;} .strong{font-weight: bold;} /* margin */ .mgt-15rpx{margin-top: 15rpx;} .mgb-15rpx{margin-bottom: 15rpx;} .mgl-15rpx{margin-left: 15rpx;} .mgr-15rpx{margin

代理模式 ： 为其他对象提供一种代理以控制对这个对象的访问。 代理模式是对象的结构模式，代理模式给某一个对象提供一个代理对象，并由此代理对象控制对原代理对象的引用。代理模式不应该让用户感觉到代理的存在，所以代理对象和原对象的对外的调用接口是一致的。 代理模式一般包括三个角色： 抽象主题角色(Subject)：它的作用是统一接口。此角色定义了真实主题角色和代理主题角色共用的接口，这样就可以在使用真实主题角色的地方使用代理主题角色。 真实主题角色(RealSubject)：隐藏在代理角色后面的真实对象。 代理主题角色(ProxySubject)：它的作用是代理真实主题，在其内部保留了对真实主题角色的引用。 它与真实主题角色都继承自抽象主题角色，保持接口的统一 。它可以控制对真实主题的存取，并可能负责创建和删除真实对象。代理角色并不是简单的转发，通常在将调用传递给真实对象之前或之后执行某些操作，当然你也可以只是简单的转发。 与适配器模式相比：适配器模式是为了改变对象的接口，而代理模式并不能改变所代理对象的接口。 思维导图： 使用场景： 实现延迟加载。 <?php/** * Proxy design pattern (lazy loading)@global * 实现了图片的延迟加载 */ /* 抽象主题角色,提供统一接口 */ interface ImageInterface {

工作中遇到垂直居中问题，特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+ 　1、使用绝对定位垂直居中 HTML <div class="container"> <div class="absolute_center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aspernatur dolor dolorem dolores earum eos error harum iusto molestiae perspiciatis possimus quisquam quo, rem rerum sit ullam velit voluptates. </div> </div> CSS .container{ position: relative; width: 800px; height: 800px; border: 1px solid #000000; } .absolute_center{ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/

1、使用绝对定位垂直居中 　　绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{ /*display:none;*/ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/*用于设置了所有除overflow为visible的元素*/ overflow:auto; } 　　使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现 　　优点：支持响应式，只有这种方法在resize之后仍然垂直居中 　　缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条 　　 　　2、负marginTop方式 　　已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现 　　原理：top：50%元素上边界位于包含框中点

1.文本的水平垂直居中 line-height + text-align:center 1 <div class='wrap'> 2 水平垂直居中水平垂直居中 3 </div> 1 html,body{ 2 margin: 0; 3 } 4 .wrap{ 5 line-height: 400px; 6 text-align:center; 7 8 height: 400px; 9 font-size: 36px; 10 background-color: #ccc; 11 } 2.利用盒模型的水平垂直居中 我们一般讲的盒模型都是说的块级盒的盒模型，也只有块级盒的盒模型用得多一点，块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的，如下图： 用css3的calc()动态计算: 1 <div class="wrap"> 2 <div class="content"></div> 3 </div> 1 .wrap{ 2 margin-top: 20px; 3 margin-left: auto; 4 margin-right: auto; 5 width: 400px; 6 height: 400px; 7 background-color: #ccc; 8 .content{ 9 padding

CAT ET III Caterpillar Scanner Features: Display graph and log status parameters. Retrieve prognostic data including histograms, engine totals for fuel used and miles traveled. View active diagnostics and clear logged diagnostics. View events where irregularities have occurred and have been logged by the ECM. Perform calibrations to enhance performance of the ECM. Customize the ECM with application-specific settings. Over 100 custom Diagnostic, Information and Service features including: 2D and 3D Histogram plotting capability (engine software support required). Custom Status screen groups

CAT ET III Caterpillar Scanner Features: Display graph and log status parameters. Retrieve prognostic data including histograms, engine totals for fuel used and miles traveled. View active diagnostics and clear logged diagnostics. View events where irregularities have occurred and have been logged by the ECM. Perform calibrations to enhance performance of the ECM. Customize the ECM with application-specific settings. Over 100 custom Diagnostic, Information and Service features including: 2D and 3D Histogram plotting capability (engine software support required). Custom Status screen groups

本篇属于css学习笔记，在学习flex布局时有一些经常用到的属性，如果长期不用就会遗忘，在这里做一下记录，方便以后查看，欢迎大家提出意见。 flex is a new value added to the CSS display property. Along with inline-flex it causes the element that it applies to to become a flex container, and the element’s children to each become a flex item. The items then participate in flex layout, and all of the properties defined in the CSS Flexible Box Layout Module may be applied. 基本概念 当给一个 element 设置 display:flex 属性时， 它本身就变成了一个 flex container ， 而它的子元素就成为 flex item ， flex 有很多属性可以用来对 flex item 进行布局，明白了这个基本原理，我们学习 flex 就很简单，只需要查看对应 flex property 的用法就可以。 常用flex property flex

在gdk/gdkx.h中可以看到定义了GdkWindow与Xlib中结构的变量访问，如GDK_WINDOW_XID得到Window(xid)， Display可以通过XOpenDisplay(NULL)或者GDK_WINDOW_XDISPLAY。 得到这些后，想更变一下窗体控件的属性就简单了。 例如： GtkWidget *win = NULL; win = gtk_window_new (Gtk_WINDOW_TOPLEVEL); Display *display = XOpenDisplay(NULL); XResizeWindow (display, GDK_WINDOW_XID (win->window), 200, 200); //更改win的size XFlush (display); //即时刷新 可以使用如下接口： GtkWindow *win; GdkWindow *window = gtk_widget_get_window(win); const Window xwin = GDK_WINDOW_XID(window); Display * const display=GDK_WINDOW_XDISPLAY(window); 来获取Window 的id以及Display。 来源： CSDN 作者： 柳鲲鹏 链接： https://blog.csdn.net

实现一个盒子中的内容居中有很多方式，这里介绍一个我不经常用的方法，即display:table-cell配合vertical-align:middle的方式。 .box { width: 150px; height: 150px; border: 1px solid #ededed; display: table-cell; vertical-align: middle; } .box img { width: 100%; display: block; } <div class="box"> <img src="./images/nav1.jpg"> </div> 效果： 来源： CSDN 作者： zhener09 链接： https://blog.csdn.net/sinat_41747081/article/details/104064673