当前位置：网站首页>Box model and element positioning

Box model and element positioning

2022-07-27 21:28:00 【Mushroom poison】

Box model and element positioning

1. Box model
2. Element localization
2.1 float location
2.2 position location
2.3 z-index Space location
2.4 Text shadow effect

1. Box model

A box model has content （content）、 Frame （border）、 The gap （padding）、 interval （margin）,4 Part of it is made up of ;
20220524
The actual width of the box （ Or height ） from content + padding + border + margin form ;
By setting width And height The value of can be controlled content Size , And for any box , Can be set separately 4 Borders border、padding、margin;

2. Element localization

2.1 float location

float The parameters of the attribute are left、right Or default none, When the setting element floats to the right and left , The element moves back to the left or right of the parent element ;
Example 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float  attribute </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
if sn1 Set up float The value of is right when , It will have the following effects ：

2.2 position location

position Positioning is to specify the location of the block , That is, the position of the block relative to its parent block and its position relative to itself ;
position The parameters of the attribute are ：static、absolute、relative、fixed;
Example 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>position  attribute </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; /*  Relative positioning  */ 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 block 1 Of position The property value is relative, block 1 Now it's relative positioning relative to the page （ That is, in its default display position , Set the offset by a certain distance through four parameters up, down, left and right , Only the displayed effect is offset , But it still occupies its original position ）;

2.3 z-index Space location

z-index Property is used to adjust the upper and lower positions of overlap when positioning , Imagine that the page is x-y Axis , The direction of the vertical page is z Axis ,z-index Pages with large values are above those with small values ;
Be careful ：z-index The value of the property is an integer , Can be Comes at a time or negative ; When the block is set position Attribute , This value can set the overlap height relationship between blocks ; default z-index The value is 0; When two blocks z-index When the value is the same , The original high and low coverage relationship will be maintained ;

Example 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index attribute </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; /*  High and low values  -1 */ } #b2{
       background-color: red; border: 1px dashed #000000; padding: 10px; position: absolute; left: 40px; top: 50px; z-index: 0; /*  High and low values  0 */ } #b3{
       background-color: greenyellow; border: 1px dashed #000000; padding: 10px; position: absolute; left: 60px; top: 70px; z-index: 1; /*  High and low values  1 */ } </style>
	</head>
	<body>
		<div id="b1">AAAAAAA</div>
		<div id="b2">BBBBBBB</div>
		<div id="b3">CCCCCCC</div>
	</body>
</html>

20220524

2.4 Text shadow effect

Example 4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Text shadow effect </title>
		<style type="text/css"> body{
       margin: 18px; font-family:  Regular script ; font-size: 60px; font-weight: bold; } #b1{
       position: relative; z-index: 1; } #b2{
       color: red; /* Shadow color */ position: relative; top: -1.06em; /* Move shadow */ left: 0.3em; z-index: 0; /* Shadow overlap relationship */ } </style>
	</head>
	<body>
		<div id="father">
			<div id="b1"> Position shadow effect </div>
			<div id="b2"> Position shadow effect </div>
		</div>
	</body>
</html>