CSS_布局相关问题

css_margin塌陷问题

问题描述

<div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

当child1设置了margin-top时，margin-top会作用在father上

当child2设置了margin——bottom时，margin-bottom会作用在father上

解决方法

• 给father设置 overflow:hidden;

.father{
    overflow:hidden;
}

历史遗留问题，这样解决最好，因为不会影响father的大小，其他方式会影响father的大小，比如：

• 给father设置不为0的padding(内边距)
• 给father设置不为0的border(边框)

body的默认样式

body {
    display: block;
    margin: 8px;
}

CSS居中布局问题

水平居中

• 子元素是块元素-div...

  margin: 0 auto;
  

• 子元素是行内元素-span 或 行内块元素-img

  text-align:center;
  

垂直居中

• 子元素是块元素-div

  margin-top:(父元素高度-子元素高度)/2;
  

• 子元素是行内元素-span 或 行内块元素-img

  line-hight=父元素height;
  vertical-align:middle;
  

  • 如果想要绝对垂直居中，父元素font-size:0; 子元素再单独覆盖设置font-size;

CSS出现空白问题

元素之间出现空白

• 原因：行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符

• 解决方法：

  给父元素设置

  font-size:0;
  

行内块底部出现空白(幽灵块)

• 原因：行内块元素和文本的基线(x的最底端)对齐，而文本的基线和文本行的最底端是有一定距离的

• 解决办法

  • 给行内块设置

    vertical:middle;
    vertical:bottom;
    vertical:top;
    //vertical:baseline不行，因为这就是默认的基线对齐，和改之前没有区别
    

  • 给父元素设置

    font-size:0;
    

  • (不推荐)

    display:block;