盒模型
边框(一)
div{
border:2px solid red;
}
相当于
div{
border-width:2px;//粗细
border-style:solid;//样式
border-color:red;//颜色
}
样式常见的有:dashed(虚线)|dotted(点线)|solid(实线)
边框(二)
单独设置下边框(引用上面的格式)
div{border-bottom:1px solid red;}
同理:上、右、左的边框设置如下
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
宽度和高度
盒模型的宽和高和CSS不一样,盒模型的包括了边框以及边界
填充
填充是以顺时针(上、右、下、左)的方向
div{padding:20px 10px 15px 30px;}
相当于(顺序不能错)
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
上下左右一样的:div{padding:10px;}
上下一样,左右一样:div{padding:10px 20px;}
边界margin
边界顺序和填充顺序一致
padding在边框里,margin在边框外
边框(一)
div{
border:2px solid red;
}
相当于
div{
border-width:2px;//粗细
border-style:solid;//样式
border-color:red;//颜色
}
样式常见的有:dashed(虚线)|dotted(点线)|solid(实线)
边框(二)
单独设置下边框(引用上面的格式)
div{border-bottom:1px solid red;}
同理:上、右、左的边框设置如下
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
宽度和高度
盒模型的宽和高和CSS不一样,盒模型的包括了边框以及边界
填充
填充是以顺时针(上、右、下、左)的方向
div{padding:20px 10px 15px 30px;}
相当于(顺序不能错)
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
上下左右一样的:div{padding:10px;}
上下一样,左右一样:div{padding:10px 20px;}
边界margin
边界顺序和填充顺序一致
padding在边框里,margin在边框外