由于块级元素的高度是可以设置的，所以对于块级元素的垂直居中比较简单。方法一：在不定高的情况下，把元素的上下内边距设为同一个值即可实现，即padding ：10px 0;以上方法针对块级元素和行内元素都可以。方法二：line-height:（只针对行内元素可行)将行高设置成和父元素的高度相等，就可以实现行内元素的垂直居中了。由于行内元素的对其方式是基线对齐，所以当图片和文字位于一列时，呈现出来的效果往往不是我们想要看到的样子...
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline;jquery写法：$(".figcaption").each(function(i){var divH = $(this).height();var $p = $("p", $(this)).eq(0);while ($p.outerHeight() > divH) {$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));}; });原文：http://www.cnblogs.com/joy...
[CSS all 属性实例修改所有元素或其父元素的属性为初始值： div{??? background-color: yellow;??? color: red;??? all: initial;}定义和使用all 属性用于重置所有属性，除了 unicode-bidi 和 direction。默认值:none继承:无动画:no。 阅读 animatable 版本:CSS3JavaScript 语法:object.style.all="initial"浏览器支持The numbers in the table specify the first browser version that fully supports the property. 表格中的数字...
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){background-color:red;} </style> ...... <div ><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div> </div><!-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素4、E > F E元素下面第一层子集5、E...
前言当用vue-cli 脚手架 打包压缩时，发现打包出来的css 没有被压缩，所以查阅了些资料，下面用这个方法解决： 1.首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),2.然后在utils.js中添加， minimize:true const cssLoader = {loader: ‘css-loader‘,options: {sourceMap: options.sourc...
要求：一个小时仿照博客园的格局，写一个静态的网页，主要采用HTML+CSS+DIV的布局方式，新建两个文件:website.html、website.csswebsite.html代码如下：<!doctype html><html lang="zh-CN"><head><meta charset="ansi"><media name="description" content="this is a website"><media name="keywords" content="website,html,css"><title>这是一个网页website</title><link rel="stylesheet" style="text/css" href="website.css">...
1.基本样式： ————宽 属性：width 属性值：长度值 ————高 属性：height 属性值：长度值 ————块级元素与行内元素之间的转换 属性： display 属性值：block 转换为块级元素 inline 转换为行内元素 inline-block 转换成行内块元素 linline-block可以设置宽高，但是不会换行 2.背景属性： CSS可以用纯色调作为背景，也可以用图片作为背景 ————背...
jq：1、prepend(参数);//将参数内容前置再某元素内部;eg:<div id="div1">奇妙能力歌</div>$("#div1").prepend("<a href=‘#‘>陈粒</a>");//得出结果：<div id="div1"><a href=‘#‘>陈粒</a>奇妙能力歌</div>2、outerHeight(boolean)outerHeight(false);//不计算元素的margin值 计算padding和borderouterHeight(true);//计算元素的margin值3、delay(time);延迟;eg:$("#div1").delay(300).show();//该元素延迟300ms再执行显示;4、设...
?记在前面 人生最大的希望在于：自己值得自己等待 先打开运行项目： 一、less和reset.css的使用1.less的引用： 安装less和less-loader（之前补充过了）传送地址：https://www.cnblogs.com/crystral/p/9117161.html 2.reset.css的引用①去这个网站（https://cssreset.com/）下载一个reset.css文件，然后copy到src目录下：（这个我没有下载下来，点击没反应，所以去老师那里copy了一份，代码我放下面） reset.css/** * E...
<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...