杂谈CSS高度技巧

不学习具体的知识点,只了解一下

文档流(Normal flow)

块级元素的宽高,

• 以div里只有行内元素举例
• 字和字之间用基线对齐
• 行和行之间是有建议行高的,字体设计师设计师给的行高
• div高度由line-height决定
• 空格宽度 也是由设计师决定

<div></div>  // height:0

//中间加文字,height高度是多少呢?

<div>你好</div>  //随字体变化,height也在变化  字体*建议行高

1. display:inline-block空隙问题,可以用float
2. div里行内元素足够多的话,一行容纳不下,自动换行,就是文档流
3. 遇到一个足够长的单词,超出了文档流,用word-break:break-alll

多行文字溢出

单行文本溢出 多行文本溢出

文字垂直居中

• 写一个div高为40px

//小白
div{
  height:40px;  //千万不要写死  
  line-height:40px;
}
//怎么改?
div{
  line-height:40px;
  padding:8px 0;  //文字很多,不会出现bug
}

margin合并 div高度

//只需要一个东西挡住margin,就不会合并
div.child{
  border:10px solid red; 
  padding:10px;
  margin:10px;
}
div.parent{
  outline:2px solid green;

  // overflow:hidden 也可以去除margin合并,不过不推荐
}

<div class="parent">  //div 里 div 外面的div 高度由谁决定
  <div class="child">
    111
  </div>
</div>

margin合并

字体两边对齐(技巧)

该怎么实现对齐呢?小技巧 对齐了,用了什么方法

/* css */
    div{
      border:1px solid red;
      font-size:20px;
    }
    span{
      display: inline-block;
      width:5em;
      border:1px solid green;
      text-align: justify;
      height:20px;
      line-height:20px;
      overflow: hidden;
    }
    span:after{
      content:'';
      display:inline-block;
      width:100%;
    }

/* html*/
<div>
  <span>姓名</span><br>
  <span>联系方式</span>
</div>
  <p style="text-align: justify;">
    我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.我是文字,我想换行对齐.
  </p>

div中的div垂直居中

1. padding
2. display:flex
3. transform:translate

---

div的高度是由内部文档流中元素的总和决定,行内元素从左到右,块级元素从上到下,脱离文档流中的不算,float position:absolute position:fixed

CSS : border调试大发

写的比较乱,凑合看看吧,♫♫∵