弹性盒子模型

weixin_58732695

已于 2022-04-29 14:14:22 修改

阅读量93

点赞数

文章标签： css html5

于 2022-04-23 17:40:35 首次发布

本文链接：https://blog.csdn.net/weixin_58732695/article/details/124359215

版权

弹性盒子模型

布局模式

1.table布局：内容格式整齐

2.div+css盒子模型：灵活，不好控制

3.dispaly:flex 也使用div，弹性盒子模型

基本概念：flex container容器，块级标签，可包含其他元素；flex item项目，包含在容器中的元素；排列方式direction元素的布局方向

容器属性：

1.flex-direction定义容器中元素的布局方式水平row（默认从左到右) row-reverse 竖直 column column-reverse

2.flex-wrap是否换行 nowrap wrap换行，(第一行在上方)（容器宽度小于项目整体加起来宽度）wrap-reverse(表示第一行在下方）

3.flex-flow是direction和wrap的简写默认为row nowrap

4.justify-content子项的对齐方式 flex-start默认左对齐；flex-end右对齐；space-between两端对齐，子项之间的宽度是相等的；space-around环绕对齐，子项两侧的间距相等；center居中

5.align-items单根轴线对齐 flex-start 交叉轴起点对齐flex-end center stretch第一个子项不设置高度或设置为auto时，被整个容器高度填满； baseline 第一个子项基线对齐

6.align-content 多跟轴线对齐方式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU4NzMyNjk1,size_11,color_FFFFFF,t_70,g_se,x_16

项目属性：order：数值越小，排列越靠前，不设置的order为0；flex-grow项目的放大比例（占用剩余空间）默认值为0；flex-shrink默认值为1，表示空间不足时自动缩小，设置为0表示不缩小；align-self允许单个项目与其他项目有不一样的对齐方式，默认为auto，继承了align-items属性

flex-basis：项目初始宽度；flex项目所占份数

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU4NzMyNjk1,size_16,color_FFFFFF,t_70,g_se,x_16

<!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>
</head>
<style>
     .holy{
       display: flex;
       flex-direction: column;
       background-color: antiquewhite;
       min-height: 100vh;
     }
     header,footer{
         flex: 1;
         line-height: 15vh;
         background-color: aqua;
     }
     #top{
        flex: 1;
         line-height: 15vh;
         background-color:red;
     }
     .body{
        display: flex;
        background-color: bisque;
     }
     .content{
         line-height: 30vh;
        flex:1;
        background-color: black;
       
     }
     .shang,.b{
       display: flex;
       height: 50%;
     }
     .shang{
       flex-direction: row;
       display: flex;
       background: chartreuse;
     }
     .a1{
         background-color:plum;
     }
     .a2{
         background-color: antiquewhite;
     }
     .a1,.a2{
         width: 50%;
         height: 100%;
     }
     .b{
         background-color:yellow ;
     }
     .nav,.aside{
         background-color: brown;
         flex: 0 0 12em;
         
     }
     .nav{
         order:-1;
         background-color: blue;
     }


</style>
<body class="holy">
    <div id="top">topinfo</div>
    <header id="header">header</header>
    <div class="body">
        <main class="content">
            <div class="shang">
            <div class="a1">a1</div>
            <div class="a2">a2</div>
            </div>
            <div class="b">b</div>
        </main>
        <nav class="nav">left</nav>
        <aside class="aside">right</aside>
    </div>
    <footer id="footer">footer</footer>
</body>
</html>

@charset "utf-8";/*清除浏览器默认样式*/

@font-face注册字体

案例：风中的麦浪

<!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>
    <link rel="stylesheet" href="./6.css">
</head>
<div class="box-video">
    <video src="./video/1.mp3"></video>
     <div class="cd">
         <div class="center"></div>
     </div>
     <div class="song">
         <h2>风中的麦浪</h2>
         <p>
              爱过的地方<br>
              爱过的地方<br/>
              当微风带着收获的味道<br/>
              吹向我脸庞<br/>
              想起你轻柔的话语<br/>
              曾打湿我眼眶<br/>
              嗯…啦…嗯…啦…<br/>
              我们曾在田野里歌唱<br/>
              在冬季盼望<br/>
              却没能等到阳光下</p>
     </div>
    </div>
    
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*清除浏览器默认样式*/
*{margin:0; padding:0;}
/*整体控制音乐播放界面*/
#box-video{
	width:100%; 
	height:100%;
	position:absolute; 
	overflow:hidden;
	}
/*唱片部分*/	
.cd{
	width:422px;
	height:422px;
	position:absolute;
	top:25%;
	left:10%;
	z-index:2;
	border-radius:50%;
	border:10px solid #FFF;
	box-shadow:5px 5px 15px #000;
	background:url(images/cd_img.jpg) no-repeat;
	}
.center{
	width:100px;
	height:100px;
	background-color:#000;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px; 
	margin-top:-50px;
	z-index:3;
	border:5px solid #FFF;
	background-image:url(images/yinfu.gif);
	background-position: center center;
	background-repeat:no-repeat;
	}
/*歌词部分*/	
.song{
	position:absolute;
	top:25%;
	left:50%;
	}
@font-face{
	font-family:MD; 
	src:url(font/MD.ttf);
	}
h2{
	font-family:MD; 
	font-size:110px; 
	color:#913805;
	}
p{ 
	width:556px;
	height:300px;
	font-family:"微软雅黑";
	padding-left:30px;
	line-height:30px;
	background:url(images/) repeat-x;
	box-sizing:border-box;
	}