Web Front-end Basics (04)

Positioning mode 4+1

The position location

Static positioning (document flow positioning): is the default positioning of elements

Format: position: the static
Element display features: block level elements are arranged from top to bottom, inline or inline block elements are arranged from left to right, elements are not easy to achieve the effect of stacking
How to control the position of elements: by margins.

Relative positioning

Format: position: relative
Element display features: Elements do not leave the document flow (elements remain in their original position no matter where they are displayed)
How to control the position of elements: Use top/left/right/bottom to control the display position of elements relative to their initial position
Application scenario: Use relative positioning when you need to move an element without affecting the display effect of other elements. Use relative positioning when you need to fine-tune the position

Absolute positioning

Format: position: absolute
Element display features: Elements out of the flow of the document (they give up their position when set to absolute positioning)
How to control the position of an element: Use top/left/right/bottom to control the position of an element relative to the window (default) or to a parent element (add relative position)
Application scenario: Use absolute positioning if you want to move to a corner of a parent element. Use absolute positioning if you want to add an element to the page and do not want to affect the existing display (that is, outside the document flow)

Fixed position

Format: position: fixed;
Element display features: Elements leave the document flow
How to control position: Use top/left/rigth/bottom to control the position of elements relative to the window.
Application scenario: Elements need to be fixed in a certain position in the window and not change with the content position

Floating positioning

Format: float: left/right;
Display characteristics: Elements leave the document flow, elements float left or right from the current line, and stop when they hit the edge of a parent element or other floating element
How to control element position: by margins
If all of the element’s children float, then the height of the element’s automatic recognition is 0, solved by adding overflow:hidden to the element.
Application scenario: Use the float position ### vertical-align of the elements in the row when you want to change the vertical alignment to horizontal alignment
Top top alignment
Bottom aligned
Middle aligned
Baseline alignment (default)\

Layout practice steps:

Give BIG a width of 1000 and center it with a margin of 0 auto
The div in the first line sets the width and height to float one left and one right
The first and second div lines both set overflow:hidde
The div in the second line is set to width and height, with one left float and three left float

practice

1. Relative positioning

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			div:hover{
				/* If static positioning is the default, moving elements through margins will affect other elements */
				/* margin: 20px 0 0 20px*/
				/* Change to relative positioning */
				position: relative;
				top: 20px;
				left: 20px;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>
Copy the code

Display effect:

2. Absolute path

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			}
			#d1{
			/* Set the absolute location to be removed from the document stream */
			position: absolute;
			/* Coordinates relative to the window instead of itself */
			right: 0;
			bottom: 0;
			}
			#big{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;/* do the position reference */
			}
			#middle{
			width: 100px;
			height: 100px;
			background-color: green;
			margin: 50px 0 050px; } #small{ width: 50px; height: 50px; background-color: blue; | position: absolute; right:0;
			top: 0;

		</style>
	</head>
	<body>
		<div id="big">
			<div id="middle">
				<div id="small">
					
				</div>
			</div>
		</div>
		<div id="d1">
		div1
		</div>
		<div id="d2">
		div2
		</div>
		<div id="d3">
		div3
		</div>
	</body>
</html>
Copy the code

Display effect:

3. Absolute positioning exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#i1{
				width: 100%;
			}
			#i2{
				width: 100px;
				/* Absolute position relative to parent div */
				position: absolute;
				right: 0;
				top: 0;
			}
			#d1{
				border: 1px solid red;
				position: relative;/* reference */} < / style > < / head > < body > < h1 > test absolute positioning < / h1 > < div id ="d1">
			<img id="i1" src=".. / class/web01 / images/late back. JPG" >
			<img id="i2" src=".. /day01/abc/3.png" >
		</div>
	</body>
</html>
Copy the code

Test results:

4. Positioning exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: rgba(0.0.0.0.3);
				width: 280px;
				padding: 10px;
				position: relative;
			}
			input{
				/* Because the inner margin width is added 280-20*2*/
				width: 240px;
				/* Remove the built-in border */
				border: 0;
				padding: 10px 20px;
			}
			img{
				position: absolute;
				top: 14px;
				right: 25px;
			}
			p{
				font-size:12px ;
				color: red;
				margin: 0;
			}
				
		</style>
	</head>
	<body>
		<div>
			<input type="text" placeholder="Please enter your user name" />
			<img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png"> <p> User name cannot be empty! </p> </div> </body> </html>Copy the code

Test effect:

5. Fix the positioning

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				position: fixed;
				background-color: white;
				width: 100%;
			}
			#i1{
				margin-top:100px ;
			}
			#d2{
				width: 80px;
				height: 158px ;
				background-color: blue;
				position: fixed;
				right: 20px;
				bottom: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1"> <h1> Top of the page </h1> </div> <div id="d2">	
		</div>
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
		<img src=".. /2.jpg" >
	</body>
