目录
web前端实训day04——css部分知识回顾
浮动
为什么使用浮动：默认排列不能够或者比较难达到布局效果（左右的布局）
什么是浮动：让元素脱离文档流，进行靠左或者靠右的排列
浮动后的位置
<style>
/* 浮动后的位置：碰触到包裹元素的边缘或者浮动元素的边缘 */
div {
border: 1px solid red;
}
.parent {
width: 600px;
height: 400px;
}
.parent div{
width: 100px;
height: 100px;
background-color: rosybrown;
float: right;
}
.parent h1 {
float: right;
border: 1px solid black;
}
</style>
<body>
<div class="parent">
<div></div>
<h1>我是h1元素</h1>
</div>
</body>
浮动的语法
<style>
/*
浮动的语法格式：float: 方向(方向的取值是left和right)
*/
div {
float: right;
width: 100px;
height: 100px;
background-color: darkkhaki;
}
</style>
<body>
<div></div>
</body>
浮动的特点：
(1)脱流，不占用原来的位置
(2)浮动后行内展示
(3)浮动后具备行内块的特点
脱流
<style>
.special {
float: left;
width: 100px;
height: 100px;
background-color: burlywood;
}
.normal {
width: 200px;
height: 200px;
background-color: chartreuse;
}
.third {
width: 300px;
height: 300px;
background-color: crimson;
}
</style>
<body>
<div class="special"></div>
<div class="normal"></div>
<div class="third"></div>
</body>
行内显示
<style>
div {
/* float: left; */
width: 100px;
height: 100px;
background-color: darkmagenta;
display: inline-block;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
行内块
<style>
/* 浮动后元素具备行内块的特点 可以更改宽高*/
span {
float: left;
width: 200px;
height: 100px;
border: 1px solid red;
}
h1 {
border: 1px solid red;
float: left;
}
</style>
<body>
<!-- <span>我是行内元素</span>
<span>我是行内元素</span> -->
<h1>我是h1标签</h1>
</body>
浮动的副作用
<style>
/*
副作用：因为父元素的高度由子元素撑开，副所以浮动后会造成父元素高度消失
解决：
1.给父元素设置高度
2.设置额外标签(必须是块元素)并清除浮动：clear:left\right\both W3C推荐使用的
3.设置父元素overflow
4.使用after伪元素
*/
.parent {
border: 1px solid red;
/* height:100px; */
}
.parent div {
float: left;
width: 100px;
height: 100px;
background-color: salmon;
}
.uncle {
width: 100px;
height: 100px;
background-color: seagreen;
}
</style>
<body>
<div class="parent">
<div></div>
<div></div>
</div>
<div class="uncle"></div>
</body>
清除浮动：
1给父元素设置高度
<style>
/*
副作用：因为父元素的高度由子元素撑开，所以浮动后会造成父元素高度消失
解决：给父元素设置高度
*/
.parent {
height: 100px;
border: 1px solid red;
}
.parent div {
float: left;
width: 100px;
height: 100px;
background-color: salmon;
}
.uncle {
width: 100px;
height: 100px;
background-color: seagreen;
}
</style>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
</div>
<div class="uncle"></div>
</body>
2添加一个块级元素空标签，并清除浮动(clear:both)——w3c推荐使用的
style>
/*
副作用：因为父元素的高度由子元素撑开，所以浮动后会造成父元素高度消失
解决：设置额外标签并清除浮动:clear:left\right\both w3c推荐使用的
*/
.parent {
border: 1px solid red;
}
.parent div {
float: left;
width: 100px;
height: 100px;
background-color: salmon;
}
.uncle {
width: 100px;
height: 100px;
background-color: seagreen;
}
.clear {
clear: both;
}
</style>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<p class="clear"></p>
</div>
<div class="uncle"></div>
</body>
3给父级元素设置overflow为hidden
<style>
.parent {
border: 1px solid red;
/* 滚动轴 */
overflow: hidden;
}
.son {
float: left;
width: 100px;
height: 100px;
background-color: rosybrown;
}
.uncle {
width: 100px;
height: 200px;
background-color: royalblue;
}
</style>
<body>
<div class="parent">
<div class="son">
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
x
<br>
</div>
</div>
4使用after伪类来进行清除，
原理同(2)，代码如下：
.content:after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.content {
/* 兼容IE6、7 */
*zoom: 1;
}
<style>
.parent {
border: 1px solid red;
}
.son {
float: left;
width: 100px;
height: 100px;
background-color: rosybrown;
}
.uncle {
width: 100px;
height: 200px;
background-color: royalblue;
}
.clear:after {
/* after伪类必填的 */
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<body>
<div class="parent clear">
<div class="son"></div>
</div>
<div class="uncle"></div>
</body>
布局的推荐
垂直方向使用默认，水平方向优先考虑浮动。
定位
相对定位
<style>
/*
定位=定位模式+偏移量
相对定位的语法：position:relative
特点：
（1）以自己为参照点
（2）不脱离流文档
（3）给绝对定位当“爹”
*/
div {
width: 100px;
height: 100px;
background-color: blanchedalmond;
/* 相对定位 */
position: relative;
top: 100px;
left: 100px;
}
.div1 {
width: 100px;
height: 100px;
background-color: brown;
}
</style>
<body>
<div class="div"></div>
<div class="div1"></div>
</body>
绝对定位
<style>
/*
绝对定位：相对于祖先的位置
语法：position: absolute;
*/
.div1 {
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
right: 0px;
top: 50%;
}
</style>
<body>
<div class="div1"></div>
</body>
绝对定位-脱流
<style>
div {
width: 100px;
height: 100px;
}
.one {
background-color: chartreuse;
position: absolute;
right: 0px;
}
.two {
background-color: chocolate;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
绝对定位-找父亲
<style>
.parent {
width: 500px;
height: 500px;
background-color: coral;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: cyan;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body
固定定位
<style>
div {
width: 100px;
height: 100px;
background-color: darkorchid;
/* position:absolute; */
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
<body>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<p>xx</p>
<div></div>
</body>