![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0657ebd39749b8bd91d75946a99262c8.png)
一个盒子的组成部分:
在css中一个盒子的组成部分
内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子的主要属性:
在css中一个盒子的组成部分
内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子的主要属性:
width、height、padding、border、margin。
边框的样式:
单词 | 样式 |
---|---|
none | 没有边框 |
dotted | 点线 |
dashed | 虚线 |
solid | 实线 |
double | 双线 |
groove | 槽线 |
ridge | 脊线 |
inset | 凹边 |
outset | 凸边 |
外边距:
外边距是元素边框与周围元素相距的空间。
使用margin属性可以设置外边距。
用法和padding类似,同样也提供了四个方向的 margin-top/right/bottom/left。
当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码margin:0 auto可 以使元素居中
可见框的大小:
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距, 盒子的大小由内容区、内边距和边框共同决定。因此:
盒子可见框的宽度
= border-left-width + padding-left + width + padding-right + border-right-width
盒子可见宽的高度
= border-top-width + padding-top + height + padding-bottom + border-bottom-width
如何计算一个盒子的总宽度:
一个盒子的总宽度=盒子里面内容的长度+左右两边的填充+左右两边的边框线
注意:一个盒子的高度一般情况下是不用设置的,因为一个盒子的高度他应该是由其内容来决定的。
其代码如下:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
padding:20px; /*内填充 盒子里面内容到边框的距离*/
border:1px solid #f00; /*外边框*/
}
</style>
</head>
<body>
<div class="box">这是我的第一篇博客</div>
</body>
</html>
提到盒子就不得不讲的两个属性 : margin(外边距 )跟(padding) 内填充。
pdding是内填充的意思 指的是盒子中间的内容到边框之间的距离。padding 是有四个方向的 所以我们能够分别的描述 这四个方向的padding 方法有两种 :第一种 我们称之为小属性,第二种我们称之为简写属性
小属性:
padding-top 上内填充
padding-right 右内填充
padding-bottom:下内填充
padding-lift 左内填充.
简写属性:
padding:
这个属性是有方向的 , 内边距,也叫补白,表示盒子内容区域到边框的区域可以同时表示四个方向 这个属性的方向是有顺序的。
顺序是 顺时针的方向 也就是 上右下左 这个顺序
padding:10px 20px 30px 40px; 他的内边距为上边距10px,右边距为20px 下边距为30px 左边距为40px
margin:
margin 外边距,使用margin表示盒子与盒子之间的距离 ,他表示及外边距的意思 它是指盒子与盒子之间的距离
margin 他也是有四个方向的 所以我们能够通过四个方向对其进行描述
方法有两种:第一种我们称之为小属性,第二章我们称之为简写属性.
小属性
- margin-top:上外边距
- margin-right:右外边距
- margin-bottom:下外边距
- margin-left :做外边距
简写属性
- margin:简写属性它是有方向的 这里的方向 是一个顺时针的方向 他的方向是的顺序是: 上、右、下、左
- margin:10px;表示上右下左这四个方向的外边距为10像素
- margin:10px 20px;表示上下这两个方向的外边距为10像素 左右两个方向的外边距 为20像素
- margin:10px 20px 30px;表示上边距为10像素 左右边距 为20像素 下外边距 为30像素
- margin:10px 20px 30px 40px;表示上外边距为10像素 右外边距 为20像素 下外边距为30像素 左边距为40像素
源代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
/*使用小属性来描述内填充*/
padding-top: 20px;
padding-right:30px;
padding-bottom: 40px;
padding-left: 50px;
border:1px solid #f00; /*外边框*/
}
</style>
</head>
<body>
<div class="box">我的第一篇博客</div>
</body>
</html>
background:
用来设置盒子的背景:
背景颜色:background-color
背景颜色会填充一个盒子的内容区域和padding区域以及边框。
背景图片:background-image
url()函数,表示用来指定一个背景图片的路径,()里面可以加"",也可以不加。
默认情况下,一个盒子的背景图片会平铺一个盒子,在水平和垂直方向上都会平铺。【可以通过一个属性来指定是否平铺,叫background-repeat】
默认情况下,背景图片的左上角和盒子的padding’的左上角是对齐的。【可以通过一个属性来指定背景图片的位置,叫background-position】