css盒子模型、display属性

目录

• 高和宽设置
• 边框设置
• 内边距设置
• 外边距设置
• 盒子的计算
• display属性

• 高和宽设置

【注意】：IE6以下不支持该max-width、min-width属性；

【总结】：

1、当元素的max-width < 外部元素的width，则元素只展示max-width宽度；

2、当元素的max-width > 外部元素的width，则依旧展示外部width宽度；

3、当元素的min-width < 外部元素的width，则依旧展示外部width宽度；

4、当元素的min-width > 外部元素的width，则会展示元素自己本身的min-width宽度；

5、当元素同时有max-width、min-width时，外部元素的width在其中，则展示为width值；不在其中，则展示为min-width值；

 

  【注意】：IE6以下不支持该max-width、min-width属性；

 

1、min-width/min-height属性值会对元素的宽高设置一个最小限制，元素如果设置宽高，可以比这个最小限制大，但不能比其小；

2、当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。

//行内元素，宽和高只能依靠内容大小展示

 

• 边框设置

 

【注意】：如果仅设置了前两个而没有设置border-style，则不会出现任何样式（因为默认style值为none）；

 

？？？那么边框是有上下左右之分的，如何单独设置四面的边框呢？？

 

 

 

• 内边距设置

 //注意：值不能为负数

 

• 外边距设置

 

 

 

 

• 盒子的计算

标准盒子模型计算：

IE盒子模型：

 

• display属性

//元素被设置为行内元素后，无法设置上下margin，只能设置左右margin

    
        
        
        
    
    
    

        

            
家电
            

                
冰箱
                
洗衣机
                
空调
            
        
        

            
洗护
            

                
洗衣液
                
消毒液
                
柔顺剂
            
        
        

            
衣物
             

                
衬衫
                
裤子
                
卫衣