web前端的恐怖之旅（3）：盒子模型

盒子模型（每个标签都是一个盒模型）

---

• 盒子属性（单位：px）
  
  1），content ：内容区域 width ：盒子宽度 height ：盒子高度

  2），border ：边框线 复合属性（包括宽度，样式，颜色）包含分属性

  • border:1px solid blue;	/*给盒子定一个边框线，这是一个复合属性*/
    /*三个参数*/
    border-width ： 边框线宽度
        px				eg：1px，2px，3px...
        medium			默认值	3px
        thick			粗的	5px
        thin 			细的	1px
    border-style ： 边框线样式
    	solid			实线
    	dashed			虚线
    	dotted			点状线
    	double			双线
    border-color ： 边框线颜色(不给颜色时，默认给的是字体的颜色)
    	1. 关键字：blue，red，yellow，purple
    	2. 十六进制颜色值
    		  #cc3300
    			  cc => 红色
    			  33 => 绿色
    			  00 => 蓝色
    		  	  值范围：0~9，a~f
    		  常见值：#ffffff 黑色	#000000白色	#999999灰色	#eeeeee淡灰色
    		  0~f越来越灰
    		  两两相同可以缩写：eg：#cc3300 => #c30
    	3. rgb()	(red, greed, blue)		eg:rgb(0, 255, 255)
    				0~255  0~255  0~255
    	4. rgba()	(red, greed, blue, 0~1)	小数前面的0可以省略 eg：0.1 => .1
    				rgb-alpha	颜色透明度
    				0~1		0完全透明  0.5半透明	1全透明
    
    /*其中，若想修改其中一条边框线，可以单独使用一条属性*/
    border-top => 上边框线	left => 右边框线	right => 左..	bottom => 下..
    	eg：border-top:3px solid red;
    /*每条边框线还能细分*/
    	eg：border-top-color:red ==> 设置上边框线的颜色
    	eg：border-left-width:1px ==> 设置左边框线的宽度
    
    /*注意！写样式的时候，如果只需要控制单条样式，要写的很细，不要出现浪费性能*/
    

  3），padding ：内边距，border线以内的距离，会撑大盒子，撑大多少，content盒子减去多少

  • .warp{
        width:200px;
        height:200px;			/*width height 是content内容盒子的大小*/
        border:1px solid blue;  /*外边框线的大小*/
        padding:20px;			/*内边距的大小，也就是content盒子和border的距离*/
    }	
    padding:1px; ==> 1个值 代表4个方向
    padding:2px 3px; ==> 2个值 2px代表上下 3px代表左右左右
    padding:1px 2px 3px; ==> 3个值 1px代表上 2px代表左右 3px代表下
    padding:1px 2px 3px 4px; ==> 4个值 从上开始 顺时针方向，上右下左
    
    /*padding主要用来控制父级盒子和内容盒子之间的距离*/
    

  4），margin ：外边距，border线以外的距离，类似于盒子外面贴了木板，会挤开别的元素

  • .warp{
        width:200px;
        height:200px;			/*width height 是content内容盒子的大小*/
        border:1px solid blue;  /*外边框线的大小*/
        padding:20px;			/*内边距的大小，也就是content盒子和border的距离*/
        margin:30px;			/*外边距，和其他元素的距离*/
    }	
    margin:1px; ==> 1个值 代表4个方向
    margin:2px 3px; ==> 2个值 2px代表上下 3px代表左右左右
    margin:1px 2px 3px; ==> 3个值 1px代表上 2px代表左右 3px代表下
    margin:1px 2px 3px 4px; ==> 4个值 从上开始 顺时针方向，上右下左
    
    margin:5px auto; ==> 第一个代表上下外边距，第二个代表让左右两侧外边距一样，居中
    
    /*控制兄弟盒子和兄弟盒子之间的距离*/
    

  5），外边距合并（只存在于块级盒子和块级盒子之间）

  • 1. 父子级关系的盒子，都是块级盒子，垂直方向相遇的margin值，会产生合并 ==> 合并成为较大的margin值

       <style>
           div{
               background-color:#CFD7EB;
               height:350px;
               margin:20px 0px;
           }
           div>div{
               margin:100px;
           }
       </style>
       ...
       <div>
           <div>
               <p>123</p>
           </div>
       </div>
       

    2. 兄弟元素之间 垂直方向相遇的margin值 会产生合并，合并为较大的margin值

       <style>
           div{
               background-color:#000;
               height:100px;
               margin:20px 0px;
           }
       </style>
       ...
       <div>
           <p>123</p>
       </div>
       <div>
           <p>123</p>
       </div>
       

    解决方案：

    1.直接使用父级的padding
    2. 给外层盒子一个border线，在两个margin值之间形成一堵墙（有时不需border）
    3. 给父级盒子一个`overflow:hidden;`样式
    4. 给 浮动 定位
    

  写盒子的方法：

  从外写到内，从上写到下，如果不知道全部给上边框线

  外面的盒子，和里面的内容的关系 ==> padding