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

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;让姓名平均沾满一行

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字两边对齐</title>
    <style>
        .duiqi{
            border: 1px solid red;
        }
        .duiqi>span{
            display: inline-block;
            width: 5em;/*宽度为5个字体大小,因为汉字是等宽等高的,所以占五个字*/
            text-align: justify;/*让没行字都平均*/
            border:1px solid blue;
            font-size: 20px;
            line-height: 1.4;
            font-family: "Microsoft YaHei UI";
            /*然后固定高度,并overflow: hidden;*/
            height: 28px;
            overflow: hidden;
        }
        .duiqi>span::after{
            /*多占一行,让上面一行的字平均分开*/
            content: '';
            display: inline-block;
            width: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="duiqi">
    <span>姓名</span><br>
    <span>联系方式</span>
</div>
</body>

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

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-space-test</title>
    <style>
        span {
            border: 1px solid red;
        }
        ul{
            padding: 0;
        }
        ul>li{
            list-style: none;
            padding: 0;
            display: inline-block;
            border:1px solid    blue;
        }
    </style>
</head>
<body>
<!--所有inline和inline-block元素之间,不管有多少回车和空格或者tab,都只显示一个空格-->
<span>1</span>
<span>2</span>
1
2
<ul>
    <li>ddi1</li>
    <li>ddi2</li>
    <li>ddi3</li>
    <li>ddi4</li>
    <li>ddi5</li>
    <li>ddi6</li>
</ul>
</body>
</html>

解决方法:

在子元素上使用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有时会影响,有事不会影响,因为可能会合并
块级元素宽度:尽量不要设置成固定,它继承父元素

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