**
一、复习
**
盒模型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>
没有样式表的时候