页面布局-1

1.定位

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位
left	与参照点左侧距离	长度
right	与参照点右侧距离	长度
top	与参照点上侧距离	长度
bottom	与参照点下侧距离	长度
z-index	显示层级	纯数字

1.1相对定位

1.1.1如何设置相对定位

position: relative

1.1.2相对定位元素定位的参考点

自己原来的位置

1.1.3相对定位元素的特点

不脱离文档流，相邻元素仍然按照其原来的位置进行排列
相对定位不会改变元素原有的显示模式，可以与浮动一起设置

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            position: relative;
        }
        body{
            position: relative;
        }
        .wapper{
            
            width: 600px;
            height: 400px;
            background: #999;
        }
        .box1{
            width: 200px;
            height: 100px;
            background: blue;
        }
        .box2{
            position: relative;
            width: 200px;
            height: 100px;
            background: red;
        }
        .box3{
            width: 200px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="wapper">
        <div class="box1">元素一</div>
        <div class="box2">元素二</div>
        <div class="box3">元素三</div>
    </div>
</body>
</html>复制

1.2绝对定位

1.2.1设置绝对定位

position：absolute;

1.2.2绝对定位元素定位的参考点

1. 绝对定位元素参照它的包含块进行定位
2. 一般元素的包含块就是父元素，绝对定位元素的包含块是第一个定位的祖先元素（从父元素开始向上找），如果没有定位的祖先元素，包含块就是整个页面

1.2.3绝对定位元素的特点

1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置为绝对定位就是绝对定位元素；同时设置浮动和绝对定位，浮动不生效。
3. 绝对定位元素具有自己的显示特点
① 默认宽高都是被内容撑开，不存在外边距的塌陷和合并
② 宽高内外边距都可以设置
③ 不会被父元素作为文本

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 800px;
            padding: 20px;
            background: #ccc;
        }
 
        .box {
            /* float: left; */
            width: 200px;
            height: 150px;
            padding: 10px;
            color: #fff;
        }
 
        .box01 {
            background: #900;
        }
 
        .box02 {
            /* 设置成相对定位 */
            position: relative;
 
            /* 定位元素 可以使用 left\right\top\bottom 调整位置 */
            /* left: 100px;
            top: 100px; */
 
            /* left: -20px;
            top: -20px; */
 
            /* left: 100px;
            right: 30px;
            right: -30px;
            bottom: -20px;
            bottom: 20px; */
 
            /* margin-left: 100px;
            margin-top: -100px; */
 
            top: -100px;
 
            background: #080;
        }
 
        .box03 {
            background: #099;
        }
 
        .boxs {
            margin-top: 60px;
        }
        .item {
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            width:250px;
            height: 300px;
            padding: 20px;
            background: #ccc;
        }
        .item:hover {
            position: relative;
            top: -2px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box01">元素A</div>
        <div class="box box02">元素B</div>
        <div class="box box03">元素C</div>
    </div>
 
    <div class="boxs">
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
        <div class="item">商品项目</div>
    </div>
</body>
</html>复制

1.3固定定位

1.3.1如何设置为固定定位

position: fixed;

1.3.2固定定位的元素定位参考点

1. 固定定位元素参照它的包含块进行定位
2. 固定定位元素的包含块是视口

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .wapper {
            /* position: relative; */
            width: 800px;
            padding: 20px;
            border: 4px dashed #999;
            background: #ccc;
 
            text-align: center;
        }
 
        .box {
            /* float: left; */
            width: 200px;
            height: 150px;
            padding: 10px;
            color: #fff;
        }
 
        .box01 {
            background: #900;
        }
 
        .box02 {
            /* 设置成固定定位 */
            position: fixed;
 
            right: 10px;
            top: 100px;
 
            background: #080;
        }
 
        .box03 {
            background: #099;
        }
    </style>
</head>
<body>
    <div class="wapper">
        <div class="box01">元素一</div>
        <div class="box02">元素二</div>
        <div class="box03">元素三</div>
    </div>
 
    <div style="height:1000px"></div>
</body>
</html>复制

1.3.3固定定位元素的特点（同绝对定位）

1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置为固定定位就是固定定位元素；同时设置浮动和固定定位，浮动不生效。
3. 固定定位元素具有自己的显示特点
① 默认宽高都是被内容撑开，不存在外边距的塌陷和合并
② 宽高内外边距都可以设置
③ 不会被父元素作为文本

1.3.4定位显示层级 z-index

1. 定位的元素默认显示层级是相同的，不论进行哪一种定位，后面的元素显示在上层；定位元素的显示层级比不定位高。
2. 定位的可以通过 CSS 属性 z-index 设置显示层级，值是数字，可以是负值，值越大显示层级越高；不定位的元素设置 z-index 无效！

1.4定位元素（绝对和固定）的默认宽高计算规则

1. 定位的元素，如果没有固定宽度，同时 left 和 right 都会生效，进而影响到默认的宽度
2. 定位的元素，如果没有固定高度，同时 top 和 bottom 都会生效，进而影响到默认的高度

原始的样式

设置 left和right

 .box01 {
            background: #900;
 
            position: absolute;
            left: 0;
            right: 0;
            left: 100px;
            right: 20px;
 
            top: 0;
            bottom: 0;
            /* width: 200px; */
        }复制

设置固定宽度

 .box01 {
            background: #900;
 
            position: absolute;
            left: 0;
            right: 0;
            left: 100px;
            right: 20px;
 
            top: 0;
            bottom: 0;
            width: 200px; 
        }复制

固定定位

         .box02 {
            position: fixed;
            left: 0;
            right: 0;
            top: 200px;
            bottom: 200px;
 
            background: #080;
        }复制

1.4设置定位元素（绝对和固定）在包含块中水平垂直都居中

1.4.1方案一：

position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度/2;
margin-top:-自身总高度/2;

设置居中

  .box {
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -220px;
            margin-top: -120px;
            width: 400px;
            height: 200px;
            padding: 20px;
            color: #fff;
            background: #900;
        }复制

1.4.2方案二：

position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

2.精灵图

把小的图片合并到一张大的图片上

多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同

2.1精灵图的优点

减少图片的请求次数，提高网页加载速度。

2.2制作精灵图在线工具

https://alloyteam.github.io/gopng/

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .b1{
            width: 120px;
            height: 56px;
            background: url(./images/toolbars.png) -100px 0;
        }
        .b2{
            width: 120px;
            height: 56px;
            background: url(./images/toolbars.png) top right;
        }
        .b3{
            width: 18px;
            height: 20px;
            background: url(./images/toolbars.png) -97px -212px;
        }
    </style>
</head>
<body>
    <h1>精灵图</h1>
    <button class="b1"></button>
    <button class="b2"></button>
    <button class="b3"></button>
</body>
</html>复制

3.重置样式表

由于很多的元素有自己默认的样式，一般在使用时会将默认样式去掉，自己设计样式

1. reset.css 将元素自带的样式重置掉
2. normalize.css 重新设置了元素自带的样式，保持各浏览器统一，需要设计稿也使用normalize标准

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	html{
	position: relative;
	}
	body{
	position: relative;
	}
	.wapper{

	width: 600px;
	height: 400px;
	background: #999;
	}
	.box1{
	width: 200px;
	height: 100px;
	background: blue;
	}
	.box2{
	position: relative;
	width: 200px;
	height: 100px;
	background: red;
	}
	.box3{
	width: 200px;
	height: 100px;
	background: yellow;
	}
	</style>
	</head>
	<body>
	<div class="wapper">
	<div class="box1">元素一</div>
	<div class="box2">元素二</div>
	<div class="box3">元素三</div>
	</div>
	</body>
	</html>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.wrapper {
	width: 800px;
	padding: 20px;
	background: #ccc;
	}

	.box {
	/* float: left; */
	width: 200px;
	height: 150px;
	padding: 10px;
	color: #fff;
	}

	.box01 {
	background: #900;
	}

	.box02 {
	/* 设置成相对定位 */
	position: relative;

	/* 定位元素可以使用 left\right\top\bottom 调整位置 */
	/* left: 100px;
	top: 100px; */

	/* left: -20px;
	top: -20px; */

	/* left: 100px;
	right: 30px;
	right: -30px;
	bottom: -20px;
	bottom: 20px; */

	/* margin-left: 100px;
	margin-top: -100px; */

	top: -100px;

	background: #080;
	}

	.box03 {
	background: #099;
	}

	.boxs {
	margin-top: 60px;
	}
	.item {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	width:250px;
	height: 300px;
	padding: 20px;
	background: #ccc;
	}
	.item:hover {
	position: relative;
	top: -2px;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<div class="box box01">元素A</div>
	<div class="box box02">元素B</div>
	<div class="box box03">元素C</div>
	</div>

	<div class="boxs">
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	<div class="item">商品项目</div>
	</div>
	</body>
	</html>

	.box01 {
	background: #900;

	position: absolute;
	left: 0;
	right: 0;
	left: 100px;
	right: 20px;

	top: 0;
	bottom: 0;
	/* width: 200px; */
	}

	.box02 {
	position: fixed;
	left: 0;
	right: 0;
	top: 200px;
	bottom: 200px;

	background: #080;
	}

	.box {
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -220px;
	margin-top: -120px;
	width: 400px;
	height: 200px;
	padding: 20px;
	color: #fff;
	background: #900;
	}

页面布局-1

1.定位

1.1相对定位

1.1.1如何设置相对定位

1.1.2相对定位元素定位的参考点

1.1.3相对定位元素的特点

1.2绝对定位

1.2.1设置绝对定位

1.2.2绝对定位元素定位的参考点

1.2.3绝对定位元素的特点

1.3固定定位

1.3.1如何设置为固定定位

1.3.2固定定位的元素定位参考点

1.3.3固定定位元素的特点（同绝对定位）

1.3.4定位显示层级 z-index

1.4定位元素（绝对和固定）的默认宽高计算规则

1.4设置定位元素（绝对和固定）在包含块中水平垂直都居中

1.4.1方案一：

1.4.2方案二：

2.精灵图

2.1精灵图的优点

2.2制作精灵图在线工具

3.重置样式表

微信扫一扫：分享