HTML弹性布局以及定位

阳光穿透心脏的1/2处 2024-04-17 06:05 66阅读 0赞

## 弹性布局：display:flex;     block;inline-block;inline;none; ##

弹性容器：在元素上设置了display:flex;的属性即为弹性容器。弹性容器里面的子元素就会按照弹性布局的方式进行布局。

弹性子元素：弹性容器里面的直接子元素即为弹性子元素。

注意：弹性子元素为3个child的div元素，span不属于直接子元素，那么不是弹性布局。

弹性布局主轴：确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。

设置主轴的方向：flex-direction，

row(默认值)：子元素是从左到右进行排布。

Row-reverse: 子元素是从右到左排布

Column:子元素从上到下排布

Column-reverse:子元素从下到上排布。

注意：默认弹性子元素只会排成1行或者是1列。不会换行。

/*设定主轴的排布方式
     justify-content: 
     flex-start(默认);向主轴的开始端靠拢
     flex-end;向主轴的末尾靠拢
     center;内容向中间靠拢
     space-between:平均分布，两边没有边距。
     space-around:平均分布，两边有边距，两边的边距是中间的一半。
     space-evenly;平均分布，两边的边距跟中间的一致
     * 
     * */
    justify-content: space-evenly;
    
    /*设定侧轴的排布
     align-items: 
     stretch(默认值)：拉伸。在不设置子元素高度的情况下，默认会拉伸到跟父元素一致的高度。
     flex-start:靠近侧轴的开端
     flex-end:靠近侧轴的结束端
     center:在侧轴居中
     * 
     * */
    align-items: center;

弹性布局多行排布

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.parent{
    				width: 600px;
    				height: 600px;
    				background: #ccc;
    				margin: 0 auto;
    				display: flex;
    				
    				
    				/*设置弹性可以换行
    				 flex-wrap: 
    				 nowrap(默认);
    				 wrap换行
    				 * */
    				flex-wrap: wrap;
    				
    				/*设置侧轴的多行排布
    				 stretch(默认拉伸)
    				 flex-start:靠近侧轴的开端
    				 flex-end:靠近侧轴的结束端
    				 space-between:平均分布。两边没有间距
    				 space-around:平均分布，两边间距是中间的一半
    				 space-evenly：平均分布，两边的间距跟中间一样
    				 * */
    				align-content:space-evenly ;
    				
    			}
    			
    			.child{
    				width: 200px;
    				height: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="parent">
    			<div class="child" style="background: orange;">1</div>
    			<div class="child" style="background: lawngreen;">2</div>
    			<div class="child" style="background: cyan;">3</div>
    			<div class="child" style="background: orange;">1</div>
    			<div class="child" style="background: lawngreen;">2</div>
    			<div class="child" style="background: cyan;">3</div>
    		</div>
    	</body>
    </html>

剩余空间占据flex

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			html,body{
    				height: 100%;
    			}
    			.page{
    				width: 100%;
    				height: 100%;
    				background: #ccc;
    				display: flex;
    			}
    			.lanmu{
    				/*flex：可以定义剩余空间的占据情况*/
    				background: greenyellow;
    				flex: 1;
    			}
    			.main{
    				background: purple;
    				flex: 2;
    			}
    			.ad{
    				/*width: 200px;*/
    				flex: 1;
    				background: yellow;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="page">
    			<div class="lanmu">栏目1</div>
    			<div class="main">主要内容2</div>
    			<div class="ad">广告</div>
    		</div>
    	</body>
    </html>

弹性子元素的排序

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			#parent{
    				/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
    				display: flex;
    				width: 900px;
    				height: 600px;
    				background: skyblue;
    				margin: 0 auto;
    			}
    			
    			.child{
    				width: 200px;
    				height: 200px;
    				background: pink;
    				
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="parent">
    			<div class="child" style="background: orange;order: 5;">1</div>
    			<div class="child" style="background: lawngreen;order: 3;">2</div>
    			<div class="child" style="background: cyan; order: 4;">3</div>
    			<div class="child" style="background: lawngreen;order: 1;">4</div>
    			<div class="child" style="background: cyan;order: 2;">5</div>
    			
    		</div>
    	</body>
    </html>

弹性子元素侧轴单独设置

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			#parent{
    				/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
    				display: flex;
    				width: 900px;
    				height: 600px;
    				background: skyblue;
    				margin: 0 auto;
    			}
    			
    			.child{
    				width: 200px;
    				height: 200px;
    				background: pink;
    				
    			}
    			
    			.c3{
    				/*单独对侧轴的子元素进行排布。
    				 flex-start
    				 flex-end
    				 stretch
    				 center
    				 * */
    				align-self: center;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="parent">
    			<div class="child" style="background: orange;">1</div>
    			<div class="child" style="background: lawngreen;">2</div>
    			<div class="child c3" style="background: cyan;">3</div>
    			<div class="child" style="background: lawngreen;">4</div>
    			<div class="child" style="background: cyan;">5</div>
    			
    		</div>
    	</body>
    </html>

### HTML定位 ###

相对定位position: relative;相对定位相对于自己当前位置的一个移动。原来空间的位置依然会被占据，只是样子移动。

必须配合：left,right,top,bottom四个属性使元素移动。。

绝对定位position: absolute;相对于设定了定位的父元素或者是祖先元素进行定位。脱离正常的文档流，不占据之前的空间。

必须配合：left,right,top,bottom四个属性使元素移动。。

固定定位position: fixed;相对于浏览器进行定位。脱离正常的文档流，不占据空间。

Z-index:设定在同一位置上定位元素，谁的位置更在前面。数值越大，层越高，越在前面显示。