资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS2:宽度与高度疑难点解析

CSS2:宽度与高度疑难点解析

raledong / 2669人阅读

摘要：宽度与高度如果你的代码里经常出现和属性说明你对宽度与高度理解的不够深文档流翻译很烂应该为普通流或者常规流的高度字体高度与行高字和字之间是通过基线对齐的行高与默认行高是字体设计室写进去的不同字体行高不一样跟字体设计有关系字体的建议行高写在了

CSS2:宽度与高度

如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深

1.文档流(Normal Flow)

翻译很烂,应该为普通流,或者常规流.

1.1DIV的高度 1.1.1字体高度与行高

字和字之间是通过基线对齐的

行高与font-size

默认行高是字体设计室写进去的.不同字体行高不一样,跟字体设计有关系.字体的建议行高写在了字体的文件里,是设计师最开始就设计好的,比如1.5倍,1.4倍等等

所以:如果你确定了font-size,比如是20px,那么不同字体,占有的上下空间不一样,比如苹果方正字体行高为1.4倍,那么最终这个字高28px,宋体为1.2倍,那么字整体所占高度为24px

如果你想明确的告诉浏览器行高是多少,而不用设计师自带的,那么就用line-height直接强制规定行高.比如将行高设置成和font-size一样大小

知识点:如果DIV里只有一个内联元素,那么这个div的高度就是这个内联元素的行高.不是font-size的大小

1.1.2[套路!]中文字体两端对齐方式

html会将多个空格缩成一个空格,如果想添加空格,就用 但是一定要注意,不同字体的空格是不一样的,一定不要用 来做布局,不要用这个来做对齐

text-align:justify的作用:

下面的div用了text-align:justify.两边对齐了

中文字体对齐方式套路如下

jsbin预览地址 

如果内联元素在一行放不下,就自动换到下一行,就像水流一样
刚才的文字对齐方式,就是借用了文档流的特点,让span的after宽度设置为100%沾满一行,所以他不得不在第二行,第一行就只有姓名等文字,然后在用text-align:justfy;让姓名平均沾满一行

示例代码：




    
    文字两边对齐
    




    姓名

    联系方式
1.1.3所有inline和inline-block元素之间,不管有多少回车和空格或者tab,都只显示一个空格


例如:




    
    inline-space-test
    



1
2
1
2

    
    
  • ddi1
    • 
    
  • ddi2
    • 
    
  • ddi3
    • 
    
  • ddi4
    • 
    
  • ddi5
    • 
    
  • ddi6
    •

解决方法:

在子元素上使用float:left;

在父元素上加类.clearfix 

.clearfix::after{
    content:"";
    display:black;
    clear:both;
}
1.2文档流单词内联元素排版问题

如果内联元素在一行放不下,就自动换到下一行,就像水流一样
刚才的文字对齐方式,就是借用了文档流的特点,让span的after宽度设置为100%沾满一行,所以他不得不在第二行,第一行就只有姓名等文字,然后在用text-align:justfy;让姓名平均沾满一行
这就叫做文档流

1.2.1浏览器关于单词显示的特点:

中间没有空格的单词或数字,看作是一个整体,不会从中间断开(这符合外国人的阅读习惯).

解决方法:

加连字符

使用css word-break:break-all;

2.文字溢出省略

一个属性:white-space:nowrap;
div中所有inline元素一行显示,超出部分不换行

[套路!]一行文本省略

div{
      border:1px solid red;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }


jsbin
[套路!]多行文本省略
谷歌搜索:css multiline ellipsis
搜索到的
https://css-tricks.com/
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow:hidden
}
jsbin
webkit的css,手机,谷歌,opera都支持,只有火狐和ie不支持,
浏览器市场份额

3.文字垂直居中

不要写死高度,比如吧line-height写成40px;div高写成40px;
那么只有一行文字可以垂直居中,下面几行将出现BUG
下面的方法不可取

[套路!]方法:
想让div高度为40px,那么把line-height写成24px,上下padding为8px就可以了,这样多行文本也可以距离差不多,不会出现bug

4.margin合并

margin合并出现在div里面有div的情况

如果父元素没有什么可以挡住儿子外边距的情况,那么儿子的margin外边距会和父元素合并起来.例如,如果父元素没有border,只有outline,挡不住.

如果是border挡住.上下外边距不会合并


