xx. css troubleshooting (not categorized)

Height:auto and height:100% differences

1. Auto is stretched with the height of the content. 100% is determined by the height of the parent element. For example:

        
       
   
         
        
   
        
   <div style="height:100px;width:200px;">
         
        
   
        
   <div style="height:auto;width:100px;float:left;">这个容器的高度是随里面的内容的高度而定</div>
         
        
   
        
   <div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div>
         
        
   
        
   </div>
        
       

define multiple styles for the same labelDisplay

1. Hide Element Display:none or Visibility:hidden
1. Visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as before it was hidden, and the HTML element (object) is only visually invisible (completely transparent) after using the property. That is, although the element is hidden, it still affects the layout.
   
2. Display:none can hide an element, and hidden elements do not occupy any space.
   In other words, the element is not only hidden, but also the space that the element originally occupies will disappear from the page layout. and does not load! When this property is used, various attribute values, such as the width and height of the HTML element (object), are "lost";

White-spacetext in a specified paragraph does not wrap:

 
   
  

  
    
   
p{
  
    
   
 white-space: nowrap
  
    
   
 }
 
   
  

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8). Normal default.    The blank will be ignored by the browser. The pre blank is reserved by the browser.    It behaves like a <pre> tag in HTML.    The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered.    Pre-wrap preserves a sequence of whitespace characters, but wraps normally.    Pre-line merges a sequence of whitespace characters, but preserves newline characters. Inherit specifies that the value of the White-space property should be inherited from the parent element.Min-heightSets the element minimum height. This property will be adaptive to the content height, when the content is not enough, or less than the set value.
The CSS sets the minimum height and then adapts itself:

 
   
  

  
    
   
//下面是无注释版，复制就能用的：
  
    
   
min-height:400px;*+height:100%;_height:400px; // 兼容
  
    
   
//这种方式还是不错的，当然还有其它处理方法可以解决这样的小问题：
  
    
   
min-height:400px; height:auto!important; height:400px;
 
   
  

October 25, 2017 23:04:15

xx. css troubleshooting (not categorized)