浮动布局
what|why:让块级(block)标签在父级的宽度限制下同行显示,一行显示不下,自动换行
注:要到达一行显示个数固定,一定要固定父级的宽度
语法:
子级 {
float: left|right;
}
问题:子级不再撑开父级高度(不完全脱离文档流)
脱离文档流: => 层次结构会上移,覆盖有位置重叠且没脱离文档流的标签
不完全:浮动布局后,可以重新让子级撑开父级高度
清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫做清浮动
语法:
父级:after {
content: "";
dislpay: block;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.div {
width: 200px;
height: 200px;
background-color: yellow;
margin-right: 10px;
float: right;
}
</style>
<style>
.ul1 {
background-color: pink;
width: 600px;
margin: 0 auto;
}
.ul1 li {
width: 200px;
height: 60px;
}
.ul1 li:nth-child(2n) {
background-color: orange;
}
.ul1 li:nth-child(2n - 1) {
background-color: red;
}
.ul1 li {
float: left;
}
.ul1:after {
content: "";
display: block;
clear: both;
}
.bro {
width: 50px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="bro"></div>
<style>
.box:after {
content: "000";
}
.box:before {
content: "***";
}
</style>
<div class="box">123</div>
</body>
</html>
浮动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.ul1 {
width: 825px;
margin: 0 auto;
background-color: black;
}
.ul1 li {
width: 200px;
height: 120px;
background-color: red;
margin-right: 15px;
float: left;
}
.ul1 li:first-child {
width: 180px;
}
.ul1 li:last-child {
margin-right: 0;
}
.ul1:after {
content: "";
display: block;
clear: both;
}
</style>
<style>
.box1 {
background-color: pink;
padding: 10px 0;
}
.box1:after {
content: "";
display: block;
clear: both;
}
.box1 h3 {
float: left;
}
.box1 ul {
float: right;
}
.box1 li {
float: left;
margin-left: 20px;
}
.box1 ul:after {
content: "";
display: block;
clear: both;
}
.box1 li:hover {
color: #ff6700;
cursor: pointer;
border-bottom: 2px solid #ff6700;
}
</style>
</head>
<body>
<ul class="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box1">
<h3>家电</h3>
<ul>
<li>电视影</li>
<li>电视影音</li>
<li>电视</li>
<li>电视影音</li>
</ul>
</div>
<style>
.box2 {
width: 840px;
margin: auto;
}
.box2:after {
content: "";
display: block;
clear: both;
}
.left {
width: 200px;
height: 410px;
margin-right: 10px;
background-color: red;
float: left;
}
.right {
width: 630px;
background-color: red;
float: left;
}
.right:after {
content: "";
display: block;
clear: both;
}
.right li {
width: 150px;
height: 200px;
margin: 0 10px 10px 0;
background-color: orange;
float: left;
}
.right li:nth-child(4n) {
margin-right: 0;
}
.right li div {
height: 95px;
background-color: brown;
margin-bottom: 10px;
}
li.no {
margin-bottom: 0;
}
</style>
<div class="box2">
<div class="left"></div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="no"></li>
<li class="no"></li>
<li class="no"></li>
<li class="no">
<div></div>
<div></div>
</li>
</ul>
</div>
</body>
</html>
固定定位
what|why: 盒子相对于屏幕完成位置布局,不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的),且和页面内容发生重叠时,该布局下的内容显示层次更高(覆盖其他内容)
语法:
position: fixed;
固定定位总结:
1.参考系为页面窗口
2.一旦设置定位属性,top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上同,理左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
.info {
width: 120px;
height: 220px;
background-color: orange;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.sup {
width: 200px;
height: 200px;
background-color: pink;
z-index: 1000;
}
.sub {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
left: 50px;
right: 50px;
bottom: 50px;
top: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="info"></div>
<div class="sup">
<div class="sub"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
绝对定位
what|why: 兄弟标签之间不相互影响, 都参照父级的显示区域来完成布局
语法:
position: absolute;
/*绝对定位总结:
1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位)
2.一旦设置定位属性,top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.上下同时出现取上,同理左右取左
4.绝对定位会完全脱离文档流(永远不会撑开父级高度 => 布局中父级一定需要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离文档流盒子的显示层次可以z-index属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
.sup {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.sub1 {
width: 100px;
height: 50px;
background-color: green;
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
top: 0;
}
.sub2 {
width: 50px;
height: 100px;
background-color: cyan;
position: absolute;
z-index: 11;
left: 0;
bottom: 0;
top: 0;
}
.sup {
position: relative;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
相对定位
what|why:核心用处 => 父相子绝
语法:
position: relative;
相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
4.相对定位不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局
注: 相对定位定位方位只会改变显示图层,不会改变盒子的原有位置,原有位置不变就不会影响兄弟盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin-left: 100px;
margin-top: 200px;
}
.box {
position: relative;
top: 200px;
}
.bbb {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="bbb">123</div>
</body>
</html>
定位动画案例
/*持续时间*/
/*transition-duration: 3s;*/
/*延迟时间: 0*/
/*transition-delay: 1s;*/
/*过渡属性: all | 属性1, ..., 属性n | eg:height, background-color */
/*transition-property: all;*/
/*过渡曲线: ease*/
/*ease | ease-in | ease-out | ease-in-out | linear
cubic-bezier(0.83, 1.46, 0, -1.29)*/
/*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/
/* 简写 */
/* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/
/*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/
transition: .3s linear;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位动画案例</title>
<style>
.wrap {
width: 200px;
height: 300px;
background-color: #666666;
margin: 0 auto;
position: relative;
}
.box {
width: 200px;
height: 0;
background-color: #ff6700;
position: absolute;
bottom: 0;
left: 0;
}
.box {
transition-duration: 3s;
transition: .3s linear;
}
.wrap:hover .box {
height: 200px;
background-color: red;
}
.box {
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">123</div>
</div>
</body>
</html>