即使border是0.1,也有用

如果有padding上下挡住上下外边距也不会合并

:[套路!]一般用这种方法祛除合并

还有一种可以取消外边距合并的方法:在父元素上写overflow:hidden;

如果有内联元素挡住,也可以取消边距合并

4.div里既有块级元素又有内联元素时的文档流

div里的高度有他内部文档流中元素的高度的总和决定的.
文档流如下:

内联元素从左到右依次排列,如果空间不够,就换一行从左到右依次排列

块级元素另起一行,占满整行,从上到下

5.脱离文档流

float,脱离,浮在上面,父元素div高度变小

position:absolute

position:fixed

注意: position:relative没有脱离文档流,如果再加上定位,只是相对于之前的位置定位,原来的地方还占据位置

6.div里的div如何完全居中

假设子元素div宽度固定,高度不固定,父元素高度不确定.居中方法:上下居中将父元素上下padding写成一样,左右居中在子元素上用margin: 0 auto;

父元素高度确定.(如果按照从内往外写一般高度不会固定,所以尽量让高度不要固定,)

唯一能想到让div高度确定的情况:比如高度和浏览器窗口一样:height:100vh;

方法一:让子元素宽高固定,[套路!]然后position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;让上下左右边距都auto.即margin:auto;配合定宽定高.

方法二:如果子元素不能固定高度,因为里面有内联元素,自己撑开.那么在父元素上用flex布局.(ie不支持)

.dad{
    display:flex;
    justify-content:center;
    align-items:center;
}
7.内联元素高宽如何确定

内联元素的padding 和margin只会影响宽度,但是不会影响高度.

总结:

内联元素高度只受line-height影响

内联元素宽度由padding,margin,border和内容一起决定

8.块级元素宽高总结

块级元素高度:div里的高度有他内部文档流中元素的高度的总和决定的.padding border会影响高度.margin有时会影响,有事不会影响,因为可能会合并

块级元素宽度:尽量不要设置成固定,它继承父元素

9.实现一个1:1的DIV

GPU云服务器 云服务器 java 疑难解析 宽度高度 屏幕高度宽度 html宽度高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113502.html

相关文章

  • 面试题：面试经

    摘要：通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。在页面加载的时也同时加载，而是需要加载完成后在开始加载。是长连接，连接一直保持，是短连接，发起，接收，关闭。 目录 我碰到有意思的题会继续更新，如发现我的解答有问题，请告知，万分感谢。如觉得对你有帮助，请帮忙点个赞，谢谢。 css的选择器，权重 ie和其他浏览器下，盒模型的区别 盒模型互相转化 元素水平垂直居中 左...

    Benedict Evans 评论0 收藏0

  • 面试题：面试经

    摘要：通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。在页面加载的时也同时加载，而是需要加载完成后在开始加载。是长连接，连接一直保持，是短连接，发起，接收，关闭。 目录 我碰到有意思的题会继续更新，如发现我的解答有问题，请告知，万分感谢。如觉得对你有帮助，请帮忙点个赞，谢谢。 css的选择器，权重 ie和其他浏览器下，盒模型的区别 盒模型互相转化 元素水平垂直居中 左...

    FleyX 评论0 收藏0

  • CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model De

    摘要：行盒的宽度由其包含块给予，但可能因浮动而缩小。绝对定位不可替换元素的使用值约束为包含块宽度如果和均为首先将以及值为的设为。 2015/10/08： 原10.8标题 行盒高度计算改为10.8 行高计算。英文原文为line height。由于翻译时候看到那段结论是行盒的高度，脑抽就把原本翻译对的标题改了下，刚回顾一番深觉不妥，故改回来。 原文：http://www.w3.org/TR/CS...

    frolc 评论0 收藏0

  • 整理：子容器垂直居中于父容器的方案

    摘要：子容器溢出时，父容器出现滚动条。父容器或很显然，子容器溢出时，被父容器截断的情形无法和父容器自适应于子容器共存。现在这个布局可以自动生成，详见林小志的小工具图片垂直居中。溢出子容器溢出时会变成顶对齐，原因同上。 本文在evernote里有备份。如果evernote的阅读区域嫌窄了，那么可以把这个链接拖入书签并点击javascript:jQuery(#container).width(9...

    youkede 评论0 收藏0

发表评论

登陆后可评论

0条评论

raledong

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<