首页 前端知识 HTML_CSS_盒子模型

HTML_CSS_盒子模型

2024-10-15 23:10:11 前端知识 前端哥 615 52 我要收藏

盒子模型组成 

  1. 内容区域(comtent)
  2. 内边距区域(padding)
  3. 边框区域(border)
  4. 外边距区域(margin)

 布局标签

 标签:<div>  </div>        和        <span>  </span>

  1. 特点:<div>一行只显示一个        宽度默认是父亲宽度        高度由内容撑开        可以设置宽高        <span>一行可以显示多个        高度由内容撑开        不可以设置宽高 
  2. 应用:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#nav-max {
    				width: 1200px;
    				margin: 0px auto;
    				box-sizing: border-box;
    			}
    
    			#nav-max1 {
    				width: 600px;
    				margin: 0px auto;
    				box-sizing: border-box;
    				position: relative;
    			}
    
    			#nav-max2 {
    				width: 1200px;
    				margin: 0px auto;
    				box-sizing: border-box;
    			}
    
    			#nav-max3 {
    				width: 1200px;
    				height: 500px;
    				margin: 15px 15px;
    				padding: 10px;
    				margin: 0px auto;
    				box-sizing: border-box;
    				border: 1px red solid;
    			}
    
    			#nav-min1 {
    				background-color: beige;
    				float: left;
    				padding: 10px 43px;
    			}
    
    			#nav-min1:hover {
    				background-color: coral;
    				color: #fd0000;
    			}
    
    			#nav-min2 {
    				width: 300px;
    				height: 500px;
    				margin: 15px 15px;
    				padding: 10px;
    				border: 1px red solid;
    				float: left;
    				background-color: bisque;
    			}
    
    			#nav-min3 {
    				width: 440px;
    				height: 500px;
    				margin: 15px 15px;
    				float: left;
    			}
    
    			#img1 {
    				position: absolute;
    				width: 82px;
    				right: 700px;
    			}
    
    			#img2 {
    				width: 440px;
    				height: 520px;
    				position: relative;
    			}
    
    			#box_img2_left {
    				top: 300px;
    				background-color: #fd0000;
    				position: absolute;
    			}
    
    			#box_img2_right {
    				top: 300px;
    				right: 0px;
    				background-color: #fd0000;
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="nav-max">
    
    			<div id="nav-max1">
    				<img id="img1"
    					src="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png" />
    				<div id="nav-min1">网站首页</div>
    				<div id="nav-min1">产品案例</div>
    				<div id="nav-min1">公司介绍</div>
    				<div id="nav-min1">联系我们</div>
    				<div style="clear:left"></div>
    			</div>
    			<div id="nav-max2">
    				<div id="nav-min2">
    					<ul>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    						<li></li>
    					</ul>
    				</div>
    				<div id="nav-min3">
    					<img id="img2"
    						src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100071377749/FocusFullshop/CkJqZnMvdDEvMjM1MDcwLzgvMTQyOTUvMjcyMDYvNjVkYjkyZmNGYjlmMGYxYjgvOWQ5NTA0NjI5YjVkY2FmMC5wbmcSCTMtdHlfMF81NDACOO6LekIQCgzlsI_nsbPmiYvmnLoQAUITCg_niannvo7ku7fmm7TkvJgQAkIQCgznq4vljbPmiqLotK0QBkIKCgbkvJjpgIkQB1jVluDl9AI/cr/s/q.jpg"
    						alt="显示失败" />
    					<div><span id="box_img2_left">
    							< </span>
    					</div>
    					<div><span id="box_img2_right">></span></div>
    				</div>
    				<div id="nav-min2">
    					123
    				</div>
    				<div style="clear:left"></div>
    			</div>
    			<div id="nav-max3">
    				123456
    			</div>
    
    		</div>
    	</body>
    </html>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18974.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!