盒子模型（一）

文档流（normal flow）

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

元素在文档流中的特点

块元素

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

例如：div，p，from，ul，li，ol，dl，address，fieldset，hr，menu，table

内联元素（行内元素）

• 不会独占一行，行内元素在页面中自左向右水平排列
• 如果一行之中不能容纳下所有的行内元素，则会换到第二行继续自左向右排列。
• 行内元素的默认宽度和默认高度被内容撑开。

例如：span，strong，em，br，img，input，label，select，textarea，cite

块元素与行内元素最大区别：块级元素可以设置width，height属性，行内元素设置无效

盒子模型（也叫框模型）

CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
每一个盒子都由以下几个部分组成

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

如图：

1.内容区

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

2.边框（border）

• 边框属于盒子边缘，边框里面属于盒子内部。

设置边框，至少设置三个样式：
边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style

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

例如：
CSS代码：

.box1{
width: 200px;
height: 200px;
background-color: aqua;
border-color:red;
border-width: 1px;
border-style:inset;
}

html代码

<div class="box1">DIV</div>

效果：

盒子模型——边框

1.默认值，一般都是三个像素
四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右
例如：

border-width: 3px 4px 10px 11px;
border-width: 3px 4px ;

2.border-style指定边框的样式
solid：实线
dotted：点状虚线
dashed：虚线
double：双线
默认值是none

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

border：solid 10px orange;

盒子模型——内边距

内边距：内容区和边框之间的距离
一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left

内边距的设置会影响到盒子的大小

一个盒子的可见框的大小，由内容区的内边距和边框共同决定。
padding的简写属性，规则和border-width一样。
例如：
css代码：

.box1{
width: 200px;
height: 200px;
background-color: aqua;
border: 10px red dotted;
padding: 50px 50px 50px 50px;
}
.box2{
width: 100%;
height:100%;
background-color: red;
}

html代码：

<div class="box1">
   <div class="box2"></div>
</div>

效果：

盒子模型——外边距

外边距不会影响盒子可见框的大小，但是会影响盒子的位置
一共由四个方向的外边距
margin-top
margin-right （ 默认情况下设置默认为0，不做任何操作）
margin-bottom
margin-left

注意：元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上边距，则会移动元素自身，而设置下和右会移动其他元素。margin也可以设置负值，则移动的方向相反
例如：
css代码：

.box1{
width: 200px;
height: 200px;
background-color: aqua;
border: 10px red dotted;
padding: 50px 50px 50px 50px;
margin-bottom: 100px;
}
.box2{
width: 100px;
height:100px;
background-color: red;
}

html代码：

<div class="box1">
   <div class="box2"></div>
</div>
<div class="box2"></div>

效果：

解析：设置margin-bottom，下方红色的盒子向下移动。

水平方向布局

元素在其父元素中水平方向的位置由以下几个元素共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在其父元素中，水平布局必须满足以下公式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度

如果相加结果等式不成立，则称为过度约束，等式会自动调整
调整的情况如下：

• 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足。
• 如果某个值设置为auto，则会自动调整为auto的那个值使等式成立 例如：width=auto
• 如果不写width，则默认width为auto。如果将宽度和外边距同时设置为auto，则宽度会调整到最大。如果将三个值都设置为auto，则外边距都是0，宽度最大。
• 如果我们将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。所以我们经常利用这个特点来使一个元素在其父元素中水平居中。语法：width：xxxpx；margin：0 auto；
  例如：
  css代码

.box1{
width: 800px;
height: 200px;
border: 5px red solid;
background-color: aqua;
}
.box2{
   width: 50px;
height:100%;
background-color: red;
margin: 0 auto;
}

html代码

<div class="box1">
   <div class="box2">hhh</div>
</div>

效果;

垂直方向的布局

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素的大小，则子元素会从父元素中溢出，使用overflow属性来设置父元素如何处理溢出的子元素。

overflow可选值

• visible：默认值，子元素会从父元素中溢出，在父元素中外部位置显示
• hidden：隐藏，溢出内容将会被裁剪，不会显示。
• scroll：生成两个滚动条，来查看完整内容。
• auto：根据需要生成滚动条。

其中overflow-x专门处理水平方向，overflow-y处理竖直方向。

例如：
css代码：

.box1{
width: 200px;
height: 200px;
background-color: aqua;
overflow: auto;
}
.box2{
   width: 100px;
height:300px;
background-color: red;
}

html代码

<div class="box1">
   <div class="box2">
     <span>大鹏一日同风起，扶摇直上九万里。假令风歇时下来，犹能簸却沧溟水。世人见我恒殊调，闻余大言皆冷笑。(闻 一作：见)宣父犹能畏后生，丈夫未可轻年少。</span>
   </div>
</div>

效果: