[前端学习] 1.2 盒子模型-定位布局

1 CSS盒子模型

• 一个页面由很多CSS盒子模型组成
• 内部结构padding 外部结构 margin
• 每个元素都可以看成一个盒子 由padding margin content border四部分组成 还有宽度和高度两个辅助属性
•  content 内容 可以是文本和图片 有三个属性 :width height overflow(用来制定溢出方法)
• padding 内边距 指的是内容区和边框之间的空间 可以看成内容区的背景区域（一般按padding-top padding-right padding-bottom padding-left的顺序）
• margin 外边距 指的是两个盒子之间的距离 它可能是子元素和父元素之间的距离
• 浏览器审查元素 获取浏览区上的元素盒子模型信息 可以用CRTL+SHIFT+I 快捷键

记录点

• 使用浏览器控制台辅助开发 是前端开发必备的一项基础技能

2.浮动布局

• 正常文档流 指元素在页面中出现的先后顺序 又称为“普通流”
• 脱离文档流 使用 浮动和定位 去脱离正常文档流页面元素 
  • 浮动（float属性）可以灵活地定位 已达到布局页面的目的   

属性值	说明
left	元素向左浮动
right	元素向右浮动

• 清除浮动 clear:取值；在css中 我们用clear属性来清除浮动带来的影响

  left	清除左浮动
  right	清除右浮动
  both	同时清除

我们常在浮动元素后面再增加一个空元素 然后为这个元素定义clear:both

3.布局定位

• position属性取值

  fixed	固定定位
  relative	相对定位
  absolute	绝对定位
  static	静态定位（默认值）

  
  
• fixed 指的是被固定的元素不会随着滚动条的移动而移动

position:fixed;
top:像素值；
bottom:像素值;
left:像素值;
right:像素值；

常用于做返回顶部的效果

• relative 指的是该元素的位置相对于它的原始位置计算而来的 语法和fixed差不多
• absolute 来实现绝对定位 绝对定位在几种定位方式中使用最为广泛 它能精确的把元素定位到任意你想要的位置 它的top等属性值都是相对浏览器而言的 其他同类元素会忽视它的存在 即它是浮在其他元素上面的