盒模型

1. 文档流（normalflow）

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

通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层

这些层中，最底下的一层称为文档流

文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列

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

在文档流中
不在文档流中（脱离文档流）
那么元素在文档流中有什么特点，我们接着往下看

2. 块元素

块元素会在页面中独占一行
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开（子元素）

3. 行内元素

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

4. 盒子模型
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。1

盒模型、盒子模型、框模型（box model）
CSS将页面中的所有元素都设置为了一个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由一下几个部分组成：

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型

元素中的所有的子元素和文本内容都在内容区中

width和height 设置排列内容区的大小
width 设置内容区的宽度
height 设置内容区的高度

示例

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}

边框（border）

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

注意：边框的大小会影响到整个盒子的大小

border-width 边框的宽度：默认3px
border-top-width 上边框的宽度
border-right-width 右边框的宽度
border-bottom-width 下边框的宽度
border-left-width 左边框的宽度
border-color 边框的颜色：默认使用color的颜色值
border-top-color 上边框的颜色
border-right-color 右边框的颜色
border-bottom-color 下边框的颜色
border-left-color 左边框的颜色
border-style 边框的样式：没有默认值，必须指定
border-top-style 上边框的样式
border-right-style 右边框的样式
border-bottom-style 下边框的样式
border-left-style 左边框的样式

.box1{
    border-width: 10px;
    border-color: red;
    /* 
    	solid  实线 
    	dotted 点状虚线 
    	dashed 虚线 
    	double 双线 
    */
    border-style: solid;
}

不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况

设定几个值就决定了对应方向的宽度、颜色或样式

四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右
其实不管设置几个值，只要记住：其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来

border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

border-top 上边框的宽度、颜色和样式
border-right 右边框的宽度、颜色和样式
border-bottom 下边框的宽度、颜色和样式
border-left 左边框的宽度、颜色和样式

.box1{ 
	border: 10px red solid;
}

内边距(padding）
内边距，也叫填充，是内容区和边框之间的空间

padding-top 上内边距
padding-right 右内边距
padding-bottom下内边距
padding-left 左内边距
padding内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

注意：内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

<style>
    .outer{
        width: 200px;
        height: 200px;
        border: 10px orange solid;
        padding-right: 100px;
        padding-bottom: 100px;
        padding-left: 100px;
    }

    .inner {
        width: 200px;
        height: 200px;
        background-color: greenyellow;
    }
</style>

<div class="outer">
    <div class="inner"></div>
</div>

外边距（margin）
外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

一共有四个方向的外边距：

margin-top 上外边距
设置正值，元素自身向下移动
设置负值，元素自身向上移动
margin-right 右外边距
设置正值，其右边的元素向右移动
设置负值，其右边的元素向左移动
上述说法并不准确，对于块元素，设置margin-right不会产生任何效果
margin-bottom 下外边距
设置正值，其下边的元素向下移动
设置负值，其下边的元素向上移动
上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）
margin-left 左外边距
设置正值，元素自身向右移动
设置负值，元素自身向左移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下

如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素

css -盒模型

盒模型

1. 文档流（normalflow）

2. 块元素

3. 行内元素

内容区（content）

边框（border）

おすすめ