css小技巧(更新中)

5个月前 (09-04) 331次浏览 已收录 0个评论

表头对齐

  • 如果div中只有一个内联元素,那么div的高度就是这个内联元素所在行的行高。
  • 如果有一个单词(字)很长很长,超出盒子,但是又不想让他自动换行,就可以直接使用下面的代码,让该字恢复正常,即和正常文档流一样,该什么时候换行就什么时候换行:
文档流:内联元素从左到右,块级元素从上到下
word-break:break-all 多行自动切断并换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表头对齐</title>
    <style>
        div{
            border: 1px solid red;
            font-size: 20px;
        }
        span{
            border: 1px solid green;
            display: inline-block;
            width: 5em;

            /* 当有多行内容时两边对齐 */
            text-align: justify;

            /* 去掉虚假的内容 */
            line-height: 20px;
            overflow: hidden;
            height: 20px;
        }
        /* 做一个虚假的多行内容,以满足上边的条件 */
        span::after{
            content: '';
            display: inline-block;
            width: 100%;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
        <span>姓名</span><br>
        <span>联系方式</span>
    </div>
</body>
</html>
结果演示

布局技巧

  1. float
    1. 儿子全加 float: left (right)
    2. 老子加 .clearfix
    3. 定宽定高
  2. flex
    1. 老子加 display: flex
    2. 老子加 justify-content: space-between;
    3. 弹性宽度

如果宽度不够,可以用 margin: 0 -4px;

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}
<a href=’javascript:;’>阻止链接跳转

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css小技巧(更新中)
喜欢 (2)

您必须 登录 才能发表评论!