定义：

在CSS处理页面的时候，它认为每个元素都是包含在一个不可见的盒子里，盒子模型由内容区域、内容区域周围空间（内边距padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（margin）构成。我们将盒子模型想象成一幅挂在墙上的画，画是内容，衬边是内边距，画框是边框，与相邻画框之间的距离是外边距。

边框（给html元素添加边框线，会改变元素的宽度）

上边框

1. Border-top-color:颜色值;上边框的颜色

2. Border-top-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-top-width:粗细；例如border-top-width:2px;

简写为

 Border-top:粗细 线型 颜色;

右边框

1. Border-right-color:颜色值;上边框的颜色

2. Border-right-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-right-width:粗细；例如border-right-width:2px;

    简写为

 Border-right:粗细 线型 颜色;

下边框

1. Border-bottom -color:颜色值;上边框的颜色

2. Border-bottom-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-bottom-width:粗细；例如border-bottom-width:2px;

    简写为

 Border-bottom:粗细 线型 颜色;

左边框

1. Border-left-color:颜色值;上边框的颜色

2. Border- left -style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border- left -width:粗细；例如border- left -width:2px;

    简写为

 Border- left:粗细 线型 颜色;

上右下左四条边框的样式一样

可以简写为  border:粗细 线型 颜色；

盒子模型（div、等块元素、行内块元素）

盒子的必要属性：

内容区：width、height和 border:

内边距 padding(将盒子撑大，盒子的宽高会改变)

内容和边框之间的距离

1. Padding-top：数值；内容和上边框之间的距离

2. Padding-right：数值；内容和右边框之间的距离

3. Padding-bottom：数值；内容和下边框之间的距离

4. Padding-left：数值；内容和左边框之间的距离

简写形式

Padding：10px 20px 30px 40px;上边框距离10px  右  20px   下边框30px    左40px

Padding:10px 20px 30px; 上10px      左右  20px    下  30px

Padding:10px 30px;   上下10px   左右30px

Padding:10px;   上右下左都是10px

注意：一个值的话上右下左等距；两个值上下等距、左右等距；三个值左右等距。

外边距 margin（默认8px，不会将盒子撑大是盒子与盒子之间的距离） 

html>


    
    
    

    https://www.imooc.com/u/6491408/articles

木子大大
木子大大木子大大
木子大大

网站布局的一个思想

网站的结构就是两部分（横向和纵向） 如果是纵向的就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以

如果是横向排列，我们就要使用浮动

浮动（在需要浮动的元素上面添加浮动，将不在一行的元素排在一行上面）

Float：left；左浮动

Float: right; 右浮动

浮动的特点：

使元素站队（站队的边界是他父级的边界），一行站满后从下一行开始

 设置浮动的元素，不占空间（脱标）

 设置浮动的元素层级高于普通元素

 设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素

盒子被浮动后后面的盒子会根据文本流动占位移动那个盒子的位置

清除浮动（清楚周边的浮动流，恢复到正常的文档流）

 Clear:left;

 Clear:right;

 Clear:both;

<!--大盒子里有三个子盒子：左   左   右-->

html>


    
    
    

    
muzidigbig
    
muzidigbig
    
muzidigbig
    
muzidigbig

l Div里面还有