盒子模型
作用意义:决定不同元素之间的位置关系(平面位置、空间位置)
空间位置的覆盖关系:
从下往上:背景色<背景图片<元素内容
边框border
基础设置:
p:first-of-type
{
border:solid 10px; /*代表实线表框*/
border-color:red; /*代表上下左右:red*/
}
p:nth-of-type(2)
{
border:solid 10px; /*代表实线表框*/
border-color:red blue; /*代表上下:red 左右blue*/
}
p:nth-of-type(3)
{
border:solid 10px; /*代表实线表框*/
border-color:red blue green; /*代表上:red 下:green 左右blue*/
}
p:nth-of-type(4)
{
border:solid 10px; /*代表实线表框*/
border-color:red blue green yellow; /*代表上:red 下:green 左:yellow 右blue 顺时针*/
}
/*也可以直接设定单方向边框颜色
border-top-color:blue;
boder-bottom-color:yellow;
border-left-color:green;
border-right-color:red;
*/
对边框border的粗细设置:
p:first-of-type
{
border:solid;
/*border-width:thin; 细边框
border-width:thick; 粗边框
border-width:medium;适中边框
border-width:10px; 自定义边框
border-top-width:10px; 对上边框进行单独设置
*/
/*四条边框单独设置*/
border-width:thick thin medium 20px;
}
边框样式
p:first-of-type
{
/*点框border:dotted;
虚线框:border:dashed;
双线框:border:double;
border-top-style:solid; 只加上边框
*/
border-style:solid dotted dashed double;
border-width:10px;
}
缩写
p:nth-of-type(2)
{
border-top:red dotted thick
}
外边距margin
p:nth-of-type(2)
{
background-color:yellow;
/*margin-top:1px;
margin-bottom:100px;*/
margin:100px 0 10px 50px
}
p:nth-of-type(3)
{
margin-top:100px;
margin-bottom:-90px; /*外边距也可以是负值*/
}
内边距padding
内容和边框的距离为内边距
padding:100px;