结论

块元素默认宽度撑满父容器、高度由内容决定，百分比高度只在父元素有确定高度时才生效。文本方面，浏览器会自动合并多余空格，长单词不会自动断行，单行溢出省略要同时写 overflow、white-space 和 text-overflow 三个属性。

最后更新：2026-09-17 · 基于含 Chrome DevTools Computed 面板的实际查看方法

一、宽度与高度

chrome开发者工具查看一个HTML元素具体属性

如果想要知道页面上一个HTML元素的摸个属性值：

在chrome浏览器中，右键 -> 检查,打开开发者工具。
点一下左上角的’Select an elements …’按钮，然后选择需要查看的HTML元素。
开发者工具中右边选择： Computed, 在下面的输入框中选择需要的查看的属性。

字体

字与字之间是通过基线对其的
字体设计师会把建议行高写在字体文件里（如：1.2倍字体大小），可使用line-height明确设置行高，
不同字体空格的宽度是不一样的。

块元素高度

如果div元素里面只有一行内联元素： div高度就是这个内联元素的行高，内联元素的行高由字体的建议行高确定，如果设置了line-height，则由line-height确定.
div元素里有多行内联元素：由多行内联元素的行高相加确定。
div里面有div，那么div高度：子div高度 + 子div padding + 子div border (如果有阻挡那么再+ 子div margin)

outline属性跟border属性一样，区别是outline属性不占用空间。

总结： div的高度是由div内部文档流中元素的高度的总和决定的，不计算脱离文档流的高度。

脱离文档流

脱离文档流就是再计算div高度的时候，不要算上脱离的元素。

可脱离文档流的属性：float:left``position:absolute``position:fixed,相对定位没有脱离文档流，还可以定位，还可以相对于自己的位置定位。

HTML文本两端对齐（套路一）

<style>
    div { border: 1px solid }
    span {
      display: inline-block;
      border: 1px solid;
      width: 5em;
      text-align: justify;
      line-height: 25px;
      height: 25px;
      overflow: hidden;
    }
    span::after {
      content: '';
      display: inline-block;
      width: 100%;
      border: 1px solid blue;
    }
  </style>
<div>
    <span>姓名</span> <br>
    <span>联系方式</span>
</div>

HTML特性：自动删除、合并多余空格

HTML会把所有内联元素之外的空格删除，内联元素之间所有看不见的字符合并成一个空格。

1
2
3

<!--会有空格:1 2 -->
<span>1</span>
<span>2</span>

不管是inline还是inline-block元素，只要两个元素之间有：回车、table、空格等任何看不见的字符，就会有空格。这个是HTML机制，不是bug。

内联元素不可以设置宽高。

响应式页面、文档流

响应式：随着页面大小变化，页面内容也跟着变化而自动排版，叫响应式页面。

文档流：如果内联元素足够多，一行排列不下，那么就会自动换行，叫文档流。内联元素从左到右排列，块级元素从上到下排列，每一个块都会另起一行，即使一行可以容纳2个块元素，这两个块元素也不会在一行。

单词太长一行放不下

正常来说没有那么长的单词

如果单词太长：

使用单词连字符-，使用连字符浏览器就知道在哪里该换行。

<style>
    div { width: 100px; border: 1px solid; }
</style>
<div>helllllllllllllllllll-llllo</div>

使用word-break:break-all （单词的中断：中断所有）单词哪里都可以换行，文档流相关

<style>
    div { width: 100px; border: 1px solid; word-break: break-all;}
</style>
<div>helllllllllllllllllll-llllo</div>

单行文字溢出省略

div的宽度不是由文字决定的。

<style>
    div {
      width: 100px;
      border: 1px solid;
      white-space: nowrap;		// 规定段落中的文本不进行换行
      overflow: hidden;		
      text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本
    }
  </style>
<div>13213213131232132132132131</div>

多行文本溢出省略

可在Google上搜索：css multi line text ellipsis

https://css-tricks.com/line-clampin/

<style>
    div {
      width: 100px;
      border: 1px solid;
      display: -webkit-box;
      -webkit-line-clamp: 3;	// 显示三行，超过三行溢出省略，
      -webkit-box-orient: vertical;  
      overflow: hidden;
    }
  </style>
<div>13213213-13-12321-32-1321-32-131d-sadadsad</div>

