line-height

使用display:table-cell元素部分出现空白缝隙的结解决

由 ▼魔方 西西 提交于 2019-12-02 16:28:14
<div class="hotelPicDiv"> <div><img class="hotelPic" src="resources/images/hotel/40793bc11d7351dae2ebfc9135856832.jpg" /></div> </div> .hotelPicDiv{ width:3rem; height:3rem;overflow:hidden; float:left; margin:0.345rem 0.285rem; display: table;} .hotelPicDiv div{ display:table-cell; vertical-align:middle; line-height: 0;} .hotelPic{ width:100%;} 此处终点标注关键三个属性. hotelPicDiv{ display: table;} .hotelPicDiv div{ display:table-cell; vertical-align:middle; line-height: 1;} 重中之重： line-height: 1; 解决缝隙的关键就是他了，原理请参考：http://blog.csdn.net/hmily_hui/article/details/54614028 来源： CSDN 作者： GG_Sone 链接： https:/

Vue自行封装常用组件-倒计时

由 僤鯓⒐⒋嵵緔 提交于 2019-12-02 04:57:22
倒计时组件，比较复杂一点，大神勿调侃，精确到毫秒，因为项目中多次出现倒计时，所以拿出来分享下 使用方法： 1.在父组件中引入"uni-countdown" //import uniCountdown from "./uni-countdown"; 2.在父组件中注册 uniCountdown //components:{uniCountdown}, 3.放在父组件中使用 //<uni-countdown></uni-countdown> 参数代码太多直接看文件里面的吧 4.调用uniCountdown组件 //this.StatusLock = true 注：index.vue为父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用 index.vue <template> <div> <div class="TimingBox" v-show="StatusLock"> <div> <p class="texttitle">您的粉丝为您创造{{Amount}}元奖励</p> <p class="text">倒计时结束您将永远失去他们</p> <div class="ContentOfTheTiming"> <div style="font-size:.6rem;" class="flex center"> <uni-countdown bordercolor=

微信小程序如何自定义新用户引导页

由 冷暖自知 提交于 2019-12-02 03:26:42
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_38194393/article/details/89495786 根据不同的需求，现在出现了给小程序添加新用户引导页面。 设计流程：指引用户点击右上角，将本小程序添加到我的小程序。点击“去试试”后不再显示。前提是新用户或者首次打开。 设计图： 实现步骤： 1》思路：在小程序首页生命周期函数中，加入条件判断。在用户点击【记住了，我去试试】事件上增加缓存信息。 2》用这个缓存在用户每次打开小程序的时候来判断是否显示 页面的代码： <view class='page-cont'> <view class='top'> <image src='{{cdnPath}}img/firstOpen/topjiantou.png'></image> <view class='p_one'>添加友途车服小程序，解决更多养车问题</view> </view> <view class='cont'> <view class='cont-p'> <view class='text'><text>1</text></view><view>点击右上角</view> <image src='{{cdnPath}}img/firstOpen

SVM官方教程：SVR 简易教程

由 谁说胖子不能爱 提交于 2019-12-01 20:29:19
SVR： 简易使用教程 */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ SVR 简易教程 ¶ In [1]: import numpy as np from sklearn.svm import SVR import matplotlib.pyplot as plt 构造数据 ¶ In [2]: # Generate sample data X = np.sort(5 * np.random.rand(40, 1), axis=0) y = np.sin(X).ravel() In [3]: # Add noise to targets y[::5] += 3 * (0.5 - np.random.rand(8)) 选择核函数 ¶ In [4]: svr_rbf = SVR(kernel='rbf', C=100, gamma=0.1, epsilon=.1) svr_lin = SVR(kernel='linear', C=100, gamma='auto') svr_poly = SVR(kernel='poly', C=100, gamma='auto', degree=3, epsilon=.1, coef0=1) 技巧：绘图 $linewidths$ 的简易写法 $lw $，这我以前还不知道。 In [11]: lw = 2

