CSS小技巧收藏_html/css_WEB-ITnose
程序员文章站
2024-01-10 14:50:56
...
最后更新于:2016-01-13 16:16 ,
以下是我积累的一些常用的css代码,会不断更新,最新的代码会显示在最前面,同时我也会提供最新更新日期以便查阅。
居中对齐
很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法:
1.在知道子元素宽度与高度的情况下进行居中,采用位置定位:absolute + margin
.parent { position: relative;}.child { position: absolute; width: 100px; height: 60px; top: 50%; left: 50%; margin: -30px 0 0 -50px;}
2.在不知道子元素高与宽的情况下,采用位置定位:absolute + transform
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
3.采用flexbox进行居中对齐
.parent { display: flex; justify-content: center; align-items: center;}
选择某范围内的子元素
选择5-10的子元素
ul li:nth-child(n+5):nth-child(-n+10) { background-color: red;}
演示地址:http://codepen.io/moyu/pen/KVvzbX
最佳适应图片
这段代码非常适用于给文章列表加缩略图的时候用,能最好的避免图片比例不协调的问题,统一排版。你可以随意更改width与height来查看效果。
.thumbnail { width: 200px; height: 150px; background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
演示地址:http://codepen.io/moyu/pen/JGyKGQ
占满全屏
.fullScreen { width: 100vw; height: 100vh;}
演示地址:http://lab.liuxinyu.me/fullbg/index.html
自动分章节
文章正文里我们经常采用
, , , 这样的标签来分章,分节。这是一个非常不错的习惯,但常常只有字体粗细大小的不同,在这里我们为每个章节加上1,2,3这样的标注。以下代码在.document容器内有效。(其他需要计数的模块也可以用这样的方法)
, 这样的标签来分章,分节。这是一个非常不错的习惯,但常常只有字体粗细大小的不同,在这里我们为每个章节加上1,2,3这样的标注。以下代码在.document容器内有效。(其他需要计数的模块也可以用这样的方法)
演示地址:http://codepen.io/moyu/pen/NxvrjX
自适应视频播放器
当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让播放器按16:9的比例显示并自适应各个设备。
CSS代码:
.media-wrap { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}.media-wrap iframe,.media-wrap embed,.media-wrap object { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
HTML代码:
下一篇: JS中闭包的含义
推荐阅读
-
Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose
-
CSS小技巧收藏_html/css_WEB-ITnose
-
CSS:水平居中与垂直居中_html/css_WEB-ITnose
-
问个弱弱的问题,target='_black'能否指定打开页面的大小。_html/css_WEB-ITnose
-
10_Android中通过HttpUrlConnection访问网络,Handler和多线程使用,读取网络html代码并显示在界面上,ScrollView组件的使用_html/css_WEB-ITnose
-
CSS3 Transition, transform 和 animation 介绍_html/css_WEB-ITnose
-
求高手帮我写个列表与列表之间的嵌套问题_html/css_WEB-ITnose
-
求问这样的select标签是怎样做出来的_html/css_WEB-ITnose
-
html+css基础知识点_html/css_WEB-ITnose
-
CSS3 知识点_html/css_WEB-ITnose