css系列1 高度

设置一个div的高度

#xxx {
  border: 1px solid red;
  font-size: 20px;
}

  1

预览图

实际的content有多高呢？(苹果系统默认字体为: font-family:"PingFang SC"; 平方中文简体simple chinese)

PingFang SC 盒模型

惊奇的发现是28....讲道理不应该是20才对吗。。。

换一个字体 /* font-family: Tahoma; */

Tahoma 盒模型

惊奇的发现是24....WTF, why?

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

字体设计师在设计字体的时候有默认 建议行高
PingFang SC 建议行高(line-height)为1.4倍 (默认字体大小为16px，161.4=22px)
Tahoma 建议行高(line-height)为 1.2倍 (默认字体大小为16px，161.2=19px)

不过可以设置line-height强制设置行高

#xxx {
  border: 1px solid red;
  font-size: 20px;
  line-height: 20px; 
}

line-height强制设置为20px

text-align: justify

 
福建省的房间里睡大觉fsd  fsdf弗兰克斯打飞机了圣诞节福利的时间里房价sdsfsdfsdsdfsdfsdfsdf少sdfsdfsdfsdfsdfdsf了福建省的 房间里睡大觉弗兰克斯打飞机了圣诞节福利sdfsdfs dfsda的时间里房价多少了

一个p元素里面有很多的字，包含中英文；问题是左侧看起来参差不齐。下图是上面P元素的画面展示:

参差不齐

加一个 text-align: justify

左侧对齐，看起来会很美观

注意: 如果只有一行，设置text-align: justify是没有效果的

一行字体不会两端对齐，只有多行才会

测试题

实现字体两端对齐，如下图所示

姓名、联系方式两端对齐

首先千万别用  ;去做。
em跟中文是一一对应的，1em对应一个汉字的宽度

套路就是利用 text-align: justify;

  姓名 

  联系方式

    span {
      border: 1px solid green;
      display: inline-block;
      width: 4em;
      text-align: justify;
      
    }
    span:after {
      content: '';
      display: inline-block;
      width: 100%;
      border: 1px solid blue;
    }

添加三行代码

    span {
      border: 1px solid green;
      display: inline-block;
      width: 4em;
      text-align: justify;
      height: 26px; /* 再添加这一行和下面一行可以实现隐藏蓝条*/
      overflow: hidden;
    }

最终效果展示

字体之间的空格问题

内联元素之间无论有多少个空格或回车，在html中显示都会显示为一个空格

  姓名
  联系方式

空格问题

display: block; display: inline-block

如果消除空格呢？用float布局即可

  

  

    
选项1
    
选项2
    
选项3
    
选项4
    
选项5
    
选项6
  

float示意图

word-break: break-all;

  


  

    1 
    2222222222222222222222222222222222222222222222222
    333
  

浏览器会认为2222应该是一个整体，不应该终端

222会另起一行，且会超出div的宽度

加word-break: break-all; 表示该什么时候中断就什么时候中断

添加word-break属性

text-overflow: ellipsis 超出文本显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

文本显示不下，最后显示省略号

两行文本 超出文本显示省略号

      overflow: hidden;
      display: -webkit-box; /* 必须带-webkit */
      -webkit-line-clamp: 2; /* 第二行文本显示省略号 */
      -webkit-box-orient: vertical;

多行文本显示，最后一行显示省略号

能不写死高度就不写死高度 很重要

多行文本下的显示问题

    #xxx {
      border: 1px solid red;
      height: 40px;
    }


  

 1242234923 fewfhewh2323rjkfdsfhkjdshfsdjhfjkdsh
  
  郑生亮

注意跟下面的汉字重叠了

    #xxx {
      border: 1px solid red;
      /* height: 30px  不要写死高度，否则会导致上面的问题*/
      line-height: 20px; /* 20px + 5px's padding正好撑起30px */
      padding: 5px 0;
    }

margin合并

outline: 不占据盒模型的空间

.parent {
  outline: 5px solid red; // outline不占盒模型空间 border占
}

border 5px

border 0

上面的例子margin合并。

脱离文档流的方式

1. float 2. positive: absolute/fix

注意： position: relative;会占据文档流，

  position: relative;
  top: 10px; // 相对于原来的位置进行移动，文档流的高度保持不变，

一个div的高度由它内部文档流的高度决定的，有些会脱离文档流，则不会计算高度

居中

父元素上加内padding子元素加margin: 0 auto; 不定宽，不定高

居中

display: flex;
justify-content: center;
align-items: center;

flex居中

定宽定高居中

定宽定宽居中

内联元素

内联元素的高度由行高决定的
内联元素的宽度有content padding border margin 决定的

面试题: 可以设置inline元素的padding和margin吗？

1. inline元素设置width，height属性无效;

2.inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，margin-left都产生了效果，而垂直方向的padding-top，padding-bottom，margin-bottom，margin-top是没有效果的

内联元素上下padding和margin没效果，左右有效果