文章目录
- 文档流
- 块元素
- 行内元素
- 盒子模型
- 内容区（content）
- 边框（border）
- 内边距(padding）
- 外边距（margin）
- 水平方向布局
- 垂直方向布局
- 行内元素的盒模型
文档流
文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列
在文档流中
不在文档流中（脱离文档流）
块元素
块元素会在页面中独占一行
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开（子元素）
行内元素
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列（书写习惯一致）
如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
行内元素的默认宽度和高度都是被内容撑开
盒子模型
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， 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：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
border-top 上边框的宽度、颜色和样式
border-right 右边框的宽度、颜色和样式
border-bottom 下边框的宽度、颜色和样式
border-left 左边框的宽度、颜色和样式
.box1{
border: 10px red solid;
}内边距(padding）
内容区和边框之间的空间
padding-top 上内边距
padding-right 右内边距
padding-bottom下内边距
padding-left 左内边距
<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>
当内外div宽度和高度一样时，由于outer设置了一个padding属性，其盒子大小被“撑大了”
盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
外边距（margin）
外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段
注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用
margin-top 上外边距
设置正值，元素自身向下移动
设置负值，元素自身向上移动
margin-right 右外边距
设置正值，其右边的元素向右移动
设置负值，其右边的元素向左移动
上述说法并不准确，对于块元素，设置margin-right不会产生任何效果
margin-bottom 下外边距
设置正值，其下边的元素向下移动
设置负值，其下边的元素向上移动
上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题
margin-left 左外边距
设置正值，元素自身向右移动
设置负值，元素自身向左移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下
如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 100px;
}水平方向布局
元素在其父元素中水平方向的位置由以下几个属性共同决定
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值以使等式满足
100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
如果这七个值中有auto的情况，则会自动调整auto值以使等式成立
这七个值中有三个值可以设置为auto ：width、margin-left、maring-right
如果某个值为auto，则会自动调整auto的那个值以使等式成立
200 + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 200 + 0 + 0 + 400 + 0 + 0 + 200 = 800
auto + 0 + 0 + 200 + 0 + 0 + 200 = 600 ==> 400 + 0 + 0 + 200 + 0 + 0 + 200 = 800
200 + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 200 + 0 + 0 + 400 = 800
如果宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为0
auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
如果外边距都为auto，则auto的外边距会自动均分以使等式成立
auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/* 下列条件等价于 margin: 0 auto */
margin-left: auto;
margin-right: auto;
}
</style>
<div class="box1"></div>
垂直方向布局
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素
可选值：visible/hidden/scroll/auto
visible 溢出内容会在父元素外部位置显示，默认值
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
overflow: visible; /* 默认值 */
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
eveniet in numquam!
</div>
hidden 溢出内容会被裁剪，不会显示
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: hidden; /* 隐藏溢出内容 */
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
eveniet in numquam!
</div>
scroll
生成两个滚动条，通过滚动条来查看完整的内容
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: scroll;
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
eveniet in numquam!
</div>
auto 根据需要生成滚动条
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: auto;
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur illo inventore
deleniti laudantium quaerat excepturi sed quidem tempore? Eaque, cumque porro. Fuga quam error cupiditate quasi
eveniet in numquam!
</div>
边距折叠
垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
.box1,.box2{
width:200px;
height:200px;
font-size:100px;
}
.boxl{
background-color: #bfa;
/*设置一个下外边距*/
margin-bottom: 100px;
}
.box2{
background-color: orange;
/*设置一个上外边距*/
margin-top: 100px;
}父子元素
父子元素间相邻外边距，子元素会传递给父元素（上外边距）
.box3{
width：200px;
height:200px;
background-color: #bfa;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
/* margin-top: 100px; */
}
行内元素的盒模型
行内元素不支持设置宽度和高度
.s1 {
/* 行内元素设置了宽高也没用，不会生效 */
width: 100px;
height: 100px;
background-color: yellow;
}行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
.s1 {
/* 下方的div元素并没有因span设置了padding属性，而受到位置上的影响 */
padding: 100px;
background-color: yellow;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}行内元素可以设置border，垂直方向的border不会影响页面的布局
.s1 {
border: 10px orange solid;
background-color: yellow;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}行内元素可以设置margin，垂直方向的margin不会影响页面的布局
.s1 {
margin: 100px;
background-color: yellow;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}display用来设置元素显示的类型
inline将元素设置为行内元素
block将元素设置为块元素
.s1 {
margin: 100px;
background-color: yellow;
/* 将行内元素设置为块元素 */
display: block;
}inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行
.s1 {
margin: 100px;
background-color: yellow;
/* 将行内元素设置为行内块元素，兼顾行内元素和块元素的特点 */
display: inline-block;
}table将元素设置为一个表格
none元素不在页面中显示
.s1 {
margin: 100px;
background-color: yellow;
/* 将行内元素设置为none：不显示 */
display: none;
}visibility用来设置元素的显示状态
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏不显示，但是依然占据页面的位置
.s1 {
margin: 100px;
background-color: yellow;
display: block;
visibility: hidden;
}
