四、CSS基础（3）
2021-01-06 13:28
标签：hid 清除 文档 没有 oat foo code 定位 type 一、清除浮动 为什么要清除浮动：父盒子不适合设定高度，子盒子浮动后不占位，导致父盒子高度为0，父盒子外的其它元素上移占位导致布局错乱 1. 额外标签法 2. overflow清除浮动 3. after 伪元素清除浮动 4. 双伪元素清除浮动 二、定位 元素的定位属性主要包括定位模式和边偏移两部分。 1. 边偏移 top：顶端偏移量，定义元素相对于其父元素上边线的距离； bottom：底部偏移量，定义元素相对于其父元素下边线的距离； left：左侧偏移量，定义元素相对于其父元素左边线的距离； right：右侧偏移量，定义元素相对于其父元素右边线的距离； 即定位需要和边偏移搭配使用，如 top:100px; left:30px; 2. 定位模式（定位的分类） 在CSS中，position属性用于定义元素的定位模式，基本语法格式如下： 选择器{ position: 属性值;} 常用属性值：static（自动定位，默认）、relative（相对定位，相对于其原文档流的位置进行定位）、absolute（绝对定位，相对于其上一个已经定位的父元素进行定位）、fixed（固定定位，相对于浏览器窗口进行定位） （1）相对定位 子级用绝对定位，父级元素用相对定位。 （2）绝对定位 若所有父元素都没有定位，以浏览器当前屏幕为准对齐；若父元素有定位，则依据最近的已经定位的父元素/祖先进行定位。 四、CSS基础（3） 标签：hid 清除 文档 没有 oat foo code 定位 type 原文地址：https://www.cnblogs.com/sharef/p/10456420.html
方法：1. 额外标签法、2. overflow清除浮动、3. after伪元素清除浮动、4. 双伪元素清除浮动DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
.father {
width: 500px;
border: 1px solid 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>
div class="father">
div class="big">div>
div class="small">div>
div class="clear">div>
div>
div class="footer">div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
.father {
width: 500px;
border: 1px solid 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>
div class="father">
div class="big">div>
div class="small">div>
div>
div class="footer">div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
/*3. 伪元素清除浮动：父级div定义伪类after和zoom*/
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
.father {
width: 500px;
border: 1px solid 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>
div class="father clearfix">
div class="big">div>
div class="small">div>
div>
div class="footer">div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
/*4. 双伪元素清除浮动*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
width: 500px;
border: 1px solid 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>
div class="father clearfix">
div class="big">div>
div class="small">div>
div>
div class="footer">div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
/*相对定位*/
position: relative;
top: 100px;
left: 100px;
}
.bottom {
background-color: gray;
}
style>
head>
body>
div class="top">div>
div class="bottom">div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
style>
body {
height: 2000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
position: absolute; /*绝对定位：不占位置 跟浮动一样*/
top: 0px;
left: 0px;
}
.bottom {
background-color: gray;
width: 110px;
}
style>
head>
body>
div class="top">div>
div class="bottom">div>
body>
html>
下一篇：1初始化项目并且引入scss