标签：示例 pac 修改字体 lap tar use float master adjust
一、设置等宽的表格
table-layout: fixed;
示例
<style>
table{
table-layout: fixed;
border-collapse: collapse;
width: 200px;
}
tr,td{
border: 1px solid #eee ;
}
</style>
<table>
<thead>
<tr>
<td>三个字</td>
<td>八字八字八字八字</td>
</tr>
<tr>
<td>六个字六个字</td>
<td>六个字六个字</td>
</tr>
</thead>
<tbody>
<tr>
<td>两字</td>
<td>两字</td>
</tr>
<tr>
<td>六个字六个字</td>
<td>六个字六个字</td>
</tr>
</tbody>
</table>
二、flexbox 布局
智能计算padding
.parent{ display: flex; justify-content: space-around;//center,flex-start,flex-end，space-around,子项目在主轴上的对齐方式 align-items: center;//flex-start,flex-end,stretch,baseline,子项目在交叉轴上的对齐方式 .child{ flex: 0 1 auto;//flex-grow,flex-shrink,flex-basis的简写 } }
容器属性(CSS的columns在伸缩容器上没有效果)
项目属性(float、clear和vertical-align在伸缩项目上没有效果)
这个属性有很大的兼容性问题，详见此页面的Known issues。如果使用的话建议配合autofixer。
三、ntn-child使用负数选择项目
<style> li:nth-child(-n+3){ background: yellow; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
选取到前三个li
三、calc()使用
width: calc(100% - 30px);
在less中使用会解析成width: calc(70%)，可以用 ~ 避免less编译：
width: calc(~"100% - 30px");
四、sticky使用
css3新增的position值，表现吸顶效果
position: sticky;
top: 0px;
五、文字+图标居中简便方法
<style> .outer{ width: 500px; height: 100px; display: table; border:1px solid #eeeeee; } .inner{ text-align: center; display: table-cell; vertical-align: middle; } </style> <div class="outer"> <div class="inner"> <img src="//www.baidu.com/img/baidu_jgylogo3.gif" alt="" width="10px" height="10px" /> 文字+图标居中 </div> </div>
六、三角形（向上的带颜色箭头）
.arr{ width:0px; height:0px; border-left:1px dashed transparent; border-right:1px dashed transparent; border-top:1px solid color; }
七、禁止浏览器放大字体（使用QQ浏览器x5内核和微信浏览网页时会修改字体大小）
html{-webkit-text-size-adjust:100%;}
八、使用浮动做三栏布局 来源
<div class="container1"> <div class="item left">left: width: 100px</div> <div class="item right ">right width: 100px</div> <div class="item center ">中间宽度自定义</div> </div> <style> .container1 { height: 100px; border: 1px solid #000; } .item { height: 100%; border: 1px solid red; } .left{ float: left; width: 100px; } .center { margin: 0 100px; width: auto; } .right { float: right; width: 100px; } </style>
。。。
标签：示例 pac 修改字体 lap tar use float master adjust
原文地址：http://www.cnblogs.com/-ge-zi/p/7105799.html
