您的位置：首页 > Web前端 > HTML

html 盒子模型基础（单位，边框，内边距，外边距）（一）

2017-02-07 09:08 579 查看

1.单位

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

.box1{

/*
*
* 长度单位
*
* 	px(像素)
* 		- 我们的屏幕实际上是由一个一个的小点点构成的，一个小点点就是一个像素
* 		- 不同的显示器中单个像素的大小是不同的，越清晰的显示器单位像素就越小
* 		- 像素是开发中用的最多的单位
*
*  %(百分比)
* 		- 也可以将长度设置一个百分数，此时元素的长度将会根据父元素的对应属性去计算
* 		- 使用百分比的值，元素会自动根据父元素的属性去计算长度，
* 			当父元素的值发生变化时，子元素会随之等比例变化
* 			在一些自适应的页面中，会大量的使用百分比的值
*
*
* 颜色单位
* 		- 在CSS可以直接使用颜色的单词来为元素设置颜色
* 		- 但是仅仅使用颜色的单词来表示颜色，使用起来不太方便
*
* 		- 也可以使用RGB值来设置颜色
* 			- 所谓的RGB就是光的三元色Red Green Blue
* 			- 通过这三种颜色的不同的浓度可以组合出任意的颜色
* 			- 语法：
* 				rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* 				- 浓度可以指定一个0-255之间的值，
* 					0 表示没有  255表示最大
* 				- 浓度也可以接收一个百分比0% - 100%
* 					- 最终百分比也会转换为0-255
* 						0%  0
* 						100% 255
*
* 		- 十六进制的RGB值
* 			- 可以使用三组两位的十六进制的数字来表示RGB值
* 			- 语法：#红色绿色蓝色
* 			- 十六进制
* 			0 1 2 3 4 5 6 7 8 9 a b c d e f
* 			00 ~ ff
* 			00 表示 没有
* 			ff 表示 最大
*
*
* 	- 如果十六进制的RGB值，两位两位是重复的
* 		像 #aabbcc #112233
* 		可以进行简写
* 			#aabbcc --- > #abc
* 			#112233 --- > #123
*
*/

width: 200px;
height: 200px;
/*background-color: rgb(9,126,84);*/
/*background-color: rgb(100%,0%,0%);*/
/*background-color: #ff0000;*/
/*background-color: #FFFAE8;*/
/*background-color: #abc ;*/
background-color: #bfa;

}

/*.box2{
width: 50%;
height: 50%;
background-color: yellow;
}*/

</style>
</head>
<body>

<div class="box1">

<div class="box2"></div>

</div>

</body>
</html>

2.盒子模型基本概述：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">

.box1{
/*
width和height是用来设置盒子内容区的大小

整个盒子的可见框的大小由内容区 内边距 和 边框共同决定
* */
width: 200px;
height: 200px;
background-color: #bfa;

/*

* 设置盒子的边框
* 	- 要设置盒子的边框，至少要设置三个样式
* 		border-width
* 			- 边框的宽度
*		border-color
* 			- 边框的颜色
* 		border-style
* 			- 边框的样式
* */

/*
* 设置边框的宽度
* 		- 通过border-width可以同时指定四个边框的宽度
* 			也可以分别指定
*
*/
/*border-width: 10px;*/
/*
如果同时指定四个值，则会分别设置 上 右 下 左 四个边框的宽度
* */
/*border-width: 10px 20px 30px 40px;*/

/*
如果指定三个值，则顺序是 上 左右 下
* */
/*border-width: 10px 20px 30px;*/

/*
如果指定两个值 上下 左右
* */
/*border-width: 10px 20px;*/

/*
如果只指定一个值，则四个方向都是该值
* */
border-width: 10px;

/*设置边框的颜色*/
border-color: red;

/*border-color: red orange yellow blue;  */
/*border-color: red orange yellow ;  */

/*
* 设置边框的样式

* - border-style可以用来设置边框的样式
* 		- 可选值
* 			solid 实线边框
* 			dotted 点状虚线边框
* 			dashed 虚线边框
* 			double 双线边框
*
*
* */
border-style: double;

/*border-style: solid dotted dashed double;*/

}

</style>

</head>
<body>

<div class="box1"></div>

