文章目录
什么是盒子模型
1,html的所有的元素都可看作一个嵌套的盒子,可以设置下图中任何一个有文字表示的内容
从外到内分别由content,padding填充,border边框,margin
2.盒子模型的最简单的实例:发现实际上有颜色的部分和页面边距相差50px
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<style>
div {
background-color: lightgrey;
border: 25px solid green;
padding: 25px ;
margin: 25px ;
}
</style>
边框 border
边框样式, border-style 属性
默认无边框,不继承父元素
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
2实例
<style>
#t1{border-style: none}
#t2{border-style:solid}
#t3{border-style:double}
#t4{border-style:dotted}
#t5{border-style:dashed}
#t6{border-style:groove}
#t7{border-style:ridge}
#t8{border-style:outset}
#t9{border-style:inset}
</style>
边框宽度,border-width 属性
1.可用参数
默认为medium,不继承父元素
值 | 描述 |
---|---|
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
length | 允许您自定义边框的宽度。 |
inherit | 规定应该从父元素继承边框宽度。 |
2.实例
<style>
p{border-style: solid}
#t1{border-width: thin}
#t2{border-width:thick}
#t3{border-width:medium}
#t4{border-width:50px}
</style>
边框图片,border-image属性
http://www.runoob.com/cssref/css3-pr-border-image.html
圆角边框,border-radius属性
1.给定值
给四个值,分别表示左上,右上,右下,左下角
给三个值,分别表示左上,左下和右上,右下角
给两个值,分别表示左上右下,左下和右上角
给一个值,表示四个角
http://www.runoob.com/cssref/css3-pr-border-radius.html
相当于角那里有个小圆,border-radius是小圆的半径,小圆与边框相切,小圆外面多余的部分被裁掉,所以就成圆角了
边框颜色,border-color 属性
1.可用参数
默认是透明的,不从父元素继承
name | 指定颜色的名称,如 “red” |
---|---|
colo | r 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
transparent | 指定边框的颜色应该是透明的。这是默认 |
inherit | 指定边框的颜色,应该从父元素继承 |
2.实例
<style>
p{border-style: solid}
#t1{border-color: #FF0000}
#t2{border-color: transparent}
</style>
边框的简写方法
可以设置的属性分别(按顺序):border-width, border-style,和border-color.。如果没有设置就按照默认值。
2.实例
边框为20p的实线红色边框
<style>
p{border:20px solid #FF0000}
</style>
边框上下左右部分都可以设置
1。一般情况下,如果只设置border,所有上下左右的border都是一个样式。为了灵活我们可以设置每个边上的border的样式
border-left/right/bottom/top设置某个边上的整体样式
border-left/right/bottom/top-color/style/width设置某个边上的某个样式
2.实例
<style>
p{
border-left:20px solid #000000;
border-right:10px solid #FF0000;
border-bottom:5px solid #00FF00;
border-top:25px solid #0000FF;
}
</style>
outline,在border外面再加上一层边框
1,与border的属性相同,唯一的不同就是不能单独设置某个边的样式。
不会增加个元素的宽度,相当于借用margin的空间。如果margin不够还是会显示outline的宽度
2.实例
<style>
#t1{
outline: #FF0000 dotted 10px;
border: #00FF00 solid 10px;
margin: 0px;
}
</style>
margin和padding
1.特点,margin和padding只能指定宽度,不能指定其他值。默认都是0
2.区别:padding(填充)指定border与content间的间隙,margin指定border外边的和其他元素的间隙。
3.相同点:
(1)都可设置整体的margin和padding,用%多少表示或者固定长度表示
(2)一般情况下,如果只设置margin和padding,所有上下左右的margin和padding都是一个样式。为了灵活我们可以设置每个边上的margin和padding的样式
4.实例
(1)设置整体的margin和padding
<style>
#t1{margin:200px;
border: 20px solid #FF0000;
}
#t2{padding:200px;
border: 20px solid #FF0000;}
</style>
(2)设置某个边上的margin和padding
<style>
#t1
{
border: 20px solid #FF0000;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 50px;
margin-top: 5px;
}
#t2
{
border: 20px solid #FF0000;
padding-left: 10px;
padding-right: 20px;
padding-bottom: 50px;
padding-top: 5px;
}
</style>
阴影设置
总结盒子模型
1.content表示内容的样式
2.padding表示内容和边框之间的距离
3.border表示边框的样式
4.margin表示边框外的距离
5.outline表示margin里的border外的边框