盒子模型

一、盒模型

外边距可以改变盒模型位置
内边距可以改变盒模型的大小，从里往外把容器撑大了

二、外边距

外边距 margin 单位是px
- 一个值 四个方向
- 两个值 上下 左右
- 三个值 上 左右 下
- 四个值 顺时针 上右下左
注：也可分开写：margin-left , margin-top , margin-right , margin-bottom
块元素支持上下左右 margin
行内元素只支持左右 margin

三、内边距

内边距 padding 单位是px
- 一个值 四个方向
- 两个值 上下 左右
- 三个值 上 左右 下
- 四个值 顺时针 上右下左
注：也可分开写：padding-left , padding-top , padding-right , padding-bottom
块元素支持上下左右 padding
行内元素只支持左右 padding

四、块元素

定义：能够独占一行的元素
- div, h1 – h6 , p , ul , li, ol
特点
- 1. 会独占一行，不论宽度大与小
- 2. 默认宽度是和父元素一样(100%)，默认的高度是0，实际高度可以由内容撑起来
- 3. 支持宽和高的样式
- 4. 不受空白字符影响
嵌套规则
- 块标签可以嵌套所有标签
- p标签不可以套任何块标签

五、行内元素

定义：不会独占一行的元素
- a, span
特点
- 1. 不会独占一行，会并一行显示
- 2. 默认宽和高都是0，实际大小由内容决定的
- 3. 不支持宽和高的样式
- 4. 受空白字符影响
嵌套规则
- 行内标签可以套任何行内标签（自己本身标签除外）
- a 标签可以套所有标签，标签里边有什么，什么就可以点

六、行内块元素

定义：
- img, 表单控件
特点
- 1. 本质上是行内元素，但是支持宽和高样式
八、元素之间的转换
display:inline 转行内
display:block 转块
display:inline-block 转行内块

七、浮动

定义：让元素飘(浮动)起来，水平排列
写法：float:left/right 两个方向
用途：解决块元素在一行显示
停止条件：
- 1. 遇到了父元素的边缘

• 2. 遇到了其他的浮动元素
     特点：
  • 浮动有方向 左 右
  • 尽可能的往上飘 文档流的特点
  • 脱离文档流 并非正真的脱离
  • 块元素宽度尽可能的窄
  • 行内元素会变成块元素 等价于 display:block
• 宽度不够会挤下来
  注意：浮动并非真正的脱离文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围

八、默认边距

Html中的标签都默认存在一个边距值，我们通常是不需要标签的默认边距的，所以需要清空所有元素的内外边距

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

代码的结构问题
1.并列的关系 => 当设计图两个模块是相互独立的，没有包含的关系
2.嵌套的关系 => 当设计图两个模块有互相包含的关系