菜鸟笔记四：CSS盒子模型

<div></div>

（1）在网页中能够包含其他标签的元素。

（2）在网页中一般所说的盒子盒子指<div>

1、决定盒子大小

width：宽       height：高

2、边框（border：top、bottom、left、right（单独边框））

颜色：border-color       边框宽：border-width

样式：border-style：（1）none无框    （2）solid 单实线    （3）dotted 点线

                                  （4）dashed 虚线    （5）double 双实线    （6）border-radius 圆角

简写  边框-方向：边框颜色、样式、粗细

         border-top:red solid 5px;

3、内边距（padding）

内容区域与盒子边框之间的距离会改变盒子大小。

简写 ：padding:10px    （上下左右各10px）

            padding:10px 20px    （上下10px   左右20px）

            padding:10px 20px 30px     （上10px   左右20px   下30px）

            padding:10px 20px 30px 40px     （上10px   右20px   下30px   左40px）

从边框开始计算   ：box-sizing:border-box      （这个会经常用到）

---

网页中分为两种元素

1、块级元素：（1）可以设置宽高   （2）不可以和其他元素共处一行（p、h1~h6、div）

2、行内元素：（1）不可以设置宽高   （2）可以和其他元素共处一行（a、span、b）

3、display元素转换

（1）inline ：将块级元素转换成行内元素。

（2）block ：将行内元素转换成块级元素。

（3）inline-block ：将元素转换成行内块级元素（可以设宽高和其他元素共处一行）

分割线（可以用盒子做）

例  ：line{width:1px; height:12px;  blackground:颜色;  margin:(与周围距离)}

盒子居中 ：margin:0 auto;

如果让盒子左右排列给盒子浮动属性 float:left、right