先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column 相反) 二.flex-wrap: (内容一行容不下的时候才有效) ※ flex-wrap:nowrap (…

对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id="big"> <img src="img/3.jpg" /> </div> 2.然后css #big { width: 800px; height: 800px; border: 1px solid red; margin: 0 auto…

我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素.问题是,至少要解决响应式问题,并且响应式并不完全可控的.   了解CSS属性:clip-path   clip-path 是工作草案的一部分,它是一个通过屏蔽和裁减来隐藏元…

转载自:http://www.cnblogs.com/hitwtx/archive/2011/12/03/2274592.html linux下sort命令使用详解---linux将文本文件内容加以排序命令 时间:2010-06-10 21:06来源:未知 作者:Linux安全网 点击: 372 次 功 能说明:将文本文件内容加以排序. 语 法: sort [-bcdfimMnr][-o输出文件][-t分隔字符][+起始栏位-结束栏位][--help][--verison][文件] 补充说明:s…

文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%,-50%)  必须加上 top: 50%; left: 50%; 优点: 1.      内容可变高度 2.      代码量少 缺点: 1.      IE8不支持 2.      属性需要写浏…

父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 方法三:(宽高不定) div绝对定位水平垂直居中[Transforms 变形] 兼容性:IE8不支持: 方法四:(宽高不定) flex布局(对父元素display:flex) 方法五: 父盒子display: table-cell和子盒子dis…

  div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的div的margin-top和margin-left,都设置为该div高度和宽度的一半. position:absolute; width:200px; height:100px; left:50%; top:50%; border:1px solid red; margin-left:-100px;…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 颜色 CSS3中,有一种新的表示颜色的方式:RGBA或者HSLA. RGBA.HSLA可应用于所有使用颜色的地方. RGBA 举例: background-color: rgba(0, 0, 255, 0.3); border: 30px solid rgba(0, 255, 0, 0.3…

一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元素的内边距和边框. 简而言之就是,一般的盒子都是属于这种,最显著的特点就是加上padding后,盒子会被撑大,需要减去对应的高度或宽度. 2.border-box 为元素设定的宽度和高度决定了元素的边框盒.就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制. 通过从已设定的宽度和…

第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -moz- Firefox -ms- IE (2) css p { height:15px;/*类似于高度这种属性,必须明确指定值*/ } p:hover/*初始p:hover*/ { height:100px; } (3)html文件body部分 <p></p> 1.快速使用 将下面属性加…