盒子模型

• 一个页面我们会分成几个盒子组成的

• 一个盒子我们会分为以下几个部分：
  — 内容区（content）
  — 内边距（padding）
  — 边框 （border）
  — 外边距（margin）

  
  image.png

内容区

对盒子而言内容就是放东西的地方，对网页来说就是放客户看的东西。
没有设置内边距和边框，会默认内容区的大小和盒子大小一致。

• 通过 width和height两个属性可以设置内容区的大小。
• width和height这两个属性只适用于块元素。

内边距

内容区和边框以内的空间。

• width和height无法设置内边距
• padding可以设置内边距属性
  image.png image.png

边框

在元素周围创建边框，边框是可见框的最外部

• border可以来设置边框属性
  image.png
• 可以分别指定上下左右四个方向的边框
• 和padding一样，默认width和height是包括边框的宽度的

边框的样式

image.png

display

当我们需要为行内元素设置width, height,margin-top和margin-dottom的时候使用去进行修改

image.png

visibility

• 设置元素是否可见

• 隐藏后文档所占区不会被其他元素覆盖。

  
  image.png

overflow

• 当标签里的内容超出标签的样式宽度和高度后，会溢出盒子
• 可以使用overflow来控制内容溢出的情况
  image.png

文档流

image.png

浮动

• 一个元素浮动后，其下方的元素会向上移动。
• 浮动会脱离文档流，不在占用位置
• 设置浮动后，会向上漂浮直到遇到父元素的边界或其他的浮动元素
• 浮动后完全脱离文档流，不影响父元素的高度
• 浮动后默认为块元素，即使设置display:inline依然是块元素

清除浮动

• clear属性可以用于清除浮动对元素的影响

• 不会因为上方的浮动元素而改变位置

  
  image.png

定位

• position属性来控制Web浏览器在何处显示特定元素

• 可以将元素放到网页的任何位置

  
  image.png

相对定位

image.png

特点

image.png

绝对定位

image.png

特点

image.png

固定定位

image.png

z-index

image.png