一:浮动清除
(一)浮动说明
— 给元素的float属性赋值后,标签会脱标,停留在浮动层
— 浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去
— 如果填充的元素为块级元素且发生了重叠,浮动元素覆盖块级元素
— 如果之前是内联标签,浮动后,是可以设置宽高度(因为脱标了)
(二).为什么清除浮动?
案例一:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
.frame{
border: 1px solid red;
}
.child1{
width: 200px;
height:200px;
float: left;
background-color: #0000FF;
}
.child2{
width: 200px;
height:200px;
float: left;
background-color: yellow;
}
</style>
</head>
<body>
<div class="frame">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="frame">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
浮动带来的问题:
不同区域的浮动元素同行贴边
浮动子元素不能撑开父容器的高度
浮动子元素的父容器背景无法正常显示
(三).解决浮动的三种方式
1.通过对父级容器设置适合CSS高度
特点:可以直接指定高度,但是不灵活,后期维护成本高
应用场景:内容基本固定的情况,是可以用固定高度的
2.通过设置clear属性清除浮动
专门用于清除浮动的
特点:可以清除和其他元素浮动带来的问题,还是高度不能自适应
Margin不灵活,有一段margin空白区域
应用场景:不需要体现父级元素高度的场景下
3.通过overflow属性清除浮动(overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动)
用于清除浮动效果的小知识点
特点:可以清除浮动,让父级元素自适应高度,不影响margin效果
clear和overflow区别在于 overflow能够撑开父级元素。
二:字体属性设置
字体大小:font-size (以像素为单位设置字体大小、以百分比设置字体大小、变量值(small、larger))
行高:line-height
*以像素为单位设置每行的高度值、百分比设置行高
*拓展:如何通过行高设置字体行居中(行、列)
字体:font-family(当font-family后面接了多种字体的时候,用户字库中没有第一种字体时就使用第二种,以此类推,
如果CSS中设置的字体都没有则使用浏览器中的默认值)
font:字体/行高 字体
三,超链接伪类
(一)超链接标签基本格式
href地址:网页地址(一定要带上http协议)、本页面锚点位置
target取值:_self、_blank
(二)伪类选择器定义
格式:标签名:伪类名{}
超链接伪类选择::link、visited、hover、active(定义时候顺序不能变lvha)
(三)超链接伪类说明
-link:表示链接还没点击访问过
-visited:表示链接已经访问过了
-hover:表示鼠标放置在链接上
-active:表示鼠标对当前链接激活的时候(鼠标按下,并没有释放)
四,超链接伪类
1.背景图片设置
background-image属性,取值方式:url(地址)
2.设置背景图片重复方式
background-repead属性,取值方式:no-repeat、repeat-x、repeat-y
3.设置背景图片位置
background-position属性
取值方式1:x座标 y座标
取值方式2:left、right、top、bottom、center
一行写法:background:属性1 属性2 属性3