浮动和外边距和内边距

233 阅读1分钟

float:浮动

none 不浮动

left左浮动

right右浮动

目的:让竖着排列的元素横着排列添加浮动后的元素将脱离文档流
文档流:元素默认从上至下,从左至右的排列顺序

盒模型(div)

任何一个元素都可以看成是盒模型
组成部分:
    内容区域: width height
    内边距区域:
    padding
    边框区域: border
    外边距区域: margin
    
margin(外边距)使用方法
    margin-left:左外边距;
    margin-top:上外边距;
    margin-right:右外边距;
    margin-bottom:下外边距;
    margin:四个方向;
    margin:上下 左右;
    margin:上 左右 下;
    margin:上 右 下 左;
    [注]
    不会撑大元素的大小
    有负数,有auto
margin常见问题:
    外边距相遇会重合
    解决办法:
    
    兄弟关系:给一个方向足够的值
    
    嵌套关系: 给父元素添加边框或者内边距
    
padding(内边距)使用方法:
    padding-left:左内边距;
    padidng-top:上内边距;
    padding-right:右内边距;
    padding-bottom:下内边距;
    padding:四个方向;
    padding:上下左 右;
    padding:上左右下;
    padding:上右下左;
    [注] 会撑大元素的大小 没有负数,没有auto