11个CSS的必会技巧.docxVIP

让每一名学员高薪就业 11个CSS的必会技巧 在前端开发中，CSS是非常重要的一部分，可以说是学无止境，CSS不仅仅可以改进网站的设计。而且能够开拓网站设计更多的可能性，设计出来的网页会更加的具有吸引力。因此对于前端开发者、网站设计师来说，掌握并熟练应用各种CSS是一项必不可少的技能。下面是 HYPERLINK /threeWeb.htm 源码时代web前端学科老师给大家分享的前端开发中11个CSS必会技巧。 1、清除浮动 浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是.... INCLUDEPICTURE \d /upload/news/2016-12-08/3061527c-8174-4cf2-bcb0-29c750012030.png \* MERGEFORMATINET  2、垂直水平居中 在css的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式： 绝对定位方式且已知宽高 INCLUDEPICTURE \d /upload/news/2016-12-05/bea04cf7-1ed3-4435-b417-e3703cbd744b.png \* MERGEFORMATINET  绝对定位 ＋ 未知宽高 ＋ translate INCLUDEPICTURE \d /upload/news/2016-12-05/a305fa7f-6c5c-4743-86f5-ff18b51185cc.png \* MERGEFORMATINET  flex 轻松搞定水平垂直居中( 未知宽高) INCLUDEPICTURE \d /upload/news/2016-12-05/2da8ccc1-9be8-4e0f-aeaa-ba0f2f0a699b.png \* MERGEFORMATINET  3、文本末尾添加省略号 当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。 宽度固定，适合单行显示... INCLUDEPICTURE \d /upload/news/2016-12-05/dde24e39-196f-4a97-997b-d580cfa14406.png \* MERGEFORMATINET  宽度不固定，适合多行以及移动端显示 INCLUDEPICTURE \d /upload/news/2016-12-05/e751ee70-3e25-4df4-82f0-93acdfae2d60.png \* MERGEFORMATINET  4、制造文本的模糊效果 当我们希望给文本制造一种模糊效果感觉的时候，可以这样做 INCLUDEPICTURE \d /upload/news/2016-12-05/e5f1a1bd-f32c-495b-8a44-cd005ebca0ad.png \* MERGEFORMATINET  5、动画实现简洁loading效果 我们来实现一个非常简洁的loading效果 INCLUDEPICTURE \d /upload/news/2016-12-05/6af610d8-a4b8-40f8-b84e-1fffe2be638e.png \* MERGEFORMATINET  6、自定义文本选中样式 默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)，如果我们想自己定制被选中的部分的样式呢? INCLUDEPICTURE \d /upload/news/2016-12-05/fa0b40b5-aa2b-4414-8d6b-0e06f9da894a.png \* MERGEFORMATINET  7、移动端可点击元素去处默认边框 在移动端浏览器上，当你点击一个链接或者通过Javascript定义的可点击元素的时候，会出现蓝色边框，说实话，这是很恶心的，怎么去掉呢? INCLUDEPICTURE \d /upload/news/2016-12-05/db687f1c-f212-4d6a-85ed-8154399268ff.png \* MERGEFORMATINET 8、首字下沉 要实现类似word中首字下沉的效果可以使用以下代码 INCLUDEPICTURE \d /upload/news/2016-12-05/0d99347b-b1a7-40b2-8193-ed523760b7b5.png \* MERGEFORMATINET