Java教程

学习盒子模型＜一＞

本文主要是介绍学习盒子模型＜一＞，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 盒子模型

        盒子模型时具有内容（content）（盒子里面装的东西）、内边距（padding)（盒子里面内容到盒子边缘的距离）、边框（border）（盒子本身）、外边距（margin）（盒子周围的其他元素到盒子边框的距离。）属性的HTML元素。

盒子的属性

  1. 外边界

  1. 属性名称解释
    margin-top上外边距
    margin-right右外边距
    margin-bottom下外边距
    margin-left左外边距
    margin上、右、下、左
    margin上右、下左
    margin上、左右、下
    margin居中
    margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 1px 400px 3px;      
margin: 0 auto

2.边框

属性名称解释
border-width边框宽度
border-style边框风格
border-color边框颜色
border宽度、风格、颜色
border-top:5px dashed red;           上边框
border-right: 7px dotted blue;       右边框
border-bottom: 10px groove #808080;  底边框
border-left: 20px solid green;       左边框
注释:用的上表中第四个格式
double 双线
solid实线
dashed虚线
dotted圆点
groove凹槽

3.内边界

属性名称解释
padding-top上内边距
padding-right右内边距
padding-bottom下内边距
padding-left左内边距
padding上右下左
padding上下、左右
border-radius: 30px;  将盒子的四个角设置为园角度的
padding-top: 10x 2px 4px 5px;
padding-right: 1px 5px;
注释：
1.浮动可以让块元素呈现行元素的特诊，且高度保持不变。（float）
2.占位宽度：width+padding（左右）+border（左右）+margin（左右）
3.占位高度：width+padding（左右）+border（左右）+margin（左右）
4.box-shadow:偏移   格式;  box-shadow:10px,10px,10px    x轴，y轴，虚化值
5.over flow:scroll 滚动条 横竖都有
           :auto 哪里溢出，哪里就有滚动条
           :visible 溢出显示
           :hidden 隐藏溢出

盒子模型初步练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>block</title>
		<style type="text/css">
			.body1{
				margin: 0px;
			}
			.div_top{
				width: 900px;
				height: 150px;
				background-color: deepskyblue;
				margin: 0 auto;
			}
			.div_main{
				width: 900px;
				height: 700px;
				background-color: aquamarine;
				margin: 0 auto;
			}
			.div_left{
				width: 200px;
				height: 100%;
				background-color:pink;
				float:left
			}
			.div_center{
				width:500px;
				height: 100%;
				background-color: #ccc;
				float:left
			}
			.div-right{
				width: 200px;
				height: 100%;
				float:left
				background-color: lightyellow;	
			}
		</style>	
	</head>
	<body class="body1">
		<div class="div_top"></div>
		<div class="div_main">
			<div class="div_left"></div>
			<div class="div_center"></div>
			<div class="div-right"></div>
		</div>
	</body>
	
</html>

效果图：

这篇关于学习盒子模型＜一＞的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航