学习盒子模型＜一＞

2021/7/29 23:06:06

编程Tag： 模型边框 width 学习 border margin padding 盒子

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

盒子模型

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

盒子的属性

外边界

属性名称解释
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
```

属性名称	解释
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距
margin	上、右、下、左
margin	上右、下左
margin	上、左右、下
margin	居中

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>

效果图：

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

学习盒子模型＜一＞

盒子模型

盒子的属性

相关编程文章