三、CSS之——盒子模型
盒子
CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。
为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
盒子模型
在 CSS 中，一个独立的盒子模型由4 个部分组成。
-
content（内容）
内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大 小。
width和height属性只适用于块元素。 -
border（边框）
可以在元素周围创建边框，边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框：
border有三个必不可少的属性：- border-width:设置边框宽度单位以px为主 如：12px
- border-stle:设置边框样式
- border-color:设置边框颜色
border:1px red solid; 样式指定了边框的宽度、颜色和样式。也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
和padding一样，默认width和height并包括边框的宽度。
边框可以设置多种样式：- none（没有边框）
- dotted（点线）
- dashed（虚线）
- solid（实线）
- double（双线）
- groove（槽线）
- ridge（脊线）
- inset（凹边）
- outset（凸边）
当有多条规则作用于同个边框时，后面的设置会覆盖前面的设置
-
padding（内边距）
内边距指的就是元素内容区与边框以内 的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
例如：padding:10px 20px 30px 40px 这样会设置元素的上、右、下、左四个方向的内边距。 padding:10px 20px 30px; 分别指定上、左右、下四个方向的内边距 padding:10px 20px; 分别指定上下、左右四个方向的内边距 padding:10px; 同时指定上左右下四个方向的内边距 同时在css中还提供了padding-top、padding-right、padding- right、padding-bottom分别用来指定四个方向的内边距。 -
margin（外边距）
外边距是元素边框与周围元素相距的空间。
使用margin属性可以设置外边距。
用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。
当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中。一个盒子实际所战的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。通过设定 width 和 height 来控制内容所占的矩形大小，内边距、边框和外边距分别用 padding、border 和 margin 来表示。
图示.jpg
visibility属性
visibility属性主要用于元素是否可见。和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
可选值：
- visible：可见的
- hidden：隐藏的
overflow属性
当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些4奇怪的事情，浏览器会让内容溢出盒子。
可以通过哟overflow来控制内容溢出的情况。
可选值：
- visible：默认值
- scroll：添加滚动条
- auto：根据需要添加滚动条
- hidden：隐藏超出盒子的内容
文档流
文档流指的是文档中可现实的对象在排列时所占用的位置。
将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素，即为文档流。
也就是说在文档流中元素默认会紧贴到上个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左到右摆放。
这样一来每一个块元素都会另起一行，name我们如果想在文档流中进行布局就会变得比较麻烦。
浮动
所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
浮动使用float属性。
可选值：
none：不浮动
left：向左浮动
right：向右浮动
块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
高度塌陷
当子元素浮动后，父元素就会出现高度塌陷。影响页面布局
BFC块的格式化环境，默认是关闭的，
当开启的时候：
1、父元素的垂直外边距不会和子元素重叠
2、开启的BFC元素不会被浮动元素所覆盖
3、开启的BFC元可以包含浮动的子元素
如何开启：
1、设置元素浮动(会导致父元素宽度消失，下面的元素顶上来，不推荐使用)
2、设置元素绝对定位（不推荐使用）
3、设置元素为inline-block（不推荐使用）
4、将元素的overflow设置为一个非visible的值（推荐）（overflow:hidden）
e浏览器支持开启haslayout(zoom:1)和BFC一样
ie6及以下不支持BFC
如果设置了宽度，CSS就默认开启BFC
5、子元素里添加一个兄弟空白div，并清除浮动，用来撑开父元素，解决高度塌陷（推荐）
6、通过设置after伪类centent:"";并转成块元素display:biock;再清除浮动clear:both;解决高度塌陷。（推荐）
使用clearfix命名
.clear{
centen="";
display:block;
clear:both;
}
.clear{
zoom:1;
}
清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="div1">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a href="#">人工智能+Python-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a href="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*页面字体*/
body{
font: 12px/1 宋体;
}
.div1{
width: 300px;
height: 466px;
margin: 50px auto;
}
.title{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
/*设置行高*/
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px/36px "微软雅黑";
}
.content{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content a:hover{
color: red;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content li{
margin-bottom: 15px;
}
.content .no-border{
border: none;
}
image.png
