-
1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；
2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中查看全部 -
/*创建flex布局*/
display: -webkit-flex;
display: flex;
/*设置 水平/垂直方向 为主轴*/
-webkit-flex-direction: row;
flex-direction: row;
/*设置项目在 主轴 上的位置*/
-webkit-justify-content: center;
justify-content: center;
/*设置项目在 副轴 上的位置*/
-webkit-align-items: center;
align-items: center;
查看全部 -
创建flex容器：
.flexcontainer{ display: -webkit-flex; display: flex; }Flex项目：
主轴方向：flex-direction [ row（水平） | column（垂直） ]
项目移到顶部： [ flex-strat ]
主轴垂直：设置 align-items
主轴水平：设置 justify-content
即： row + align-items、column + justify-content
查看全部 -
box-sizing：盒模型尺寸解析方式
content-box，W3C标准，width/height = 内容 width/height
border-box，IE标准，width/height = 内容 width/height + padding + border
查看全部 -
column-span：跨列
语法说明：
column-span: none | all
none，不跨列
all，跨越所有列，并定位在列的Z轴之上
不能像colspan那样指定跨几列，要么不跨要么全跨
查看全部 -
column-rule：列间边框，与border相似，但column-rule不占任何空间位置，改变列间距column-gap不会影响column-rule的位置
语法规则：
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
查看全部 -
column-gap：每列之间的间距
column-gap: normal || <length>
normal，1em / 默认font-size值
length，数值（>=0）+单位
查看全部 -
column-count：指定列数、允许的最大列数
column-count：auto | <integer>
auto，1列，依靠浏览器计算自动调整
integer，>0，整数
查看全部 -
column-width: auto | <length>
column-width，每列宽度
auto，则由列数决定
length，数值（>0）+单位，指定宽度，宽度超出会出现滚动条
查看全部 -
columns: 宽度 列数;
大部分浏览器支持：需加上前缀，-moz-，-webkit-，-ms-，-o-等
查看全部 -
box-shadow是向盒子添加阴影。支持一个或多个。
box-shadow：x轴偏移量，y轴偏移量 ，阴影模糊半径 ，投影方式（inset为内阴影方式，省略是外阴影方式）inset可以写在参数的第一个后最后一个，其他位置无效。
查看全部 -
border-radius的应用，
border-radius:20px; 所有角都是半径为20px的圆角
border-radius：10px 5px 10px 5px; 所对应的是左上角，右上角， 右下角，左下角；顺序按顺时针旋转
查看全部 -
圆角使用：border-radius
块阴影与文字阴影：shadow， text-shadow
字体@font-face{
font-family:字体名称
src: url（字体文件所在服务器上的位置）
}
查看全部 -
<table cellpadding="0" cellspacing="0" width="302"><tbody><tr class="firstRow"><td width="151" height="50"><p ><span>前缀</span></p></td><td width="151" height="50"><p ><span>浏览器</span></p></td></tr><tr><td width="151" height="38"><p >-webkit</p></td><td width="151" height="38"><p >chrome和safari</p></td></tr><tr><td width="151" height="37"><p >-moz</p></td><td width="151" height="37"><p >firefox</p></td></tr><tr><td width="151" height="37"><p >-ms</p></td><td width="151" height="37"><p >IE</p></td></tr><tr><td width="151" height="47"><p >-o</p></td><td width="151" height="47"><p >opera</p></td></tr></tbody></table><p><br /></p>查看全部
-
<table cellpadding="0" cellspacing="0"><tbody><tr class="firstRow"><td width="158"><p>属性值</p></td><td width="409"><p>属性值说明</p></td></tr><tr><td width="158"><p>outline-color</p></td><td width="409"><p>定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。</p></td></tr><tr><td width="158"><p>outline-style</p></td><td width="409"><p>定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。</p></td></tr><tr><td width="158"><p>outline-width</p></td><td width="409"><p>定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。</p></td></tr><tr><td width="158"><p>outline-offset</p></td><td width="409"><p>定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。</p></td></tr><tr><td width="158"><p>inherit</p></td><td width="409"><p>元素继承父元素的outline效果。</p></td></tr></tbody></table><pre class="code">outline: ［outline-color］ || [outline-style] || [outline-width] || inherit</pre><p>outline-offset需额外写<br /></p>查看全部
举报