当前位置：网站首页>盒子模型与元素定位

盒子模型与元素定位

2022-07-15 13:55:00 【菇毒】

盒子模型与元素定位

1. 盒子模型
2. 元素定位
2.1 float 定位
2.2 position 定位
2.3 z-index 空间位置
2.4 文字阴影效果

1. 盒子模型

一个盒子模型有内容（content）、边框（border）、间隙（padding）、间隔（margin），4 部分组成；
20220524
盒子的实际宽度（或高度）由 content + padding + border + margin 组成；
通过设置 width 与 height 的值能控制 content 的大小，并对于任何一个盒子，都能分别设置4条边框 border、padding、margin；

2. 元素定位

2.1 float 定位

float 属性的参数有 left、right 或默认 none，当设置元素向右向左浮动时，元素回向父元素的左侧或右侧靠近；
例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float 属性</title>
		<style type="text/css"> body{
       margin: 15px; font-family: Arial;font-size: 12px; } .father{
       background-color: #ff0; border: 1px solid #333; padding: 25px; } .sn1{
       padding: 10px; margin: 5px; background-color: #ffff00; border: 1px dashed #333; float: none; } .sn2{
       padding: 5px; margin: 0px; background-color: #ffd270; border: 1px dashed #333; } </style>
	</head>
	<body>
		<div class="father">
			<div class="sn1">float3</div>
			<div class="sn2">float4</div>
		</div>
	</body>
</html>

20220524
若 sn1设置了float的值为 right 时，会有如下效果：

2.2 position 定位

position 定位是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置；
position 属性的参数分别有：static、absolute、relative、fixed；
例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>position 属性</title>
		<style type="text/css"> #father{
       background-color: #ffff66; border: 1px dashed #000; width: 100%; height: 100%; padding: 5px; } #bck1{
       background-color: #fff0ac; border: 1px dashed #000; padding: 10px; position: relative; /* 相对定位 */ left: 30px; top: 35px; } #bck2{
       background-color: #ffbd76; border: 1px dashed #000; padding: 10px; } </style>
	</head>
	<body>
		<div id="father">
			<div id="bck1">reative</div>
			<div id="bck2">block2</div>
		</div>
	</body>
</html>

20220524 块1 的position 属性值为 relative，块1现在是相对于页面的相对定位（即在其默认显示的位置上，通过上下左右四个参数设置偏移一定的距离，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置）；

2.3 z-index 空间位置

z-index 属性用于调整定位时重叠的上下位置，即想象页面为 x-y 轴，垂直页面的方向为 z轴，z-index 值大的页面位于其值小的上方；
注意：z-index 属性的值为整数，能是正值或负值；当块被设置了position 属性时，该值便能设置各块之间的重叠高低关系；默认的 z-index 值为 0；当两个块的 z-index 值一样时，将保持原有的高低覆盖关系；

例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index属性</title>
		<style type="text/css"> body{
       margin: 10px; font-family: Arial; font-size: 13px; } #b1{
       background-color: yellow; border: 1px dashed #000000; padding: 10px; position: absolute; left: 20px; top: 30px; z-index: -1; /* 高低值 -1 */ } #b2{
       background-color: red; border: 1px dashed #000000; padding: 10px; position: absolute; left: 40px; top: 50px; z-index: 0; /* 高低值 0 */ } #b3{
       background-color: greenyellow; border: 1px dashed #000000; padding: 10px; position: absolute; left: 60px; top: 70px; z-index: 1; /* 高低值 1 */ } </style>
	</head>
	<body>
		<div id="b1">AAAAAAA</div>
		<div id="b2">BBBBBBB</div>
		<div id="b3">CCCCCCC</div>
	</body>
</html>

20220524

2.4 文字阴影效果

例子 4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字阴影效果</title>
		<style type="text/css"> body{
       margin: 18px; font-family: 楷体; font-size: 60px; font-weight: bold; } #b1{
       position: relative; z-index: 1; } #b2{
       color: red; /*阴影颜色*/ position: relative; top: -1.06em; /*移动阴影*/ left: 0.3em; z-index: 0; /*阴影重叠关系*/ } </style>
	</head>
	<body>
		<div id="father">
			<div id="b1">定位阴影效果</div>
			<div id="b2">定位阴影效果</div>
		</div>
	</body>
</html>