5、盒模型和文本溢出

一、标准盒模型

1、概念

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

2、盒模型的组成

  内容区域（width和height）、内边距（padding）、边框（border）、外间距（margin）
        内容      	盒子的宽高
        padding     内边距，位于盒子之外，边框之内，盒子大小会变
        margin      外边距，位于边框之外，盒子大小不变

3、实际体积大小

内容区域+内边距+边框（width+padding+border）

4、实际所占空间

内容区域+内边距+边框+外间距（width+padding+border+margin）

5、清除默认间距

  *{
    margin: 0;
    padding: 0;
  }

6、padding

  1）单一方向填充
    padding-top       上
    padding-right     右
    padding-bottom    下
    padding-left      左
  2）多参数应用
    一个值：上下左右
    两个值：上下、 左右
    三个值：上、 左右、下
    四个值：上、右、下、左
  3）用途
    1>用来控制元素内部内容和边界之间的距离
    2>也可以用来控制父元素和子元素之间的距离
      注意:padding要加在父元素身上
    3>如果要保持元素大小不变，添加padding后要在宽高上减去添加的值

7、margin

  1）单一方向
  2）多参数应用       
  3）特点
    1>margin左右方向上支持auto，元素水平居中  margin:0 auto;
    2>未浮动状态下，上下重叠且取较大值，左右不重叠
    3>浮动状态下，上下，左右都不重叠，正常相加
    4>bug：父元素下的第一个子元素添加margin-top会作用在父元素身上
      解决：（适用所有触发BFC的bug）
        a、overflow: hidden;
        b、float: left;
        c、万能清除浮动法
        d、给父元素添加padding替代第一个子元素的margin-top
  4）用途
    用来调整元素自身的位置

二、文本溢出

1、overflow 溢出属性

      visible(默认值)     溢出内容可见，没变化
      scroll      滚动条
     *hidden      
        隐藏溢出内容，一刀切，会出现文字上下分身
        解决高度塌陷
     *auto      自适应，内充超出显示滚动条，没超出则没有

2、overflow-x （x轴溢出）

3、overflow-y （y轴溢出）

4、white-space （空余空间）

      normal(默认值)      只识别一个空格，不识别换行，会自动换行
     *nowrap      只识别一个空格，不识别换行，也不会自动换行
      pre     识别空格和换行，不会自动换行
     *pre-wrap      识别空格，识别换行，会自动换行
      pre-line      只识别一个空格，识别换行，也会自动换行

5、溢出省略号

      clip(默认值)
      ellipsis      单行溢出显示省略号
      注意：
        单用无效，4步缺一不可
        1）width     				   确认边界，到哪截止
        2）white-space: nowrap;        强制文本单行显示不换行
        3）overflow: hidden;     	   溢出内容隐藏
        4）text-overflow: ellipsis;    溢出内容省略号显示

三、补充

1、快捷写法
		{}  	标签内的内容
	    例：div.box>div.box$*4{第$块} 
	    对应：</div>
	    		<div class="box1">第1块</div>
    			<div class="box2">第2块</div>
    			<div class="box3">第3块</div>
    			<div class="box4">第4块</div>
  			  </div>
  			  
 2、一键替换：Ctrl+H再Ctrl Alt+Enter