<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3初识(三)布局</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: yellow;
border: 5px solid red;
margin-bottom: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color: purple;
border: 5px solid cornflowerblue;
}
.outer{
width: 800px;
border: 10px solid red;
}
.inter{
width: auto;
height: 200px;
background-color: dodgerblue;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
overflow: auto;
}
.box4{
width: 100px;
height: 400px;
background-color: orange;
}
/*下面两个box出现了重叠现象*/
.box5,.box6{
width: 200px;
height: 200px;
}
.box5{
margin-top: 50px;
background-color: #bbffaa;
/*设置一个下外边距*/
margin-bottom: 50px;
}
.box6{
background-color: orange;
/*设置一个上外边距*/
margin-top: 50px;
}
/*父子元素的折叠*/
.box7{
width: 200px;
height: 200px;
background-color: #bbffaa;
}
.box8{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
.s1{
background-color: yellow;
}
.nbox1{
width: 200px;
height: 200px;
background-color: #bbffaa;
}
a{
display: inline-block;
width: 100px;
height: 100px;
background-color: goldenrod;
}
</style>
</head>
<body>
<!--
文档流(normal flow)
网页是一个多层的结构，一层叠一层
通过CSS可以分别为每层来设置样式
作为用户来讲只能看到最顶上一层
这些层中，最底下的层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态
- 在文档流中
- 不在文档流中(脱高文档流)
元素在文档流中有什么特点：
块元素：
块元素会在页面中总会独占一行(自上向下垂直排列)
默认宽度是父元素的全部(会把父元素撑满)
默认高度是被内容(子元素)撑开的高度
行内元素：
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素
则元素会换到第二行继续自左向右排列(与书写习惯-致)
行内元素的默认宽度和高度都是被内容撑开
盒子模型、盒模型、框模型(box model)：
CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区(content)：
元素中的所有子元素和文本内容都在内容区中排列
内容区的高度和宽度由height和height两个属性来设置
边框(border)：
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框，需要至少设置三个样式：
边框的宽度：
border-width，一般有默认值3px
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
border-top-width 单独设置顶部边框
border-left-width 单独设置左边框
border-bottom-width 单独设置底部边框
border-right-width 单独设置右边框
边框的颜色：
border-color，用来指定边框颜色，同样可以分别指定四个边的颜色
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
border-top-color 单独设置顶部边框颜色
border-left-color 单独设置左边框颜色
border-bottom-color 单独设置底部边框颜色
border-right-color 单独设置右边框颜色
边框的样式：
border-style，指定边框样式，默认值none，即没有
solid 表示实线
dotted 表示点状虚线
dashed 表示线状虚线
double 表示双线
其他属性的设置类似颜色与宽度的设置
border:样式 颜色 宽度 （参数顺序随意）
border-top(同上)
border-bottom(同上)
border-left(同上)
border-right(同上)
内边距(padding)：
内容区和边框之间的距离是内边距
一共有四个方向的内边距：
padding-top 顶部内边距
padding-bottom 底部内边距
padding-left 左内边距
padding-right 右内边距
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
padding：
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
一个盒子的可见框的大小，由内容区、内边距和边框共同决定
外边距(margin)：
外边距不会影响盒子可见框的大小，但是会影响盒子的位置以及实际占地大小
一共有四个方向的外边距：
margin-left 左外边距
margin-right 右外边距
margin-top 顶部外边距
margin-bottom 底部外边距
margin:
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
盒子模型的水平布局：
元素的水平方向的布局(宽度)：
一个元素在其父元素中，水平布局必须要满足以下等式：
子元素的(左右)内边距、(左右)外边距、(左右)边框和内容区宽度之和 = 父元素内容区的宽度
以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
调整情况：
如果这七个参数值中没有为auto的情况，则浏览器会自动调整margin-right的值以使等式满足
这七个值中有三个值可以设置为auto：width、margin-left、margin-right
如果某个值为auto，则会自动调整值为auto的那个值以使等式成立
一般如果css里width不写，width默认值就是auto
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则外边距都是0，宽度自动最大
如果两个外边距设置为auto，宽度固定，则外边距平分剩下的空间
盒子模型的垂直布局：
元素的垂直方向的布局(高度)：
默认情况下如果父元素的height不设值，则其高度会被内容撑开
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素：
可选值：
visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden，衣橱内容将会被裁剪不会显示
scroll，生成两个滚动条，通过滚动条查看完整内容
auto，根据需要生成适当的滚动条(或者没有)
overflow-x 单独负责水平的溢出
overflow-y 单独负责垂直的溢出
垂直外边距的重叠(折叠)：
相等的垂直方向外边距会发生重叠现象
兄弟元素：
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者为正值)
特殊情况：
两者一正一负，取两者之和
两者皆为负，则取两者中绝对值较大者
兄弟元素之间的外边距的重叠，对于开发是有利的，所以不需要进行处理
父子元素：
父子元素间的相邻外边距，子元素会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局，必须得进行处理
行内元素的盒子模型：
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，但是垂直方向border不会影响页面的布局
行内元素可以设置margin，但是垂直方向margin不会影响页面的布局
display：用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素(少用)
特点：既可以设置宽度和高度，又不会独占一行
none 元素不再页面中显示(没有占据页面位置)
visibility：用来设置元素的表示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面总隐藏不显示，但是依然占据了页面的位置
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<div class="outer">
<div class="inter"></div>
<div class="inter"></div>
</div>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7">
<div class="box8"></div>
</div>
<span class="s1">我是span1</span>
<div class="nbox1">我是new_div1</div>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>
浙公网安备 33010602011771号