gpt4 book ai didi

CSS_相关问题及解决_持续更新

转载 作者:我是一只小鸟 更新时间:2023-07-09 22:31:06 25 4
gpt4 key购买 nike

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;
      
                              
                            

最后此篇关于CSS_相关问题及解决_持续更新的文章就讲到这里了,如果你想了解更多关于CSS_相关问题及解决_持续更新的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com