CSS盒子模型和布局模型

学习记录，参考慕课网CSS基础教程

• 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
  • 常用块状元素:
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
  • 常用内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  • 常用内联块状元素: <img>、<input>
• 设置{display:block}将元素显示为块级元素。设置{display:inline}将元素显示为内联元素。设置{display:inline}将元素显示为内联块状元素。
• 盒子模型: padding, margin, border
• 在网页中，元素有三种布局模型
  1. 流动模型（Flow）
  2. 浮动模型 (Float)
  3. 层模型（Layer）
• 流动（Flow）是默认的网页布局模式。块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示。
• 浮动模型{flat:right or left}可以让两个块状元素并排显示
• 层模型有三种形式：
  1. 绝对定位(position: absolute)
  2. 相对定位(position: relative)
  3. 固定定位(position: fixed)
• position:absolute设置绝对定位，这条语句的作用将元素从文档流中拖出来，然后使用位置属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
• position:relative设置相对定位，它通过位置属性确定元素在正常文档流中的偏移位置，偏移前的位置保留不动。
• position:fixed设置固定定位
• 如果A想要相对B来定位，则B必须是A的前辈元素。B必须加入position:relative，A加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。