CSS盒子模型与常见问题

显示模式

    显示模式：标签（元素）的显示方式
    作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

    块级元素
    特点：
      独占一行
      宽度默认是父级的100%
      添加宽高属性生效

    行内元素
    特点：
      一行可以显示多个
      宽高尺寸由内容撑开
      设置宽高属性不生效

    行内块元素
    特点：
      一行可以显示多个
      宽高尺寸也可以由内容撑开
      设置宽高属性生效

转换显示模式

   	属性：display
    属性值        效果
    block        块级
    inline-block 行内块
    inline       行内
    
    display: inline;

盒子模型

    内容区域 – width & height
    内边距 – padding（出现在内容与盒子边缘之间）
    边框线 – border 
    外边距 – margin（出现在盒子外面）
    div {
   
   
        margin: 50px;
        border: 5px solid brown;
        padding: 20px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

边框线

	  四个方向边框线
	  属性名：border（bd）
	  属性值：边框线粗细  线条样式  颜色（不区分顺序）
	  属性值  线条样式
	  solid   实线
	  dashed  虚线
	  otted   点线
    div {
   
   
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 实线 */
      /* border: 1px solid #000; */

      /* 虚线 */
      /* border: 2px dashed red; */

      /* 点线 */
      border: 3px dotted green;
    }

    单方向边框线
    属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
    属性值：边框线粗细  线条样式  颜色（不区分顺序）
    方位词