宽度与高度

１．内联元素的宽高

• 给 inline 元素设置宽高是没有任何效果的
• 给inline元素设置margin,padding，左右有效，上下无效（比如span元素的最终的高度由行高和字体决定）
• span和span之间如果有回车或者空格，就会显示为一个空格。实际上两个inline元素，之间有空格或者回车，都会显示为一个空格。
  text-align: justify当多行时解决多行对齐的问题

２．多行文字溢出

１．文本对齐（请写出「姓名」与「联系方式」两端对齐的例子）

  姓名

  联系方式

效果图

２．单行文本省略

单行文本省略

３．多行文本省略（不兼容IE）

多行文本省略效果图

３．文字垂直居中

比如要求在一个div有文字，要求高40px;
以前，经常用line-height:40px;height:40px；（大错特错）
记住用:（重要）
垂直居中，从内到外，line-height:24px;padding:8px 0;
水平居中，text-align:center;

４．margin合并

如下，有两个div：

  

    233333...
  

问题：parent的高度到底如何确定？
答案似乎很明确，由内部加外部确定，看一个例子：

.parent{
      border:2px solid green; 
    }
    .child{
      border:1px solid red;
      margin: 10px;
    }

border

当父元素的border，挡住子元素，子元素的margin起了作用，撑起了父元素。
但是如果将border替换：

.parent{
      outline:2px solid green;
    }
    .child{
      border:1px solid red;
      margin: 10px;
    }

outline

此时会发现，父元素的高度，发生了一些变化。也就是子元素的margin并没有起作用，子元素与父元素上下挨在一起，我们看看现在的父元素子元素都有多高：

margin合并

也就说，这个时候，父元素子元素的margin进行了合并。那么现在很明显有一个答案，就是当子元素有margin，父元素有没有border很关键。那么还没有其他也会如此影响的呢？
肯定是有的。比如：padding、overflow: hidden。（这里 overflow: hidden确实会去除margin合并，但是不推荐使用）【实际上，这里的意思就是，取决于父元素到底能不能包裹住子元素】
问题：div的高度是由什么决定的？
由内部文档流元素的总和决定的。

５．div里面的div如何垂直水平居中？

结构如下：

 

   233333...
 

１．父元素高度不确定：使用padding垂直居中，margin:auto左右居中

　　.parent{
      border:1px solid black;
      padding: 20px;
    }
    .child{
      border:1px solid red;
      width:100px;
      margin: auto;
    }

效果图

２．父元素定高：

a.子元素定宽高（top,left,right,botton为０，margin:auto）

效果图

b.子元素不定高

    body{
      margin:0;
    }
    .parent{
      border:1px solid black;
      box-sizing:border-box;
      height:100vh;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .child{
      border:1px solid red;
    }
  

用三行代码解决：display:flex;　justify-content: center;　 align-items: center;
效果图和上个差不多，就不贴了。

６．如何实现一个１：１的div？

效果图