CSS盒子模型+案例（2）

一、版心居中

1.什么是版心？

版心：网页的有效内容

2.如何使版心居中

    <style>
        div {
            margin: 0 auto;
        }
    </style>

二、新闻案例

 1.首先使用pxcook对图片样式进行测量

 2.设置对应样式

首先使用通配符进行默认样式清除，并且实现自动内减，保证盒子大小不被内容撑开

 接着先设置一个div标签，设置类名“class”，根据测量出来的大小对div标签设置宽高和border

再设置margin使得版心居中，再设置一个padding，使得内容和border之间存在距离

 接着先从新闻的标题开始

 .news h2{
            border-bottom: 1px solid #e2e2de;
            font-size: 35px;
            line-height: 1;
            /* 行高是1倍，就是字号的大小 */
            padding-bottom: 10px;
        }

最后设置内容

   /* 去掉列表的符号 */
        ul {
            list-style: none;
        }
        .news li {
            height: 60px;
            border-bottom: 1px dashed #adadad;
            padding-left: 37px;    /* 文字距离左边距离 */
            line-height: 60px; /* 文本垂直居中 */
        }
        .news a {
            text-decoration: none;  /* 去掉下划线 */
            color: #878080;
            font-size: 24px;
        }

然后这个网页就设计完成了

三、外边距折叠现象

3.1 合并现象

场景：垂直布局 的 块级元素 上下的margin会合并

结果：最终两者的距离为margin的最大值

解决方法：

• 只给其中一个盒子设置margin

3.2 塌陷现象

场景：互相嵌套 的 块级元素，子元素的margin-top会作用在父元素上

结果：导致一些父元素一起往下移动

解决方法：

1. 给父元素设置border-top 或者 padding-top （分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动

四、行内元素的内外边距问题

对行内标签设置如下样式

  <style>
        span{
            margin: 100px;
        }
    </style>

但是只有水平方向生效，垂直方向并不生效

 解决方法：添加行高即可

line-height: 100px;