一、盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
/*
内容区(content),元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width设置内容区的宽度
height设置内容区的高度
*/
width: 200px;
height: 200px;
background-color: aquamarine;
/*
边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框,需要至少设置三个样式:
边框的宽度border-width
边框的颜色border-color
边框的样式border-style
*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<!--
盒模型、盒子模型、框模型(box model)
css将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成:
内容区( content)
内边距(padding)
边框( border)
外边距(margin)
-->
<div class="box"></div>
</body>
</html>
二、boder-xxx属性及简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
/*
boder-width不写,也会有默认值,大概是3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况:
四个值:上 ,右, 下 ,左
三个值:上 ,左右, 下
两个值:上下, 左右
一个值:上下左右
除了border-width还有一组border-xxx-width
xxx可以是top right bottom left
用来单独指定某一个边的宽度
*/
border-width: 10px;
/*
border-color用来指定边框的颜色,同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值
*/
border-color: orange;
/*
border-style指定边框的样式
solid表示实线
dotted点状虚线
dashed虚线
double双线
border-style的默认值是none,表示没有边框
*/
border-style: solid;
/*
border简写禹性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求,例如:
border: 10px blue solid;
除了border以外还有四个border-xxx
border-top
border-right
border - bottom
border-left
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
内边距(padding):
内容区和边框之间的距离为内边距
一共有4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一个盒子的可见框的大小,由内容区、内边距和边框共同决定,
所以在计算盒子大小时,需要将这三个区域加到一起计算
padding内边距的简写属性,可以同时指定四个方向的内边距
规则和border-width一样,例如:
padding: 10px 20px 30px 40px
*/
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
.inner{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
四、外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
外边距(margin)
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距:
margin-top
上外边距,设置一个正值,元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距,设置一个正值,其下边的元素会向下移动
margin-left
左外边距,设置一个正值,元素会向右移动
margin也可以设置负值,如果是负值则元素会向相反的方向移动
元素在页面中是按照自左向右的顺序排列的,
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
margin的简写属性
margin可以同时设置四个方向的外边距,用法和padding一样
margin会影响到盒子实际占用空间
*/
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>