你不知道的css之宽度和高度

胡志武98
3,971 阅读6分钟

元素的宽高

一、假如有人问你，一个div的高度由谁决定时，你会怎么回答？

一个div的高度一般是与自身的css样式和内部元素的高度总和有关

  • div设置了height后，整个盒模型的高度基本确定，其内部元素再高也无法改变div的高度

  • 当div不设置height时，其高度和内部文档流元素高度的总和有关

以下内容基于div没有设置height

  • 当div内什么都没有时，其高度为0，

  • 当div内有行内元素时

1557894439489

我们发现当我们的字体大小是20px，div的高度却是26.4px。

有人会说这是因为有行高，26.4/20=1.32，所以行高是1.32em;

那如果我们换一个字体呢？

1557894670333

我们可以发现，当字体换成宋体后，div的高度也改变了，行高也变了。

事实是这样的，每个字体都有其设计者为其设计的行高，当div内只有文字时，其高度=font-size*line-height

  • div内有块级元素时

    会被子元素的height、padding、border撑起来

    <style>
        .parent{
            outline: 5px solid red;
        }
        .child{
            height:100px;
            border: 5px solid green;
        }
</style>
    <div class="parent">
        <div class="child"></div>
    </div>

    1557895329538

    子元素有margin

    <style>
        .parent{
            outline: 5px solid red;
        }
        .child{
            height:100px;
            border: 5px solid green;
            margin:20px;
        }
</style>
    <div class="parent">
        <div class="child"></div>
    </div>

    1557895636815

    可以看到，父元素只有宽度被撑开了，而高度没有变化，这是因为在纵向上，子元素和父元素的margin合并了

    如果给父元素加个border呢

    1557895847520

    可以发现，父元素被撑开了，如果你继续尝试，你会发现给父元素加border,padding(上下),overflow:hidden都能使父元素被撑开，而且不论boder看不看得见，即时border-width:0.1px依然能使父元素撑开。

总结：父元素高度能被子元素的height、border、padding撑开，如果父元元素在垂直方向上有border,padding（只要在逻辑上存在，不论大小）以及overflow:hidden，都能被子元素的margin撑开，否则只能撑开父元素的宽度

  • div的高度不受脱离文档流元素(position,float)的影响

    <style> 
.parent{
            outline: 5px solid red;
            position:relative;
        }
        .child{
            height:100px;
            border: 5px solid green;
        }
        .position{
            position:absolute;
            width:100px;
        }
</style>
    <div class="parent">
        <div class="child"></div>
        <div class="child position"></div>
    </div>

    1557897082543

    你会发现无论第二子元素存不存在，都不影响div的高度

    重点，如果子元素relative，则会影响父元素的高度

    1557897183134

    这是因为relative会保留其原来的位置

二、文字的排版

  • 内联元素之间不论存在多少空格和回车，浏览器只会渲染出一个空格，

    比如我们在做导航条时，经常会用到ul li标签，如果你把li标签变成行内块级标签

    <style>
        ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        ul>li{
            display:inline-block;
            border:1px solid red;
        }
</style>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
    </ul>

    1557898404405

    渲染时，你就发现，li标签之间存在空格，这将对你样式部署造成干扰，所以，还是用float:left比较好，记得清除浮动即可

  • 文字之间的空格大小是不确定的，每个字体的空格大小都是其设计师设计的。

    当你需要对齐文字时，用&nbsp;就是个比较差的方法 了，因为换个字体，他就对不齐了

    这里介绍text-align:justify;他可以使多行文字的两端对齐

    代码套路如下：

    <style>
	div{
            border:1px solid #000; 
        }
        span{
            display:inline-block;
            width:4em;
            /* 这里来设计你对齐宽度是多少，这里是4个字 */
            height:20px;
            line-height:20px;
            text-align:justify;
            overflow: hidden;
            border:1px solid red;
        }
        span::after{
            display:inline-block;
            /* 这里必须是inlinne-block,因为text-align只对内联元素有效 */
            content:"";
         	width:100%;
        	border:1px solid #000;
    }
    <div>
    <span>姓名</span>
    <br>
    <span>联系电话</span>

1557900453485

  • 让文字垂直居中

    一般人会给div设置height和ling-height，这样是不友好的，因为只要文字一超出div，则变得很难看

    <style>
    div{
        height:20px;
        line-height:20px;
        border:1px solid red;
    }

</style
    <div>
        你好呀 你好呀 你好呀 你好呀 你好呀
    </div>

    1557900781748

    最好是给div加padding和line-height使其高度既达到了设计的要求，而且文字再多，样式也很好看

    <style>
    div{
        padding:10px;
        line-height:20px;
        border:1px solid red;
    }

</style
    <div>
        你好呀 你好呀 你好呀 你好呀 你好呀
    </div>

    1557900946370

  • 让文字水平居中 text-align:center

  • 文字溢出省略

    单行

    <style>
	div{
            white-space: nowrap;
            /*先让文字不能换行*/
            text-overflow:ellipsis;
            /* 结尾用省略号表示 */
            overflow:hidden;
            /* 超出部分隐藏 */
            width:100px;
        }
</style>
    <div>
        你好呀 你好呀 你好呀 你好呀 你好呀 你好呀你好呀 你好呀 你好呀 你好呀 你好呀 你好呀
    </div>

    1557901476948

    多行

    div{
        display:-webkit-box;
        -webkit-line-clamp:2;
        /* 这里代表展示几行文字 */
        -webkit-box-orient:vertical;
        overflow: hidden;
    }

    1557901685342

  • 文字的换行

    多个文字，长度超过div的宽度是，文字会自动换行，不想换行可以设置white-space:nowrap

    一个字（英文、数字...）即使再长，浏览器也不会去切割他，保持字的完整性

    <style>

    div{
        width:50px;
        border:1px solid #000;
    }
</style>
<body>
    <div>
        1
        222222222222222222222222222222222222222222222
        3
        4
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</body>

    1557902069821

    会发现，这次文字不自动换行了，这是因为浏览器把一串数字2和一串字母a当作一个单词或一个字了，浏览器为了保持文字的完整性，他不会去切割文字，自然也就不会换行了。

    如果你给文字加上连字符-,浏览器会在超过div且是连字符-的地方断开

    或加个样式：world-break:break-all文字超过div就会自动换行了

    <style>

    div{
        width:50px;
        border:1px solid #000;
        word-break:break-all;
    }
</style>
<body>
    <div>
     	1
        22222222222222
        3
        4
        aaaaaaaaa-aaaaaaaaaaa-
    </div>
</body>

​

录制_2019_05_15_14_43_15_876

​

三、内联元素的高度

内联元素是不能设置width和height的，但却可以设置padding和margin，那么padding和margin会撑起内联元素的高度吗，答案是不会的，只能撑起他的宽度

<style>
        div{
            border:1px solid #000;
        }
        span{
            padding:10px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <span>你好</span>
    </div>
    <div>
        测试span的padding和margin是否影响到外部的元素
    </div>
</body>

录制_2019_05_15_14_56_34_804

你可以看到padding只增加了内联元素的宽度，但没改变其高度

如果你深入尝试，会发现margin、border也是只改变其宽度，而不影响其高度

总结 内联元素的padding、margin、border只能改变其宽度而无法改变其高度

结语

因为本人水平有限，如果有错漏的地方，还请看官多多指正

本文作者胡志武，写于2019/5/15，如果要转载，请注明出处，

如果觉得写的不错， 请点个赞吧

​

avatar
文章
阅读
粉丝