上面是只能在-webkit中生效。不兼容IE浏览器，手机浏览器也支持这种效果。电脑端： chrome、opera、Safari都支持。只有IE和火狐不支持。火狐用的人很少，

可以查看浏览器使用统计(百度统计浏览器):

http://tongji.baidu.com/data/browser

文本垂直居中(父元素是div,子元素是内联元素)

规定了高度（40px）

不要使用height: 40px;line-height: 40px; 这个样式如果是一行没问题，多行文本那么就会出现bug。

推荐用法：line-height:24px; padding: 8px 0;,这样的好处是不管是一行文本还是多行文本，都不会出现bug。

对于规定了高度，尽量不使用height：40xp;.可使用line-height加padding的做法凑到40px。

注意： border属性实会占据空间，如果不想占用空间可使用outline属性。

<style>
    div {
      width: 100px;
      outline: 1px solid;
      line-height: 24px;
      padding: 8px 0;		// 垂直居中： line-height和padding 
      text-align: center;	// 水平居中
    }
  </style>
<div>132132</div>

div里面的div垂直水平居中

尽量不要用height。

仅仅是垂直居中：

垂直居中：可在父元素中设置padding：50px 0;,

水平居中：可在子元素中设置margin: 0 auto;

<style>
    .father {
        border: 1px solid red; padding: 50px 0;
    }
    .son  {
        border: 1px solid green; width: 100px; margin: 0 auto; 
    }
</style>
<div class="father">
  <div class="son">12345132 1dd dd</div>
</div>

父元素高度固定，子元素高度固定，宽度固定

垂直、水平居中：子元素绝对定位，距离上下左右都是0，然后设置margin: auto

<style>
	.father {
        border: 1px solid red; height: 200px; position: relative;
    }
    .son  {
        border: 1px solid green;  width: 100px; height: 100px;
        position: absolute; top: 0; bottom: 0; left: 0; right: 0;
        margin: auto;
    }
</style>
<div class="father">
  	<div class="son">12345132 1dd dd</div>
</div>

父元素高度固定，子元素高度不确定

使用flex布局，

不兼容IE浏览器。

<style>
    .father {
        border: 1px solid red; height: 200px;
        display: flex;
        justify-content: center;// 水平居中：定义flex子项在flex容器的当前行水平方向对齐方式
        align-items: center;	// 垂直居中：定义flex子项在flex容器的当前行垂直方向对齐方式
    }
    .son  {
        border: 1px solid green;  width: 100px;
    }
</style>
<div class="father">
  	<div class="son">12345132 1dd dd</div>
</div>

margin合并(仅垂直方向合并，水平方向不合并)

父子元素的margin合并：

如果没有阻挡，那么父子元素的上下margin就会产生合并。左右margin没有合并。

阻止合并的方法：在父元素中设置padding或设置border或设置overflow:hidden,父子之间有内联元素，也会阻止margin合并

总结

内联元素的宽高：

宽度由内联元素的中字的个数确定，padding、margin、border会影响宽度

高度：由行高决定的。padding、margin、border不影响高度
块元素的宽高：

宽度：自适应。默认继承父元素的宽度。

高度：div的高度是由div内部文档流中元素的高度的总和决定的，不计算脱离文档流的高度。
文档流：布局从左到有，从上到下。

实现一个一比一的div

高度是0，设置padding-top: 100%的意思是跟宽度一样。

<style>
    .one {  
        border: 1px solid; 
        padding-top: 100%;	// padding-top 100% 跟宽度一样
    }
</style>
<div class="one"></div>

常见问题

为什么给元素设 height 100% 不生效

因为百分比高度需要父元素有一个确定的高度作为参照。父元素高度是 auto 时，百分比无从计算，浏览器会当成 auto 处理。解决办法是给父级链路都设高度，或者改用 flex、grid、vh 这类不依赖父高的方案。

单行文字溢出显示省略号怎么写

需要三个属性配合：overflow: hidden 裁掉溢出、white-space: nowrap 禁止换行、text-overflow: ellipsis 显示省略号。少任何一个都不会出现省略号效果。

很长的英文单词撑破容器怎么办

浏览器默认不会在单词中间断行。用 word-break: break-all 可以强制在任意字符处断开，或者用 overflow-wrap: break-word 只在单词确实放不下时才断，后者对可读性更友好。