四、CSS基础（3）
【摘要】 四、CSS基础（3）考必过小编为大家整理了关于四、CSS基础（3）的信息，希望可以帮助到大家！
四、CSS基础（3）
标签：hid清除文档没有oatfoocode定位type
一、清除浮动
为什么要清除浮动：父盒子不适合设定高度，子盒子浮动后不占位，导致父盒子高度为0，父盒子外的其它元素上移占位导致布局错乱
方法：1. 额外标签法、2. overflow清除浮动、3. after伪元素清除浮动、4. 双伪元素清除浮动
1. 额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
border: 1px sopd red;
}
.big {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 150px;
height: 50px;
background-color: gray;
}
.clear {
/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/
/*清除浮动 left | right | both*/
clear: both;
}
</style>
</head>
<body>
<p class="father">
<p class="big"></p>
<p class="small"></p>
<!-- 1. 清除浮动-额外标签法：最后一个浮动标签的后，新添加一个标签清除浮动 -->
<p class="clear"></p>
</p>
<p class="footer"></p>
</body>
</html>
2. overflow清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
border: 1px sopd red;
/*注：是给父盒子添加overflow；不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁就行了*/
overflow: hidden;
}
.big {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 150px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<p class="father">
<p class="big"></p>
<p class="small"></p>
</p>
<p class="footer"></p>
</body>
</html>
3. after 伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*3. 伪元素清除浮动：父级p定义伪类after和zoom*/
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibipty: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
.father {
width: 500px;
border: 1px sopd red;
}
.big {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 150px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<p class="father clearfix">
<p class="big"></p>
<p class="small"></p>
</p>
<p class="footer"></p>
</body>
</html>
4. 双伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*4. 双伪元素清除浮动*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
width: 500px;
border: 1px sopd red;
}
.big {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 150px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<p class="father clearfix">
<p class="big"></p>
<p class="small"></p>
</p>
<p class="footer"></p>
</body>
</html>
二、定位
元素的定位属性主要包括定位模式和边偏移两部分。
1. 边偏移
top：顶端偏移量，定义元素相对于其父元素上边线的距离；
bottom：底部偏移量，定义元素相对于其父元素下边线的距离；
left：左侧偏移量，定义元素相对于其父元素左边线的距离；
right：右侧偏移量，定义元素相对于其父元素右边线的距离；
即定位需要和边偏移搭配使用，如 top:100px; left:30px;
2. 定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，基本语法格式如下：
选择器{ position: 属性值;}
常用属性值：static（自动定位，默认）、relative（相对定位，相对于其原文档流的位置进行定位）、absolute（绝对定位，相对于其上一个已经定位的父元素进行定位）、fixed（固定定位，相对于浏览器窗口进行定位）
（1）相对定位
子级用绝对定位，父级元素用相对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
/*相对定位*/
position: relative;
top: 100px;
left: 100px;
}
.bottom {
background-color: gray;
}
</style>
</head>
<body>
<p class="top"></p>
<p class="bottom"></p>
</body>
</html>
（2）绝对定位
若所有父元素都没有定位，以浏览器当前屏幕为准对齐；若父元素有定位，则依据最近的已经定位的父元素/祖先进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 2000px;
}
p {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
position: absolute; /*绝对定位：不占位置 跟浮动一样*/
top: 0px;
left: 0px;
}
.bottom {
background-color: gray;
width: 110px;
}
</style>
</head>
<body>
<p class="top"></p>
<p class="bottom"></p>
</body>
</html>
四、CSS基础（3）
标签：hid清除文档没有oatfoocode定位type
以上就是四、CSS基础（3）的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！