CSS笔记-3-盒模型

盒模型, 个人理解,就是按照一定逻辑, 将html代码划分成一块一块的, 为每一款提供特定的样式.
啦啦啦啦啦(≧▽≦)/~啦啦啦

1.border 边框
(1).样式: border-style ==> dashed（虚线）| dotted（点线）| solid（实线）
(2).颜色: border-color:#888; 或者 border-color:red;
(3).border-width: thin | medium | thick 或border-height: px
2.margin 边界
元素与其它元素之间的距离,在边框外.
3.padding 填充
元素内容与边框之间的距离,在边框里.
4.width 内容宽度
5.heigth 内容高度

♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^) ♪(^ ∇ ^)

在2.margin和3.padding中, 有几种写法如下(padding相同):
①.上、右、下、左
div{margin:20px 10px 15px 30px;}
②.分开写

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

③.如果上右下左的边界都为10px;
div{ margin:10px;}
④.如果上下边界一样为10px，左右一样为20px
div{ margin:10px 20px;}