我的前端学习笔记03-Layout

1. 文档流（normal flow）

• 网页是一个多层的结构，一层摞着一层

• 通过CSS可以分别为每一层来设置样式

• 作为用户来讲只能看到最顶上一层

• 这些层中，最底下的一层称为文档流，文档流是网页的基础
  我们所创建的元素默认都是在文档流中进行排列

• 对于我们来元素主要有两个状态

  在文档流中
  不在文档流中（脱离文档流）
  

元素在文档流中有什么特点：
块元素

• 块元素会在页面中独占一行(自上向下垂直排列)
• 默认宽度是父元素的全部（会把父元素撑满）
• 默认高度是被内容撑开（子元素）

行内元素

• 行内元素不会独占页面的一行，只占自身的大小
• 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素， 则元素会换到第二行继续自左向右排列（书写习惯一致）
• 行内元素的默认宽度和高度都是被内容撑开

2. 盒模型
   盒模型、盒子模型、框模型（box model）

• CSS将页面中的所有元素都设置为了一个矩形的盒子
• 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
• 每一个盒子都由一下几个部分组成：
  内容区（content）
  内边距（padding）
  边框（border）
  外边距（margin）

内容区（content）

• 元素中的所有的子元素和文本内容都在内容区中排列
• 内容区的大小由width 和 height两个属性来设置
  width 设置内容区的宽度
  height 设置内容区的高度

边框（border）
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部

• 边框的大小会影响到整个盒子的大小
• 要设置边框，需要至少设置三个样式：
  边框的宽度 border-width
  边框的颜色 border-color
  边框的样式 border-style

2.1盒模型-边框
边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width: 10px;

• 默认值，一般都是 3个像素
  

• border-width可以用来指定四个方向的边框的宽度
  值的情况
    四个值：上 右 下 左
    三个值：上 左右 下
    两个值：上下 左右
    一个值：上下左右
  

• 除了border-width还有一组 border-xxx-width
           xxx可以是 top right bottom left
           用来单独指定某一个边的宽度
  

 border-width: 10px;  
    border-top-width: 10px;
border-left-width: 30px;  

border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写，如果省略了则自动使用color的颜色值

 border-color: orange red yellow green;
 border-color: orange; 

•   border-style   指定边框的样式
    solid          表示实线
    dotted         点状虚线
    dashed         虚线
    double         双线
   border-style的默认值是none 表示没有边框
  

<