盒子模型:border、padding、新浪导航栏、margin、外边距典型应用、消除内外边距、产品模块、快报模块

1.1盒子模型的组成

image.png

image.png

1.2边框border

border：border-width|border-style|border-color

参数值	说明
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

border-style: solid 实线| dashed 虚线 | dotted 点线边框

• 边框的简写border:1px solid red;没有顺序
• 只设定上边框border-top:1px solid red;其他同理
  注意事项：要先写大边框再写小边框

    /*正确*/
    border:1px solid red;/*4条边*/
    border-top:1px solid blue;/*1条边*/

    /*错误*/
  border-top:1px solid blue;/*1条边*/
  border:1px solid red;/*4条边*/
 

1.3内边距padding

padding属性用于设置内边距，即边框与内容之间的距离

参数值	说明
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding的复合写法

值的个数	说明
padding：5px	1个值，代表上下左右5像素内边距
padding：5px 10px	2个值，代表上下5像素内边距,左右10像素内边距
padding：5px 10px 20px	3个值，代表上5像素内边距,左右10像素内边距，下20像素内边距
padding：5px 10px 20px 30px	4个值，代表上5像素内边距,右10像素内边距，下20像素内边距，左30像素内边距

• 当盒子没有指定width和height值时，padding不会撑开盒子

1.4案例：新浪导航栏

image.png

  .nav{
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            color:#4c4c4c;
            line-height: 41px;
        }
        .nav a{
            /* a属于行内元素 此时必须要转换行内块元素 */
            display:inline-block;
           /* 给a一个高度就行 */
            height: 41px;
            /* 设置左右内边距 */
            padding: 0 20px;
            font-size: 14px;
            color:#4c4c4c;
            text-decoration: none;
        }
        .nav a:hover{
            background-color: #eee;
            color:chocolate;
        }

 

        设为首页
        手机新浪网
        移动客户端
        博客
        微博
        关注我
    

1.5案例：小米导航栏修改

padding内边距可以撑开盒子，有时候也会让我们去修改宽度，文字距离左侧的距离不应该用text-indent这样不精确。
实际开发的做法是给padding值这样更加精确。

image.png

  /*1、 把a设置成块级元素 */
        a{
            display:block;
            width: 200px;
            height: 40px;
            background-color: #617172;
            font-size: 14px;
            color:#fff;
            text-decoration: none;
            padding-left:30px;
            line-height: 40px;
        }
        /* 2、鼠标经过a给链接设置背景颜色 */
        a:hover{
            background-color: orange;
        }

 手机 电话卡
    电视 盒子
    笔记本 平板
    出行 穿戴
    智能 路由器
    健康 儿童
    耳机 音响

1.6外边距margin

即控制盒子与盒子之间的距离

参数值	说明
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

• margin简写方式与padding一样

1.7外边距典型应用

image.png

外边距可以让块级盒子水平居中，但必须满足两个条件
1、盒子必须指定了宽度（width）
2、盒子左右的外边距都设置为auto
.header{width:960px;margin:0 auto;}
常见的写法，以下三种都可以：

• margin-left:auto;margin-right:auto;
• margin:auto;
• margin:0 auto
  注意：以上的方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素增加text-align:center即可。

1.8嵌套快元素垂直外边距的塌陷

image.png

1.9消除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前首先要清除一下网页元素的内外边距。

*{
      padding:0;/*消除内边距*/
      margin:0;/*消除外边距*/
}

• 这句话也是我们写css的第一句话

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置内外边距，但是转换为块级和行内块元素就可以。

2.0综合案例：产品模块

image.png

盒子结构

image.png

 *{
            padding: 0;
            margin:0;
        }
        body{
            background-color:#f5f5;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin:100px auto;
        }
        .box img{
            /* 让盒子里的图片和盒子一样宽 */
            width: 100%;
        }
        .review{
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性 所以padding不会撑开盒子 */
            padding: 0 28px;
            margin-top:30px;
        }
        .appraise{
            font-size:12px;
            color:#b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info{
            font-size:14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        .info h4{
            display:inline-block;
            /* 文字取消加粗 */
            font-weight:400;
        }
        a{
            color:#333;
            text-decoration: none;
        }
        .info span{
            color:coral;
        }
        .info em{
            font-style: normal;
            color:darkslategrey;
            margin:0 6px 0 15px;
        }

        
        
快递牛整体不错蓝牙可以说秒连
        
来自于117384232的评价
        
Redmi AirDots真无线蓝...
            |
            99.9圆
        
    

2.1案例2：快报模块

image.png

盒子布局

image.png

*{
            padding: 0;
            margin: 0;
        }
        li{
            /* 去掉li标签前面的小圆圈 */
            list-style: none;
        }
        .box{
            width:248px;
            height: 163px;
            border:1px solid #ccc;
            margin:100px auto;
        }
        .box h3{
            height: 32px;
            border-bottom:1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left:15px ;
        }
        .box ul li a{
            font-size: 12px;
            color:#666;
            text-decoration: none;
        }
        .box ul li a:hover{
            text-decoration: underline;
        }
        .box ul li{
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
        .box ul{
            margin-top: 5px;
        }

 

        
品优购快报
       

           
【特惠】爆款耳机5折秒！
           
【特惠】母亲节，健康好礼低至5折！
           
【特惠】爆款耳机5折秒！
           
【特惠】9.9元洗100张照片！
           
【特惠】长虹智能空调立省1000！