盒模式

内边距:padding

语句	语意
-top:	指定上内边距
-right:	指定右内边距
-bottom:	指定下内边距
-left:	指定左内边距

padding:10px 20px 30px;（分别指定上、左右、下方向的内边距）
padding:10px 20px;（分别指定上下、左右方向的内边距）

外边距:margin

语句	语意
-top:	指定上内边距
-right:	指定右内边距
-bottom:	指定下内边距
-left:	指定左内边距

注:外边距可设负值

外边距的重叠

在网页中相邻的垂直方向的外边距会发生外边距的重叠。
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

浏览器默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要使用下面代码

• *{
        margin: 0;
        padding: 0;
    }
  

将浏览器中的默认的margin和padding统统的去掉

display（修改元素性质）

语句	语意
-block:	设置元素为块元素
-inline:	设置元素为行内(内联)元素
-inline-block:	设置元素为行内块元素(既能设置宽高，又不独占一行)
-none:	隐藏元素(元素将在页面中完全消失，不占位置)

visibility（隐藏元素，保持所占位置）

语句	语意
-visible:	可见的
-hidden:	隐藏的

overflow（控制子元素内容溢出父元素的情况）

语句	语意
-visible:	默认值
-scroll:	添加滚动条
-auto:	根据需要添加滚动条（智能）
-hidden:	隐藏超出盒子的内容

元素在文档中的特点

• 块元素：
  1.独占一行，自上向下排列。
  2.默认宽度占父元素的100%。
  3.高度默认被内容撑开。
• 内联元素：
  1.占自身大小，从左向右排列，自动换行。
  2.宽高默认均被内容撑开。

浮动（使元素脱离原本的文档流，向指定方向浮动）

语句	语意
float:none;	不浮动
float:left;	向左浮动
float:right;	向右浮动

注

• 浮动会向最左上或最右上浮动，遇到父元素边框或其它浮动元素后停止。
• 浮动最多不会超过它的上一个兄弟元素。
• 内联元素浮动后可设置宽高。