</html>
Copy the code

Display effect:

The content in the red box does not move when scrolling the page

6. Floating location

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body>div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			#d1{
				width: 80px;
				height: 55px;
				background-color: red;
				float: left;
			}
			#d2{
				width: 80px;
				height: 50px;
				background-color: green;
				float: left;
			}
			#d3{
				width: 80px;
				height: 50px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
		<div>
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	<body>
	</body>
</html>
Copy the code

Display effect:

7. Practice at the school mall

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #Awesome!;
			}
			body>div{
				width: 366px;
				height: 233px;
				background-color: #e8e8e8;
			}
			#top_div{
				height: 35px;
				background-color: #0AA1ED;
				border-radius: 2px;
			}
			#top_div>img{
				margin: 8px 0 0 10px;
			}
			#top_div>span{
				color: white;
				font-size: 16px;
				/* Position fine-tuning uses relative positioning */
				position: relative;
				bottom: 3px;
			}
			.c1{
				/* Indent the contents of the div by 10 pixels */
				padding-left: 10px;
			}
			ul{
				list-style-type: none;
				/* Remove the indentation of unordered lists */
				padding: 0;
				/* All the li's in ul are floating */ * all li's in ul are floating */
				overflow: hidden;
				margin-top: 8px;
				margin-bottom: 25px;
			}
			li{
				float: left;
				margin-right: 10px;
			}
			.c1>p{
				color: #62B5EC;
				margin-bottom: 8px;
			}
			li>a{
				color: #0AA1ED;
				text-decoration: none;
			}
			a:hover{
				color: #0a7eb8;
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<div id="top_div">
				<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png"/> <span> Computer, office /1F</span>
			</div>
			<div class="c1"<p> <ul> <li><a href="#"</a></li> <li><a href="#"</a></li> <li><a href="#"</a></li> <li><a href="#"</a></li> <li><a href="#"> Server </a></li> <li><a href="#"</a></li> </ul> </div> <divclass="c1"</p> <ul> <li><a href="#">CPU</a></li>
					<li><a href="#">SSD </a></li> <li><a href="#"> Display </a></li> <li><a href="#"> Video card </a></li> <li><a href="#"</a></li> <li><a href="#"> Chassis </ A ></li> </ul> </div> <divclass="c1"</p> <ul> <li><a href="#"</a></li> <li><a href="#"> Mouse </a></li> <li><a href="#"</a></li> <li><a href="#"</a></li> <li><a href="#"</a></li> <li><a href="#"> smart bike < / a > < / li > < / ul > < / div > < / div > < / body > < / HTML >Copy the code

Display effect:

8. Inline alignment

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 50px;
				/ * inline elements of horizontal alignment: top/bottom/middle/baseline (the default) * /
				vertical-align: baseline;
			}
		</style>
	</head>
	<body>
		<img src=".. /imgs/2.jpg" />
		<input type="text" />
	</body>
</html>
Copy the code

Display effect:

9. Layout exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body>div{
				width: 1000px;
				margin: 0 auto;
				background-color: #0A7EB8;
			}
			#t_left_div{
				width: 611px;
				height: 376px;
				float: left;
			}
			#t_right_div{
				width: 375px;
				height: 376px;
				float: right;
			}
			body>div>div{
				overflow: hidden;/* Solve the height zero problem */
				margin-bottom: 10px;/* The spacing between two lines */
			}
			
			body>div>div>div{/* Add a background color */ to all divs at level 3
				background-color: #e8e8e8;
			}
			#b_left_div{
				width: 366px;
				height: 233px;
				float: left;
			}
			.b_right_div{
					width: 198px;
					height: 233px;
					float: right;
					margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div >
				<div id="t_left_div"></div>
				<div id="t_right_div"></div>
			</div>
			<div >
				<div id="b_left_div"></div>
				<div class="b_right_div"></div>
				<div class="b_right_div"></div>
				<div class="b_right_div"></div>
			</div>
		</div>
	</body>
</html>
Copy the code

Display effect:

To be continued… Web Front End Foundation (01) Web Front End Foundation (02) Web Front End Foundation (03) Web Front End Foundation (04) Web Front End Foundation (05) Web Front End Foundation (06) Web Front End Foundation (07) Web Front End Foundation (08) Web Front End Foundation (09) \

Positioning mode 4+1

The position location

Floating positioning

Layout practice steps:

practice

Related Posts

Online CAD platform, H5 front-end display CAD, webpage CAD

Python Visual Development -2: Getting Started with PyQt5

Flutter 2.5 has been released with several major updates