css 让文字进行竖着书写， 附带个小知识，行内块元素添加文字之后底部对不齐的问题

先上效果图哈，然后一一进行讲解哈，


害 怎么说了。其实这个问题 如果你觉得难写的话，只能说你想的复杂了，在文字排版中，如果元素的宽度不够的话那么文字会自动换行的，所以只要父亲元素的宽度不够两个汉字 那么它就会换行了，就这么简单

// 第一种
div.demo1 {
     width: 20px;
      background: #f00;
      text-align: center;
  }
  // 第二种
div.demo2 {
     width: 60px;
     background-color: aqua;
     height: 200px;
     display: grid;
     place-items: center;
 }
 div.demo2 .demo2-test {
     width: 20px;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="demo1">我在测试中文文字竖着写div>
    <div class="demo2">
        <div class="demo2-test">中问进行竖着写div>
    div>
1
2
3
4
5

上面的还好说
附带一个小东西 就是 我们在处理行内块级元素 如果元素中添加了文字话 就可能出现对不齐的问题

怎么说呢 这个时候 我们给第三个元素添加高度 会发现它并不会上升，而是下降 奇怪吧🤔
包括为啥我们对图片进行竖着排列的时候，底部会出现白色的间隙 也和这个类似
这个就是因为文字对齐的基准 不同导致
行内元素 和行内块级别 元素 vertical-align: baseline;

就是如果是图片的话 baseline 默认元素放置在父元素的基线上 然后再仔细去看下上面的那张图片 你就会发现。但是细心的同学会看见那个 g字母底部会超出一部分（这个也是图片的那个白色节点的问题）

如果想让第三个和前两个对齐的话 那么 将对齐方式调整成 vertical-align: bottom;
虽然最后一个加了文字 但是高度还是和前两个是一样。这样就处理好了

css往里面学难的一塌糊涂，js同样也是，前端真复杂又让人喜欢

关注我 持续更新前端知识。