08：盒模型：边框 + 内边距 + 外边距

知识梳理

1 盒子是网页布局的关键点

2 padding值会撑开盒子

3 样式的层叠性 后面的会覆盖前面的

4 块级元素的宽度默认和父级的宽度一样

5 块级元素不设置宽度就是通栏的

6 border-top: 1px solid transparent; 透明边框

7 li是块级元素 不用给宽度，默认和父亲一样宽


2 测量高度的时候不要量边框

圆角

border-radius:值
radius [ˈreɪdiəs] 半径的意思

圆点实现

.box {
     200px;
    height: 200px;
    background: pink;
    /*border-radius: 50%;*/
    border-radius: 100px;
}

<div class="box"></div>

矩形实现
矩形只用高度的一半 必须用精确值

.box {
     200px;
    height: 50px;
    background: pink;
    border-radius: 25px;
}

<div class="box"></div>

阴影

box-shadow: ;

1 必须  水平阴影的位置 允许负值

2 必须  垂直阴影的位置 允许负值

3 可选  模糊距离 [虚实]

4 看选  阴影尺寸 [影子大小]

5 可选  阴影的颜色

6 inser 内阴影  如果需要外阴影就不要写  需要内阴影再写这个参数

颜色参数用 rgba的方式书写可以指定透明度

边框

1）三个基本样式

. 宽度 border-width

. 颜色 border-color

. 样式 border-style: solid 实线  dashed 虚线  dotted 点线  none没有边框

2）简写

border：1px solid red;

3）单独指定某个边框的样式

border-top  border-bottom  border-left  border-right
  上边框        下边框         左边框         右边框

4）表格细线

<style type="text/css">
    table,td{
        border: solid 1px red;
        border-collapse:collapse;//合并相邻的单元格
    }
</style>

<table cellspacing="0" cellpadding="20" >
    <tr><td>李白</td></tr>
    <tr><td>杜甫</td></tr>
</table>

内边距

1）设置四个边

内容与边框之间的距离

padding-top     //1 上边距

padding-bottom  //2 下边距

padding-left    //3 左边距

padding-right   //4 右边距

增加内边距后盒子变大了

2）复合写法

一个参数 padding:10px; 上下左右 各10px

二个参数 padding:10 20px; 上下10px  左右20px

三个参数 padding:10px 20px 30px;  上10px  左右20px  下30px

四个参数 padding:10px 20px 30px 40px; 上右下左 顺时针

3）内盒尺寸计算

宽度：内容宽度 + padding + border

高度：内容高度 + padding + border

盒子的实际大小: 内容的宽度和高度 + 内边距 + 边框

4）内边距产生的问题

padding会撑大盒子 会使原来的盒子撑大

解决方法

用盒子的宽高 减去 padding值 保持盒子原来的大小

6）特殊情况：paddin不影响盒子大小

如果没有给盒子指定宽度，此时给盒子指定padding，不会撑开盒子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
             200px;
            height: 200px;
            background: #00a8e6;
        }
        p {
            background: red;
            height: 30px;
            padding: 30px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>李白</p>
    </div>
</body>
</html>

p的宽度还是200px 而非260px

外边距

1）基本使用

设置盒子与盒子之间的距离  或者盒子距离四周的距离

使用语法和padding一样

2）块级盒子水平居中

需要满足两个条件：
. 盒子必须制定宽度   .左右外边距设置为 auto

三种书写语法：
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;

3）文字居中和盒子居中的区别

text-align: center; //文字 行内元素 行内块元素  水平居中

margin:0 auto; //块级盒子水平居中

3）插入图片和背景图片

插入图片  移动位置只能用盒子的padding 或者 图片本身的margin

背景图片  移动位置只能用 background-posposition:x轴 y轴;

4）清除元素的默认内外边距

body 默认 上下左右各有8像素的外边距

p 标签默认 上下各有 16像素的外边距

其他标签也都有，所以我们要全部清除

* {
margin: 0;
padding: 0;
}

小注意点：为了照顾兼容性，行内元素只设置左右内外边距，不要设置上下内外边距

span{ margin:20px;}

 只有左右外边距 上下不兼容

5）外边距合并

5.1 相邻块元素垂直外边距的合并 [ 外边距塌陷 ]

概念：
当上下相邻的两个块元素相遇时，如果上面的元素有margin-bottom,
下面的元素有margin-top，他们的垂直间距不是 margin-bottom + margin-top 的和
而是 取连个值中的较大者. 垂直存在 左右是不存在的

结局方案：只给一个元素设置外边距

5.2 嵌套块元素垂直外边距合并

.father{
 300px;
height: 300px;
background: #00a0e9;
border-top: 1px solid red;//解决方法1
padding-top: 1px;//解决方法2
overflow: hidden;//解决方法3
}
.son{
 200px;
height: 200px;
background: red;
margin-top: 30px;
}


<div class="father">
    <div class="son"></div>
</div>

解决方案
border-top: 1px solid red;/*1 给父级添加上边框*/
padding-top: 1px;/*2 给父级添加上内边框*/
overflow: hidden;/*3 给父级添加overflow：hidden*/

还有其他方法：比如浮动、固定、绝对定位等后面学了再总结

6）盒子布局稳定性

width  > padding > margin

原因：
.margin会有外边距河边的问题 还有ie6下margin加倍的bug(讨厌)最后使用

.padding会影响盒子大小，需要进行加减计算(稍显麻烦)其次使用

.width 我们经常使用宽度剩余法 和 高度剩余法来做 推荐使用

去掉列表默认的样式

li {list-style: none }

鼠标滚轮输入

按住滚轮向下拖动  选中多行同时输入

快捷语法

.top+.bottom 按tab键 就会生成下面的代码
<div class="top"></div>
<div class="bottom"></div>

写css的时候
h200按下tab键 生成 height: 500px;

ul>li*5>5 按下tab键 生成5个li包含5个a

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

察言观色学会浏览器调试


青色  padding 值
橙色  margin 值

案例练习：新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>新闻列表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        .box{
             298px;
            height:198px;
            border: 1px solid #ccc;
            background: url("image/line.jpg");
            margin: 50px auto;
            padding: 15px;
        }


        .box h2 {
            font-size: 18px;
            padding: 5px 0;
            border-bottom: #ccc solid 1px;
            margin-bottom: 10px;
        }

        .box ul li {
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dotted red;
            background: url("image/arr.jpg") no-repeat left center;
            /*因为这个li没有设置宽度 所以 padding 没有撑大盒子*/
            padding-left: 20px;
        }

        .box ul li a {
            color: black;
            /*margin-left: 20px; 方法1 */
            /*padding-left: 20px; 方法2 */
        }

        .box ul li a:hover {
            color: red;
        }

    </style>
</head>
<body>
<div class="box">
    <h2>新闻标题</h2>

    <ul>
        <li><a href="#">我是第1条新闻</a></li>
        <li><a href="#">我是第2条新闻</a></li>
        <li><a href="#">我是第3条新闻</a></li>
        <li><a href="#">我是第4条新闻</a></li>
        <li><a href="#">我是第5条新闻</a></li>
    </ul>
</div>

</body>
</html>