清除浮动+字体+行高+背景

来源：互联网发布：淘宝保证金管理在哪里编辑：程序博客网时间：2024/05/12 23:44

一：浮动清除

(一)浮动说明

— 给元素的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

0 0