【前端】HTML5+CSS3 CSS盒子模型（三)

1、文档流（normal flow）

• 网页是一个多层的结构，一层摞着一层，通过CSS可以为每一层来设计样式，作为用户只能看到最顶上的一层，而在这些层中，最底下的一层成为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列的
• 对我们而言，元素主要有两个特点：在文档流中，不在文档流中（脱离文档流）。
• 元素在文档流中的特点：
  1. 块元素：
     • 块元素会在页面中独占一行（自上向下垂直排列）
     • 默认宽度是父元素的全部（会把父元素撑满）
     • 默认高度是被内容撑开（子元素）
  2. 行内元素：
     • 行内元素不会独占页面的一行，只占自身的大小
     • 行内元素在页面中自左向右水平排列，如果一行中不能容纳所有的行内元素时，元素会换到第二行自左向右排列
     • 行内元素的默认宽度与高度都是被内容撑开

2.盒子模型—介绍

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

内容区（content）：元素中所有的子元素和文本内容都在内容区中排列着，内容区的大小由width和height两个属性来设置

• width设置内容区的宽度
• height设置内容区的高度

边框（border）：边框属于盒子边缘，边框里面属于盒子内部，出了边框就是盒子外部。边框的大小会影响到整个盒子的大小，要想设置边框，至少要设置三个样式：

• 边框的宽度：border-width
• 边框的颜色：border-color
• 边框的样式：border-style

.box1{
   
            /* 内容区 */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 边框 */
            border-width: 10px;
            border-color: chocolate;
            border-style: solid;
        }

3.盒子模型—边框

• 边框的宽度：border-width

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

  • border-width可以用来指定四个方向的边框的宽度：

    值的个数	值的情况
    四个值	上 右 下 左
    三个值	上 左右 下
    两个值	上下 左右
    一个值	上下左右

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

• 边框的颜色：border-color

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

• 边框的样式：border-style

  • 默认值是none 表示没有边框
  • solid 实线
  • dotted 点状虚线
  • dashed 虚线
  • double 双线

• border简写属性：通过该属性可以同时设置边框的所有相关样式，并没有顺序要求，除了border外还有四个border-xxx

.box1{
   
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 边框 */
            border-color: chocolate;
            border-style: solid;
        }
        .box2{
   
            width: 200px;
            height: 200px;
            background-color:cyan;
            /* 边框简写属性*/
            border:double 10px chartreuse
        }

4.盒子