个人空间html源码,HTML常用代码段 - lynn_xiao的个人空间 - OSCHINA - 中文开源技术交流社区...

base64格式：

———————————————————————————————

ie注释方式：

———————————————————————————————————————————————

ie8兼容大法

利用斜杠9来兼容ie8，有些属性只有ie9以上才支持，比如子选择器这种

———————————————————————————————————————————————

头图的背景设置：background-position:center bottom;

———————————————————————————————————————————————

透明边框：

body {

background-color:red;

}

.div {

display:inline-block;

border: 10px solid rgba(255,255,255,.5);

background: white;

background-clip: padding-box;

}

———————————————————————————————————————————————

媒体查询：

———————————————————————————————————————————————

上传多个文件：

后端php处理：

foreach ($_FILES['uploads']['name'] as $filename) {

echo '

' . $filename . '';

}

———————————————————————————————————————————————

自动选中框内的文本：

example text

———————————————————————————————————————————————

单行文本过长注释

div.test

{

white-space:nowrap;

width:12em;

overflow:hidden;

text-overflow:ellipsis;

}

———————————————————————————————————————————————

多行文本注释：

overflow: hidden;

text-overflow: ellipsis;

display: box;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

———————————————————————————————————————————————

.parent {

float: left;

margin-right:20px;

width: 200px;

height: 100px;

background-color: red;

}

.children {

position: relative;

left: 50%;

top:50%;

width:150px;

-webkit-transform : translate3d(-50%, -50%, 0);

transform : translate3d(-50%, -50%, 0);

background-color: black;

color:white;

}

一行文字水平垂直居中噢！

多行文字水平垂直居中噢！

多行文字水平垂直居中噢！

———————————————————————————————————————————————

水平居中：子容器和父容器的宽度都不固定

垂直居中2

利用translate来居中。

垂直居中3

水平垂直居中

子容器和父容器高度宽度都不确定的情况下。

水平垂直居中1

兼容性好。

水平垂直居中2

不影响其他元素，但兼容性不好。

水平垂直居中3

多列布局

定宽与自适应

一列定宽，一列自适应。

方案1：

优点是容易理解。

缺点是由于右边不是浮动的，所以如果其中有清除浮动，就出现问题。

方案2：

通过右侧触发bfc来解决。

方案3：

table-layout可以提高渲染速度。

方案4：

两列定宽，一列自适应。

和一列定宽是类似的：

不定宽与自适应

不定宽是指宽度由内部元素撑起来。

方案1：

主流方式。

方案2：

其中的0.1%是为了避免1px在ie8下的bug。

方案3：

flex万能大法，但是兼容行不行。

两列不定宽一列自适应是一个道理：

等宽

每一列中的宽度一样，每一列的间距一样。

方案1：

box-sizing:border-box是为了让宽度包含padding，父亲的margin-left需要和间距一致。

方案2：

优点是结构和样式解耦了，中间无论多少列都是等宽。

缺点是多了一些结构代码。

方案3：

这里的.column+.column选择的是第一列之外的后面几列。

等高

左列变高后，右列对应也要变高，我们需要两列是等高的。

方案1：

方案2：

方案3：

这种属于伪等高。

全屏布局

后台系统的标准配置，上左下区域固定宽高，右部自适应。

方案1:

方案2：