6.盒子布局

盒子模型就是把HTML元素看作是一个矩形盒子,也就是装内容的容器。

盒子模型布局由下图所示


盒子布局.png
  1. 盒子的边框border
    • border-width 边框宽度
    • borderstyle 边框样式
      常用属性值:
      属性值 作用
      none 没有边框,忽略所有边框宽度
      solid 边框为单实线(最常用)
      dashed 边框为虚线
      dotted 边框为点线
      double 边框为双实线
    • border-color 边框颜色
      三种样式可以单独设置,也可以合并设置
         div { /* 分开设置*/
               border-width: 2px;
               border-style: solid;
               border-color: red;
         }
         div { /* 合并设置*/
              border: 1px solid #F40;    
         }
    
    • border-radius 圆角
  2. 内边距 padding
       padding-top: 20px;
       padding-right: 20px;
       padding-bottom: 20px;
       padding-left: 20px;
       /*合并设置*/
       padding: 20px ; /*上下左右都是20px*/
       padding: 20px 30px; /*上下20px, 左右30px*/
       padding: 20px 30px 50px; /*上20px 左右都是30px 下 50px*/
       padding: 20px 30px 50px 10px ; /*上20px 右30px 下50px 左10px*/
    
  3. 外边距 margin
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    /*合并设置*/
    margin: 20px ; /*上下左右都是20px*/
    margin: 20px 30px; /*上下20px, 左右30px*/
    margin: 20px 30px 50px; /*上20px 左右都是30px 下 50px*/
    margin: 20px 30px 50px 10px ; /*上20px 右30px 下50px 左10px*/
    
    • 外边距设置居中对齐
    margin: 20px auto; 左右居中
    
    • 外边距合并
      比如有两个div 第一个div margin-right : 30 px ,第二个div margin-left : 50px,则两个div的间距为50px; 这就是外边距合并
  4. html元素的尺寸计算
    1. 外盒尺寸计算
      Element 空间高度 = content height + padding + border + margin
      Element 空间宽度 = content height + padding + border + margin
    2. 内盒尺寸计算
      Element height = content height + padding + border (height为内容高度)
      Element width = content height + padding + border (wight为内容宽度)
    • 当一个盒子没有给定高/宽度 padding不会影响盒子的大小
    • 当一个盒子的宽/高度继承自父亲的宽/高度
  5. 盒子模型布局稳定性
    按照优先使用 宽度(width) 其次使用内边距 (padding) 再次 外边距 (margin)

    width > padding > margin /*稳定性*/

    • margin 会有外边距合并,稳定性不高
    • padding 会影响盒子大小, 需要进行加减运算
    • width 稳定性高 经常使用
  6. css3 盒子模型
    box-sizing: content-box /*以前的盒子模型*/
    box-sizing: border-box;  /*padding 和 border 不会撑开盒子,即padding和border 是包含到width里面的*/
    
  7. 盒子阴影
    语法格式:
    box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
    描述
    h-shadow 必需。水平阴影的位置,可为负值
    v-shadow 必需。垂直阴影位置,可为负值
    blur 可选。模糊距离
    spread 可选。阴影尺寸
    color 可选。阴影颜色
    inset 可选。将外部阴影(outset)改为内部阴影

你可能感兴趣的:(6.盒子布局)