1.理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系

1、box-sizing功能并实例演示;

<!DOCTYPE html>

<html lang="en">
<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>
/ 代码的初始化 /
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/ :root===html /
:root{
/ 浏览器默认：font-size: 16px ; /
/ 为了便于计算和使用方便 /
font-size: 10px;
}
/ em,rem /
/ em:根据元素的上下文来确定它的值； /
/ rem:根据根元素的字号来设置 /
/ 将W3C的标准盒子转为IE的盒子 /
/ 就是将盒子的padding和border计算在它的width和height内； /
/ 就用box-sizing /
/ box-sizing: border-box; /
/ 当前盒子的边际在那里，当前盒子不在内容区，而是到了边框，这时候内容区就会被压缩。
内容区始终包含了内边距和边框的*/
.box{
width: 20em;
height: 20em;
padding: 10px;
margin: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<p>1. 理解 box-sizing功能并实例演示; </p>
<p> 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系</p>
<div class="box">
</div>
</body>
</html>

2、相对定位与绝对定位，并实例演示他们的区别与联系

<!DOCTYPE html>

<html lang="en">
<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>定位</title>
<style>
body{
border: 2px solid red;
}
/ relative相对定位（相对于自身定位） /
.box{
width: 10rem;
height: 10rem;
background-color: aquamarine;
/ position: static;静态定位，没有定位，默认 /
/ position: static; /
/ 相对定位，自动的转为定位元素了 /
/ 定位元素：只要这个元素上有非static的定位属性，就是定位元素 /
position: relative;
/ 只要有定位元素，定位偏移就有效了 /
top:5rem;
left: 10rem;
font-size: 5rem;
}
/ absolute:绝对定位，根据父元素定位，脱离了文档流 /
/ 文档流：显示顺序与书写顺序一致 /
/ 相对于它在原始文档流中的位置进行定位 /
.box1{
height: 10rem;
border: 2px solid aquamarine;
position: relative;
}
.box2{
width: 10rem;
height: 10rem;
background-color: rgb(253, 72, 238);
position: absolute ;
left: 10rem;
top:12rem;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="box">box</div>
<h1></h1>
<div class="box1">
<div class="box2">box1</div>
<h2>PHP学习</h2>
</div>
</body>
</html>

1、box-sizing功能并实例演示;

2、相对定位与绝对定位，并实例演示他们的区别与联系

更多相关文章

随机推荐