**
一、复习
**
盒模型box model，什么是盒子？所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本（纯文字）。
一个图片，里面能放东西吗？不能，图片自已就是它自已的内容，能理解吗？
请注意：img图片这个东西，跟行内和块级元素都不一样，因为它能设置宽高。图片还能设置成一排，所以不要纠结它是什么，记住它是文本就行了。
盒模型有哪些组成：width、height、padding、border、margin。（注意拼写，记住这些单词）
width、height是内容的宽度、高度，想起丈量相框、丈量包子的比喻、丈量稿纸的比喻。
padding，内边距，边框和文字内容之间的距离。padding有颜色，padding还能用背景图片（今天要学到）。
表示方法，能够用padding属性来综合写，4个值“上、右、下、左”，3个值“上、左右、下”，2个值“上下，左右”。还能按方向拆开， padding-top、padding-right、padding-bottom、 padding-left。
快捷键pdt pdr pbd pdl
border，边框，只需要记住2件事：3要素，4条边。
3要素：border-width、border-style、border-color；
4条边：border-top、border-right、border-bottom、border-left。
比如我们要单独设置某一条边，那么就需要写清楚3要素
border-top:3px solid red;
如果要单独设置要素：
border-width:3px;
border-color:red;
border-style:solid;
还能拆成最小：
border-bottom-style:solid;
常用线型：solid（实线）、dashed（虚线）、dotted（圆点线）。
最重要的是要记住
标准文档流中，标签分为两种：块级元素、行内元素。
块级元素：一定是霸占一行的（不能并排），能设置宽、高，不设置宽度默认就是占满父亲。div、p、h、li
（什么意思？）
行内元素：和其他行内元素并排，不能设置宽、高，默认宽度就是文字宽度。span、a、b、i、u
能够相互转
1display:block;
2或者：
display:inline;
我们引入了浮动，为什么要有浮动呢？
标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。
浮动：
1float:left;
2或者
3float:right;
浮动，从宏观上看，就是做“并排”的。这是它存在的哲学意义：并排
有几个性质：脱标、贴边、字围、收缩。
我们再增加一个收缩，一会儿讲到
一个浮动的元素如a、span ，是不需要设置display:block; 就能够设置宽高了。
因为浮动之后，脱离标准流了，所以标准流里面的法律、规则（空白折叠、底边平齐）都不适用了。
二、浮动性质的复习
<style type="text/css">
.box1{
/* float: left; 快捷键fll flr*/
width: 200px;
height: 200px;
background-color: green;
}
.box2{
/* float: left; */
width: 400px;
height: 400px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
复习一下
/* 半透明度 */
opacity: 0.6;
三、浮动的清除
从学习浮动的第一天，就要知道一件事，浮动有开始，就得有清除
来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的
<style type="text/css">
li{
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
没有浮动的效果，是这样的
增加浮动后的效果是这样的
更有意思的是，我把h3干掉，会变成一大条了
我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。
心目中是2排，实际上是1排
问题来了，它的本质是什么？第二个div中的li，去贴靠第一个div中最后一个li的边了
第二个div中的li，去贴第一个div中最后一个li的边了。
这2个div并没起到作用，放成2排
这些li本身是没有高度的，它在高度为0的空间，撑不起来，它们自已没有高度，撑不起一片天空
原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器，一个高度。
div {
height: 120px;
border: 1px solid #000;
}
我们增加右边距
margin-right: 10px;
一旦父亲伟大，有高度的时候，就能让浮动的后代元素不再互相影响，2个互不相识
否则它就会去找
- 结论：浮动和浮动之间互相有影响
你以为这2个div里的li无关，实际上是互相影响，这就需要清除浮动
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
只要父亲有了高度，儿子就不能贴到另一个儿子上
这里要注意，高度必须足够，如果不够，就还会发生贴靠现象
父亲一定要撑得比儿子高一些。
实战中，父亲的高度不会出现低于儿子的
或者叫祖先元素，一定要有高度。
有经验的专家，总结了这句话，有高度的盒子，才能关住浮动
清除浮动是很关键的
<body>
<div class="news">
<h3>
<span class="today ">今日新闻</span>
<span class="date">日期2020/12/1</span>
</h3>
<ul>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
<li>我是新闻，新闻啊，新闻啊，我是新闻，我是新闻</li>
</ul>
</div>
</body>
没有样式表的时候
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
