zoukankan      html  css  js  c++  java
  • css盒子模型

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    <!-- 		css盒子模型组成:
    		conter  > padding  > border > margin
    		物品         填充物      包装盒     盒子与盒子之间的间距
    		conter 内容区域 width和height组成
    		1.padding 内边距(内填充)  
    		只写一个值  30px(上下左右)
    		写二个值    30px 50px(上下,左右)
    		写四个值   10px 20px 30px 40px(上 右 下 左)
    		单一样式只能写一个值
    			padding-left
    			padding-top
    			padding-right
    			padding-bottom
    		2.margin外边距(外填充)
    		只写一个值  30px(上下左右)
    		写二个值    30px 50px(上下,左右)
    		写四个值   10px 20px 30px 40px(上 右 下 左)
    		单一样式只能写一个值
    			margin-left
    			margin-top
    			margin-right
    			margin -bottom
    	注意:
    		1.背景颜色会填充到margin以内的区域(不包括margin)
    		2.文字在content中添加(width,height)
    		3.padding不能为负数,margin能负数(如果选择负数,即使上下左右有盒子依然可以填充)
    -->
    	 	<style>
    			body{
    				 1000px;
    				height: 1000px;
    			}
    			#Hz_01{
    				 100px;
    				height: 100px;
    				background-color: red;
    				border: 10px dashed #0000FF;
    				/* padding-left: 100px; */
    				padding: 100px 20px 30px 100px;
    				background: url(../11/2.jpg);
    			}
    			#Hz_02{
    				 100px;
    				height: 100px;
    				background-color: #000000;
    				margin-top: 10px;
    				margin: 10px 20px 30px 40px;
    				margin: -40px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="Hz_01">这是一个盒子(padding)</div>
    		<div id="Hz_02">这是二个盒子(margin)</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    微信公众平台开发入门教程
    Android中自定义View和自定义动画
    asp.net实现大视频上传
    网页大文件上传解决方案
    php大文件上传解决方案
    asp.net大文件上传解决方案
    asp.net上传超大文件
    JSP上传整个文件夹
    超大文件上传方案(PHP)
    超大文件上传方案(ASP.NET)
  • 原文地址:https://www.cnblogs.com/wsx123/p/15768301.html
Copyright © 2011-2022 走看看