css3画半圆的两种方法

由 余生颓废 提交于 2019-12-01 15:39:04
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0;} .clearfix{zoom:1;/*为IE6，7的兼容性设置*/} .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } ul li { list-style: none; float: left; margin: 50px 0 50px 20px; text-align: center; } li { background: red; } h2 { margin-top: 20px; } .circle1 { width: 100px; height: 50px; border-radius: 50px 50px 0 0; line-height: 50px; } .circle2 {

现在SimpleMemory的CSS(by BNDong)

由 我的未来我决定 提交于 2019-12-01 12:29:15
#EntryTag{margin-top:20px;font-size:9pt;color:gray}.topicListFooter{text-align:right;margin-right:10px;margin-top:10px}#divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt}*{margin:0;padding:0}html{height:100%;max-height:100%;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{background-color:#fff;font-size:12px;max-height:100%;font-family:"Merriweather","Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;color:#3a4145;-moz-font-feature-settings:'kern' 1;-o-font-feature-settings:'kern' 1;overflow:hidden}body:before{content:'';display

Flex布局

由 匆匆过客 提交于 2019-12-01 11:45:31
Flex布局 一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 1 2 3 .box{ display :flex; } 　　行内元素也可以使用Flex布局。 1 2 3 .box{ display :inline-flex; } 　　webkit内核的浏览器，必需加上-webkit前缀 1 2 3 4 .box{ display :-webkit-flex; display :flex; } 　　需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三

博客园的博客美化

由 亡梦爱人 提交于 2019-12-01 07:20:32
1. 博客皮肤选择：En_summerGarden 2. 页面定制css代码 /*================================================================================>修改页面代码字体<===========*/ .cnblogs_code pre { font-family: Courier New!important; font-size: 16px!important; word-wrap: break-word; white-space: pre-wrap; } .cnblogs_code span { font-family: Courier New!important; font-size: 16px!important; line-height: 1.5!important; } /*================================================================================>修改背景样式<===========*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div,

浅谈line-height

由 亡梦爱人 提交于 2019-12-01 05:42:17
#基础知识 有4种模型，分别是 块，块盒模型 containing boxing,包括 line 行内盒模型 inline boxing ,包含 content 行模型 line boxing,包含 inline , line 高度是由最高的 inline 元素决定. 内容区域 content area 这部分内容可以着重看 这里 有详细的介绍。 ##line-height与line boxes高度 由上面的内容可以总结出 line boxes 的高度取决与其下属的 inline boxes 中最高的元素。 对于像input这样的元素,在不同浏览器上line-height属性表现是不同,参考 Line-Height Doesn’t Work As Expected On Inputs ##垂直居中的特性 行高还有一个特性，叫做垂直居中性。line-height的最终表现是通过line boxes实现的，而无论line boxes所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。 ----张鑫旭的博文 我们经常看到一种垂直居中的方法,那就是让 height 和 line-height 相同 text-vertical{ height:30px; line-height:30px; } 其实在这里起作用的是 line-height ,

CSS不同颜色按钮实例

由 前提是你 提交于 2019-12-01 04:52:32
CSS减少代码重复技巧非常多，以主要包含采用相对尺寸、半透明颜色的实例来说明CSS减少代码重复技巧的一些运用。 以下为通过CSS代码实现的一个“Yes!”按钮效果以及相应的代码： <span class='basisButton'> Yes! </span>　 与之组合的CSS代码： .basisButton { padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; }　　 #相对尺寸的使用 行高是字号的1.5倍，可以修改为： font-size: 20px; line-height: 1.5em; 字号也可以根据父元素字号修改为相对尺寸： font-size: 1.25em; /* 假设父级元素字号为16px*/ line-height: 1.5em;　 将pading、border-radius、box-shadow以及text-shadow值也根据字号为基准修改为相对尺寸：
订阅 line-height