<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div> 语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）ellipsis : 当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象...
本文转载自 http://www.cnblogs.com/tugenhua0707/p/3485384.html CSS2.0实现面包屑 面包屑这样的 我们以前都是用背景图片做这块工作，但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持)。由于有前一次总结一篇关于"CSS实现气泡框效果" 的文章 其中有关于怎么样实现小三角形的列子 所以感觉用那个小三角形可以正好模拟这块工作，所...
之前在使用经常遇到下面的问题：html：1<div class="top">2<div class="one">I‘m the first!</div>3<div class="two">I‘m the second!</div>4</div>css： .one{width: 100px;height: 100px;background: red;margin-top:20px;}.two{width:100px;height:100px;background:blue;}.top{width:200px;height:300px;background:gray;} 显示结果：.one与.top之间并没有实现margin-top的效果，这个问题发生的原因是根据规范，一...
CSS,font-family,好看常用的中文字体例1（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,‘宋体‘,sans-serif;例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei‘,arial,tahoma,\5b8b\4f53,sans-serif;例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;例5（一淘UX）:font-family: Helvetica, ‘...
转自：http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=referral一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ 4 background...
时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...
float:left; 当前元素向左侧浮动.float:right: 当前元素向右侧浮动.clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不仅仅是一个文本行的概念.原文：http...
记录一下曾经遇见的css怪象，不如你也来看看，搜一搜我们曾经遇见的坑。坑位一：inline-block坑位1.1：inline-block和多出的空白。坑位1.2：inline-block和元素上浮。坑位1.3：坑位二：关于 absolute-left当然也有可能不是坑；不过很奇怪的是有时候在 PC端的时候是没错的，到了移动端就错了==； 坑点：在 absolute 中，left: auto; = left: 50%; ？？？（也许是我才疏学浅的错误认知，我一直以为 left:auto 与 left:0是一致的）<ul...
很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习前端基础更是大有裨益。 而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。 前面几题是会很基础，越下越有深度。 附上第一篇：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇： 1.你做的页面在哪些流览器测试过？这些浏览器的...
运行一个从网上download的一个MVC项目，运行的时候无法显示样式，js也报错。检查路径也没有问题，后来在配置中把其中的一段配置去掉 <staticContent> <!-- remove first in case they are defined in IIS already, which would cause a runtime error --> <remove fileExtension=".woff"/> <remove fileExtension=".woff2"/> <mimeMap fileExtension=".woff" mimeType="application/font-woff"/> <mimeMa...
1.通配选择器匹配所有元素 *{color:red;}2.标签选择器匹配所有p元素 p{color:red;}3.ID选择器匹配ID="div1"的元素 #div1{color:red;}4.类选择器匹配class="red"的元素，CSS和HTML对大小写不敏感，但ID是大小写敏感的。 .red{color:red;} 应用多个class，类名中间用空格隔开，class="red green"。元素将应用red和green的所有规则，重复规则只有一个生效，但不取决于class中类名顺序，而是CSS定义的顺序。 1<!DOCTYPE ht...
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。4. z-i...
1、基本概念1. 基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。3. 行距、行高行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，...
1.水平对齐(text-align)text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，是让盒子里面的内容水平居中， 而不是让盒子居中对齐。其可用属性值如下：left：左对齐（默认值）right：右对齐center：居中对齐 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style> 7 div { 8 background-color: pink; 9 text-align: center;10}1...