一、浮动
浮动是用来实现并排
浮动是要把固定格式从上到下改变成并排
2.浮动使用要点
1)要浮动,并排的盒子都要设置浮动
2)父盒子要有足够的宽度,否则盒子会掉下去
3)浮动元素不在区分块级和行内元素,它们一律能够设置宽度和高度,即使是span与a标签
二、定位
1.什么是相对定位(参照本身元素的位置)
盒子可以相对自己原来的位置,进行位置调整,称之为相对定位。
语法是:position: relative;
position: relative;
top: 50px;
left: 50px;
1)位置描述符,有以下四种:
位置 | 描述 |
---|---|
left: 100px; | 向右移动100px |
right: -50px; | 向右移动50px(为负数表示向相反方向移动) |
top: 100px; | 向下移动100px |
bottom: 100px; | 向上移动100px |
2)相对位置本质
相对定位的元素,会在“老家留坑”,本质上仍然在原来的位置,只不过渲染在新的地方而已,渲染的图像可以比喻成“影子”,不会对页面上的其他元素产生任何影响。
2.什么是绝对定位(参照浏览器)
盒子可以在浏览器中,以坐标进行位置精准描述,拥有自己的绝对位置。
语法是:position: absolute;
1)脱离标准文档流
绝对定位的元素,会脱离标准文档流,释放自己原来的位置,对其他元素不会产生任何干扰,二是对它们进行压盖。
除绝对定位外,浮动(float)、固定定位,都会脱离标准文档流。
2)参考盒子
绝对定位的盒子,并不是永远以浏览器作为基点。
绝对定位的盒子,会以自己祖先元素中,离自己最近的,拥有定位属性的盒子,作为基准点。这个盒子通常是相对定位的盒子,所以这个性质也叫作:“子绝父相”。
3.固定定位
不管页面如何滚动,它永远固定在那里。
语法是:position: fixed;
注:固定定位只能以页面作为基准点,没有“子固父相”性质。
4.定位使用的场景
相对定位:微调元素位置、用作绝对定位的参考盒子
绝对定位:用来制作:压盖、遮罩效果、结合js实现动画
固定定位:返回顶部、楼层导航等
三、CSS案例
浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动1</title>
<style>
/*
浮动是用来实现并排的,本例:实现三个块级元素(div)能够并排显示。
*/
.box {
width: 1000px; /*父盒子要有足够的宽度,否则浮动会掉下去*/
border:blue 1px solid;
margin: 20px;
height: 100px; /* 清除浮动方式1,后面会讲*/
}
.box1 {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
float: left;
background-color: blue;
}
.box3 {
width: 800px;
height: 100px;
float: right;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1 ">div盒子1</div>
<div class="box2 ">div盒子2</div>
<div class="box3 ">div盒子3</div>
</div>
</body>
</html>
清除浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动2</title>
<style>
/*
浮动的目的:浮动是用来实现并排的,即:浮动是为了解决左边图片,右边文字的需求
浮动的实现:子元素在父元素内浮动,只需要对子元素设置float: left/right 即可
浮动可能会带来的问题:如果父元素不设置高度(有时候不好计算父元素的高度),子元素浮动后,会导致父元素高度塌陷变为0
解决父元素高度塌陷变为0的方法,叫浮动清除(注意:是清除带来的问题,而不是删除浮动)。
浮动清除的方法:
方法1:设置父元素的高度
方法2:给父元素添加:overflow:hidden; 样式
方法3:在父元素内,添加冗余元素:clear:both;
*/
.box {
width: 1000px;
border:blue 1px solid;
margin: 20px;
height: 100px; /* 清除浮动方式1*/
overflow:hidden; /* 清除浮动方式2*/
}
.box1 {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
float: left;
background-color: blue;
}
.box3 {
width: 800px;
height: 100px;
float: right;
background-color: yellow;
}
/* 清除浮动方式3 */
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1 ">div盒子1</div>
<div class="box2 ">div盒子2</div>
<div class="box3 ">div盒子3</div>
<div class="clear"></div> <!--清除浮动方式3 -->
</div>
</body>
</html>
简单实现一个网页的头部:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动3</title>
<style>
.headerA {
width: 1000px;
margin-top: 20px;
overflow:hidden;
}
.logo {
float: left;
width: 200px;
}
.title {
float: left;
width: 380px;
margin-left: 20px;
font-size: 24px;
color:blue;
}
.search {
float: left;
width: 400px;
}
#navbar{
overflow:hidden;
margin-top:30px;
}
</style>
</head>
<body>
<div class="headerA" style="">
<img src="image/fj.png" class="logo" width="200px" height="80px">
<h3 class="title">XX省XXXXXX管理系统</h3>
<form class="search">
<div>
全文搜索:<input type="text">
<input type="button" value="确定">
</div>
</form>
</div>
<div id="navbar">
导航区
</div>
</body>
</html>
相对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
/*
相对定位:相对定位的元素,会在“老家留坑”,本质上仍然在原来的位置,只不过渲染在新的地方而已,
渲染的图像可以比喻成“影子”,不会对页面上的其他元素产生任何影响
特点:它相对的是自己原来的位置。
使用场景:微调元素位置、用作绝对定位的参考盒子
*/
* {
padding: 0px;
margin: 0px;
}
.box1 {
border: 3px dashed #000;
width: 150px;
height: 150px;
}
.box2 {
background-color: pink;
width: 150px;
height: 150px;
}
.relative {
position: relative; /*相对定位*/
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2 relative">
这个div相对于原来的位置偏移了
</div>
</div>
<div class="box1">这个div不受到影响,内容只是被压盖</div>
</body>
</html>
绝对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
/*
绝对定位:绝对定位的元素,会脱离标准文档流,释放自己原来的位置,对其他元素不会产生任何干扰,二是对它们进行压盖
特点:正常情况下,绝对定位以浏览器作为基点
使用场景:用来制作:压盖、遮罩效果、结合js实现动画
*/
* {
padding: 0px;
margin: 0px;
}
.box1 {
border: 3px dashed #000;
width: 150px;
height: 150px;
}
.box2 {
background-color: pink;
width: 150px;
height: 150px;
}
.absolute {
position: absolute;/*绝对定位*/
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">老家没有留坑,这里可以写内容。
<div class="box2 absolute">
绝对定位
</div>
</div>
<div class="box1">这个div不受到影响,内容只是被压盖</div>
</body>
</html>
子绝父相:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子绝父相</title>
<style>
/*
子绝父相
绝对定位的盒子,会以自己祖先元素中,离自己最近的,拥有定位属性的盒子,作为基准点。
这个盒子通常是相对定位的盒子,所以这个性质也叫做 “子绝父相”
*/
* {
padding: 0px;
margin: 0px;
}
.box1 {
border: 3px dashed #000;
width: 150px;
height: 150px;
}
.box2 {
background-color: pink;
width: 150px;
height: 150px;
}
.ralative {
position: relative;/*相对定位*/
}
.absolute {
position: absolute;/*绝对定位*/
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">盒子1 </div>
<div class="box1 ralative">
<div class="box2 absolute">
子绝父相
</div>
</div>
</body>
</html>
固定定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
/*
固定定位:不管页面如何滚动,它永远固定在那里。语法是:position: fixed;
特点:固定定位只能以页面作为基准点,没有“子固父相”性质
使用场景:返回顶部、楼层导航等
*/
* {
padding: 0px;
margin: 0px;
}
.box2 {
background-color: pink;
width: 80px;
height: 30px;
}
.fixed {
position: fixed;/*固定定位*/
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div>
<p >拉拉拉</p>
<p >拉拉拉</p>
</div>
<div class="box2 fixed">
返回顶部
</div>
</body>
</html>
背景颜色及绘制区:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景绘制区</title>
<style>
/*
background-color属性用来设置背景颜色,padding 区域,是有背景颜色的
background-clip 属性,用来指定背景的绘制区域(俗称:背景裁剪)
border-box:背景绘制在边框及以内(默认)
padding-box:背景绘制在padding及以内
content-box:背景绘制在内容区
*/
div {
padding:35px;
}
/* 1. 背景绘制在边框及以内(默认) */
#example1 {
border: 10px dotted black;
background-color: yellow;
/* 默认:border-box*/
/* background-clip:border-box; */
}
/* 2. 背景绘制在padding及以内 */
#example2 {
border: 10px dotted black;
background-color: yellow;
background-clip: padding-box;
}
/* 3. 背景绘制在内容区 */
#example3 {
border: 10px dotted black;
background-color: yellow;
background-clip: content-box;
background-size:10px 10px;
}
</style>
</head>
<body>
<h1>背景裁剪</h1>
<h2>1、background-clip:border-box(默认)</h2>
<div id="example1">
<p>背景绘制在边框及以内(默认)</p>
</div>
<h2>2、background-clip: padding-box</h2>
<div id="example2">
<p>背景绘制在padding及以内</p>
</div>
<h2>3、background-clip: content-box</h2>
<div id="example3">
<p>背景绘制在内容区</p>
</div>
</body>
</html>
背景图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片及平铺</title>
<style>
/*
background-image 属性用来设置背景图片,语法格式如下background-image: url(图片路径)
background-repeat 背景平铺属性
1.repeat 表示xy都平铺(默认)
2.no-repeat 表示xy都平铺(默认)
3.repeat-x 表示xy都平铺(默认)
4.repeat-y 表示xy都平铺(默认)
background-size 用来设置背景图片的尺寸,默认值为auto
*/
div{
height: 300px;
padding:35px;
}
/* 1.默认x,y都平铺 */
#example1 {
border: 10px dotted black;
background-image: url(image/fj.png);
/* 默认repeat */
/* background-repeat: repeat; */
}
/* 2.不平铺 */
#example2 {
border: 10px dotted black;
background-image: url(image/fj.png) ;
background-repeat: no-repeat;
}
/* 3.x方向平铺 */
#example3 {
border: 10px dotted black;
background-image: url(image/fj.png);
background-repeat: repeat-x;
}
/* 4.y方向平铺 */
#example4 {
border: 10px dotted black;
background-image: url(image/fj.png);
background-repeat: repeat-y;
}
/* 5.背景图片大小 */
#example5 {
border: 10px dotted black;
background-image: url(image/fj.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
</style>
</head>
<body>
<h1>背景图片</h1>
<h2>1、背景平铺</h2>
<div id="example1"></div>
<h2>2、背景不平铺</h2>
<div id="example2"></div>
<h2>3、x方向平铺</h2>
<div id="example3"></div>
<h2>4、y方向平铺</h2>
<div id="example4"></div>
<h2>5、图片大小</h2>
<div id="example5"></div>
</body>
</html>