CSS布局盒子模型(2) 内边距，盒子实际大小终极计算公式，新浪导航的优化CSS3盒模型清除默认内外边距行内元素的margin和padding无效情况

4.2 内边距（padding）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
数字+px;padding-方位名词

小结

➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置？
• padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？
• padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置？
• padding-left : 50px ;
padding-left:30px;

4.3 盒子实际大小终极计算公式

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
border会撑大盒子padding会撑大盒子，在这里插入图片描述

（案例）新浪导航的优化

➢ 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            /* padding: 50px; */

            /* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
            /* padding 最多取4个值 */

            /* 四值: 上  右   下  左 */
            /* padding: 10px 20px 40px 80px; */

            /* 三值 : 上   左右   下*/
            /* padding: 10px 40px 80px; */

            /* 两值 : 上下  左右*/
            /* padding: 10px 80px; */

            padding-left: 10px;
            padding-bottom: 50px;
        }

        /* 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

width:300px;
上，左右，下10px 40px 80px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            /* 撑大盒子的都有啥? border + padding */
            width: 240px;
            height: 240px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

.box a:hovver{
background-color:#edeef0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
    
    
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
    
    
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
    
    
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

➢ 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？

在这里插入图片描述

（拓展）不会撑大盒子的特殊情况

不会撑大盒子的特殊情况
➢ 不会撑大盒子的特殊情况（块级元素）

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

如果子盒子没有设置宽度，这个时候的宽度默认是父盒子的宽度
如果子盒子没有设置宽度，这个时候的宽度默认是父盒子的宽度，这个时候子盒子设置左右的padding或者左右的border这个时候不会撑大盒子。

4.5 CSS3盒模型（自动内减）

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
手动内减，自己计算多余的大小，手动在内容当中减去，
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
boxs-zing:border-box浏览器会自动计算多余的大小，自动在内容当中减去
box-sizing,border-box
box-sizing:border-box;
box-sing:'border-box;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 內减模式 */
            /* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

box-szing:border-box;

5.1 外边距（margin）- 取值

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
盒子与盒子之间距离，
在这里插入图片描述
上10px左右20px,下30px;
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

5.2 外边距（margin） - 单方向设置

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
数字+px;margin-方位名词

小结

➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置？
• margin : 20px ;
➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？
• margin : 20px 30px ;
➢ 给盒子设置左侧50px的外边距可以通过什么属性设置？
• margin-left : 50px ;

5.3 margin单方向设置的应用

➢ 应用：
在这里插入图片描述
margin-left;margin-right;margin-top;margin-bottom;

5.4 清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置

浏览器会默认给部分标签设置默认的margin和padding但是一般在项目开始前需要先清楚这些标签默认的margin和padding后续自己设置
比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：
在这里插入图片描述
*{margin:0;padding:0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>pppp</p>
    <p>pppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

*{margin:0;padding:0}

（案例）网页新闻列表案例

➢ 需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
➢ 布局顺序：

从外往内，从上往下
➢ 每一个盒子的样式：
宽高
辅助的背景颜色
盒子模型的部分：border、padding、margin
其他样式：color、font-、text-、……
border,padding,margin,color,font-,text-,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心: 网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心</div>
</body>
</html>

div:widthL1000px;
height:300px;
background-color:pink;margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距或border, 都內减模式 */
            box-sizing: border-box;
        }

        .news {
    
    
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        .news h2 {
    
    
            border-bottom: 1px solid #ccc;
            font-size: 30px;

            /* 行高是1倍, 就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }

        /* 去掉列表的符号 */
        ul {
    
    
            list-style: none;
        }

        /* li {
    
    } */
        .news li {
    
    
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }

        .news a {
    
    
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        </ul>
    </div>
</body>
</html>

5.6 外边距正常情况

➢ 场景：水平布局的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和
水平布局的盒子，左右的margin正常，互不影响
最终两者距离为左右margin的和

5.7 外边距折叠现象 – ① 合并现象

➢ 场景：垂直布局的块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可

垂直布局的块级元素，上下的margin会合并

5.8 外边距折叠现象 – ② 塌陷现象

➢ 场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：

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

给父元素设置border-top或者padding-top,分割父子元素的margin-top,
转换成为行内块元素，设置浮动
overflow:hidden;border=top,padding-top;转换成为行内块元素，设置浮动

5.9 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时 ➢ 结果：

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！
水平方向margin和padding有效，垂直方向无效，
◆ 能够认识不同选择器的优先级公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识盒子模型的组成部分
◆ 能够掌握盒子模型的边框、内边距、外边距的作用及简写形式
◆ 能够计算盒子的实际大小
◆ 能够了解外边距折叠现象，并知道如何解决盒子塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .one {
    
    
            /* margin-bottom: 50px; */
            margin-bottom: 60px;
        }

        .two {
    
    
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
    
    
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* 如果设计稿没有border, 不能使用这个解决办法 */
            /* border: 1px solid #000; */

            /* overflow: hidden; */
        }

        .son {
    
    
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;

            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

border:1px solid #0000;
如果设计的没有border不能使用overflow:hidden
如果想要通过margin或者padding改变行内
行内标签的margin-top,bottom,padding-top,bottom不生效，行高就是改变垂直方向的位置，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
    
    
            width: 300px;
            display: inline;
        }

        b {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            display: block;
        }

        input {
    
    
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>
    <!-- 块 / 行内  / 行内块 -->
    <p>ppp</p>
    <p>ppp</p>
    <b>bb</b>
    <b>bb</b>

    <input type="text">
    <input type="text">
</body>
</html>