CSS入门八之盒子属性

盒子的组成：内容、内填充、边框、外边距

1. 内容 无非是盒子里面放置的东西 有宽高属性
2. 内填充 无非是盒子内容和盒子本身的间距
3. 边框 无非是盒子外面包裹的一层东西
4. 外边距 无非是盒子距窗口的间距

从上面解释来说：其属性有width、height、padding、margin、border

    
    
    



    
盒子
    
    
    

    
padding属性

    
margin属性一
    
margin属性二

    
margin属性三

padding

1. padding-top、right、bottom、left ，padding 属性是有方向的 可以同时表示四个方向 顺序是：顺时针（上右下左）
2. 内边距可以从网页中 检查中查看 简写形式四种 以上述代码为例：
   简写 一个属性值 代表上下左右都是10px -> padding: 10px;
   简写 两个属性值 分别是 上下10px 左右20px ->padding: 10px 20px;
   简写 三个属性值 分别是 上10px 左右20px 下40px -> padding: 10px 20px 30px;
   简写 四个属性值 分别是 上10px 右20px 下30px 左40px -> padding: 10px 20px 30px 40px;

margin

1. margin-top、right、bottom、left ，margin 属性是有方向的 可以同时表示四个方向 顺序是：顺时针（上右下左）
2. 外边距同样可以从网页检查中看出 图形看出来 以上述代码为例：
   简写 一个属性值 代表上下左右外边距都是10px -> margin: 10px;
   简写 两个属性值 分别是 上下外边距10px 左右外边距20px ->margin: 10px 20px;
   简写 三个属性值 分别是 上外边距10px 左右外边距20px 下外边距40px -> margin: 10px 20px 30px;
   简写 四个属性值 分别是 上外边距10px 右外边距20px 下外边距30px 左外边距40px -> margin: 10px 20px 30px 40px;

• margin塌陷现象：
  1. 竖直方向塌陷现象
  2. 横向margin值是叠加的 没有塌陷现象
  3. float元素是没有margin塌陷现象的
• margin居中：
  1. 设置居中时 盒子一定要有固定的宽度 否则占据父元素的100%宽度
  2. 行内元素没有宽高属性 要想实现水平居中 可以外面包裹个块元素 或者 转换成块元素
  3. 浮动元素不能水平居中
  4. margin 只能实现盒子的水平居中 而文本的水平居中时使用 text-align:center;
  5. 一般使用父元素的padding 而不是使用子元素的margin