盒模型
边框属性
什么边框?
边框就是环绕在标签宽度和高度周围的线条
边框属性的格式
连写(同时设置四条边)
border: 边框的宽度 边框的样式 边框的颜色;
示例代码
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 5px solid blue;
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
}
</style>
快捷键:
bd+ border: 1px solid #000;
注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框
按方向连写(分别设置四条边)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
示例代码
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style>
快捷键:
bt+ border-top: 1px solid #000;
br+ border-right: 1px solid #000;
bb+ border-bottom: 1px solid #000;
bl+ border-left: 1px solid #000;
按要素连写(分别设置四条边)
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
内边距属性
什么是内边距?
边框和内容之间的距离就是内边距
格式
单独设置四条边
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
示例代码
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
</style>
同时设置四条边
padding: 上 右 下 左;
示例代码
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
注意点:
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
网友评论