</body>
</html>

效果：

3.边框：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: yellow;

/*设置边框*/
/*
除了border-width
在CSS中还为我们提供了border-xxx-width四个属性
分别设置四个边的宽度
此处：xxx可能是 top right bottom left
*/
/*border-width: 10px;*/
/*border-top-width: 100px;
border-left-width: 50px;*/

/*border-color: orange;*/
/*border-top-color: red;
border-bottom-color: bisque ;*/

/*border-style: solid;*/
/*border-bottom-style:double ;*/

/*
在CSS还为我们提供了一个border的样式
这个样式是边框的简写样式，通过它可以同时设置四个边的宽度 颜色和样式
使用border设置样式对于属性的顺序没有要求
但是注意，一旦使用border来设置边框，就是同时指定四个边框
* */
/*border: orange solid 10px  ;*/

/*

* 除了border，还有四个样式
* 		border-top
* 		border-left
* 		border-right
* 		border-bottom
* 		- 这四个的用法和border一样，只不过他们是单独设置某一个边的
*
*
* */

/*border-top: 10px solid orange ;
border-left: 10px solid orange ;
border-bottom: 10px solid orange ;*/

border: 10px solid orange;

}

</style>
</head>
<body>

<div class="box1"></div>

</body>
</html>

效果：

4.内边距：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px blue solid;
/*
* 默认情况下整个盒子的可见框的大小，由内容区 边框 和 内边距共同决定
*
内边距（padding）
- 内容区和边框之间的距离称为内边距
- 一个盒子中有四个方向的内边距，分别使用：
padding-top
padding-right
padding-bottom
padding-left
四个样式来设置

内边距也会影响到盒子的可见框的大小，所以如果设置完内边距
还希望盒子大小不变的话，则需要将增加的内边距从内容区中减去

背景会自动延伸到内边距上
* */

/*上内边距*/
/*padding-top: 100px;*/

/*右内边距*/
/*padding-right: 100px ;
padding-bottom:100px ;
padding-left: 100px;*/

/*
通过padding，可以同时设置四个方向的内边距
规则和border-width一样
* */
/*padding: 10px;*/

/*padding: 10px 20px;*/

/*padding: 10px 20px 30px;*/

padding: 10px 20px 30px 40px;
}

.box2{
/*
* box2是box1的子元素
* 	子元素都是在父元素的内容区存在的
*
* box2和box1的内容区一样大
*/
width: 100%;
height: 100%;
background-color: yellow;
}

</style>
</head>
<body>
<div class="box1">

<div class="box2"></div>

</div>
</body>
</html>

效果：

5.外边距:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;

/*
外边距（margin）
- 外边距表示当前盒子与其他盒子之间距离，
外边距不会影响盒子可见框的大小，但是会影响盒子的位置
- 一共有四个方向的外边距
margin-top
margin-left
margin-right
margin-bottom

由于元素在页面中默认是靠左靠上显示的，
所以默认情况下，我们修改左外边距和上外边距时，会影响当前元素的位置
而修改右和下外边距时会影响其他元素的位置

* */

/*设置上外边距*/
/*margin-top: 100px;*/
/*设置左外边距*/
/*margin-left: 100px;*/

/*设置一个下外边距*/
/*margin-bottom: 100px;*/

/*

* 	可以通过margin来同时指定四个方向的外边距
* 		规则和padding一样的
* */
/*margin: 100px;*/
/*margin: 100px 200px 300px 400px;*/

/*
外边距可以设置为一个负值，如果margin值为负数时，元素会向相反的方向移动
* */
/*margin-top: -100px;*/

/*
margin还可以设置为auto
- 当将左右外边距同时设置为auto时，浏览器会将元素的左右外边距设置为相等的值
此时当前元素将会在它的父元素中水平居中，所以我们常常将水平外边距设置为auto来设置水平居中
*
* */
/*margin-right: auto;
margin-left: auto;*/

/*使元素在父元素中水平居中*/
margin: 0 auto;

}

.box2{
width: 500px;
height: 100px;
background-color: yellow;
}

</style>
</head>
<body>

<div class="box1"></div>

<div class="box2"></div>

</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html 经验

相关文章推荐

新的分享

章节导航