首页 > 代码库 > css技巧

css技巧

2024-11-27 11:34:02   203人阅读

一、设置等宽的表格

table-layout: fixed;
  • table设置宽，则每列平分table的宽

示例

<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在伸缩容器上没有效果)

  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow: flex-direction 和 flex-wrap的简写形式
  • align-content: 定位多根轴线的对齐方式。flex-start | flex-end | center | space-around | space-between | stretch

 

项目属性(float、clear和vertical-align在伸缩项目上没有效果)

  • order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。auto | flex-strat | flex-end | center | baseline | stretch

这个属性有很大的兼容性问题，详见此页面的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>

。。。

css技巧


联系
我们