CSS技巧和经验:

css html web前端



如何清除图片下方出现几像素的空白间隙

1

img {

display: block;

}

2

img {

vertical-align: top;

}

除了text-top | middle | bottom | text-bottom值都可以

3

的父元素

#test {

font-size: 0;

line-height: 0;

}

如何让文本垂直对齐文本输入框

input {

vertical-align: middle;

}


如何让单行文本在容器内垂直居中

#test {

height: 25px;

line-height: 25px;

}

只需设置文本的行高即可

如何让超链接访问后和访问前的颜色不同且访问后仍保留效果 为什么是link-visited-hover-active

a:link {

color: #03c;

}

a:visited {

color: #666;

}

a:hover {

color: #f30;

}

a:active {

color: #c30;

}

(讨厌)

如何使文本溢出边界不换行强制在一行内显示 详解

#test {

width: 150px;

white-space: nowrap;

}

设置容器的宽度和即可


如何使文本溢出边界显示为省略号 详解


#test {

width: 150px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

首先需设置将文本强制在一行内显示,然后将溢出的文本通过方式将截断的文本显示为省略号


如何使连续的长字符串自动换行 详解


#test {

width: 150px;

word-wrap: break-word;

}

值允许单词内换行


如何清除浮动


1

#test {

clear: both;

}

为浮动元素的下一个兄弟元素


2

#test {

display: block;

zoom: 1;

overflow: hidden;

}

height

3

#test {

zoom: 1;

}

#test:after {

display: block;

clear: both;

visibility: hidden;

height: 0;

content: '';

}

为浮动元素的父元素


如何定义鼠标指针的光标形状为手型 详解


#test {

cursor: pointer;

}

简单设置pointer

如何让已知宽高的容器在页面中水平垂直居中


详解


#test {

width: 200px;

height: 100px;

position: relative;

top: 50%;

margin: 0 auto

margin-top: -50px;

}

首先容器为相对定位,设置使其水平居中


详解


#test {

width: 200px;

height: 100px;

position: relative;

top: 50%;

transform: translateY(-50%);

margin: 0 auto;

}

首先容器为相对定位,设置top: 50%;transform: translateY(-50%);使其水平居中


如何让未知尺寸的图片在已知宽高的容器内水平垂直居中 详解


#test {

display: table-cell;

width: 200px;

height: 200px;

text-align: center;

vertical-align: middle;

}

#test p {

margin: 0;

}

#test p img {

vertical-align: middle;

}

的父节点




相关推荐

  • 考场作答申论的十大经验技巧   考场作答申论的十大经验技巧  ————编者寄语广大考生  此文是高守国于2009年11月20日,中央机关及其直属结构公务员录用考试前一周,在中国法制出版社网站(.zgfzs.)发表的。后来此文又被收录在《申论。面试》书的前面,买过这本书
  • 深度无盘使用经验技巧集合 在这里,将深度无盘的一些使用经验技巧帖子做了整理.大家在学习完新手安装教程之后,如想进一步提升自己的技术,这里将是一个非常快捷的通道.希望能对大家有一定的帮助.深度无盘初体验:http://bbs.txwb.com/read-htm-tid
  • 批发经验,外贸服装店需要掌握的服装批发经验技巧 2015-11-12  第六、买入库存积压或清仓处理产品  我们开店做外贸服装,除了要懂得店铺经营之外,最重要的是要如何寻找外贸服装进货渠道,外贸服装店需要掌握哪些服装批发经验技巧呢?一起来学习下。  第一、批发市场进货我们开店做外贸服装,
  • 数控车工实操经验技巧27条 数控车工实操经验技巧27条1、高速车削细长轴时应注意的问题“车工怕车杆”。这句话反映出车削细长杆的难度。由于细长轴的特点和技术要求,在高速车削时,易产生振动、多棱、竹节、圆柱度差和弯曲等缺陷。要想顺利地把它车好,必须全面注意工艺中的问题。(
  • [经验技巧] 【转载】新入windows phone 流量也要hold住。 原文链接:[经验技巧]【转载】新入windowsphone流量也要hold住。WP7论坛!WINDOWSPHONE7系统为我们提供了前所未有的体验,那就是在线同步服务,但好的服务也要付出昂贵的代价,那就是网络流量,我感觉在木有wifi情况下
  • Delphi经验技巧集锦 Delphi经验技巧集锦作者:吴泽平文章来源:逆风sBLog点击数:一.为列表框添光彩----为了改变Listbox和Combobox两个控件的单调风格,我想在它们的每一项前面加上个图标。从表面上看好像不大可能啦。就在走投无路的时候,我忽然
  • PHP编写网站程序的十个经验技巧 PHP编写网站程序的十个经验技巧[url=http://www.now.cn/indexr.php?r=!bbstoudeng]www.now.cnvhost[/url][url=http://www.now.cn/indexr.php?r
  • 考场作答申论的十大经验技巧 考场作答申论的十大经验技巧各位坛友,大家好!2010年的考试大纲中“申论”部分有了较大改动,为了便于大家的理解和把握,我在讲解之前先与大家共同探讨一下申论新大纲。一、对今年考试大纲的解读我一直强调“把申论考试大纲那几句话背下来,每天默念十遍
  • 资深老驴亲身传教 新驴户外徒步经验技巧 徒步刚开始徒步的时候,凡事都有一个循序渐进的过程,如果你是刚刚参与到户外徒步的阵营中来,一定不要急于求成。下面的几条原则对于刚开始徒步的户外爱好者有一定的参考意义。一、一定要按照自己的速度来走:不要逞强埋头猛走,这样会大量消耗体力,结果是欲
  • 永平法硕复试政策经验技巧一本通(8.0版) GuidancetoJMInterviewTestPolicy,ExperienceandTechnique原标题:《我谈法律硕士复试政策经验与技巧(6.0版)》  很多人关心的“法硕如何成功调剂”的详细指导则请阅读永平法硕网站政策专栏另一
  • 浅谈整站SEO优化的经验技巧 上一篇文章写到SEO经验与技巧之整站优化概述。这篇内容说说整站优化与网页优化的区别吧。在上一篇当中,也有讲到一点整站优化与网页优化的不同之处。转回来说其目地是一样的,都是为了排名。接下来我细谈下它们两者当中存在的不同之处。  整站优化与网页
  • SP短信联盟日赚600经验技巧 给大家讲下我自己做SP短信联盟的一些技巧和窍门,希望大家都有所成就.方法是死的,人是活的,要灵活运用,给大家总结分享一下!技巧:1,注意事项:空间和域名.为了不必要的麻烦,空间一定要是国外空间,域名全部假资料,或者用国外域名.空间要稳定快速

热门评论

你的评论

就没有什么想说的吗?

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X