• CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况）

    CSS-盒子模型-内容，边框，内边距，外边距，(合并，塌陷情况)

    目标：能够认识 盒子模型的组成 ，****能够掌握盒子模型 边框、内边距、外边距 的****设置方法

    1. 学习路径：
    2. 1. 盒子模型的介绍
    3. 2. 内容区域的宽度和高度
    4. 3. 边框( border )
    5. 4. 内边距( padding )
    6. 5. 外边距(margin)

    1.1 盒子模型的介

    小结
    1. ➢ 盒子模型一共有几个部分组成？分别是什么？
    2. 	1. 内容区域：content
    3. 	2. 边框区域：border
    4. 	3. 内边距区域：padding
    5. 	4. 外边距区域：margin

    2.1 内容的宽度和高度

    测试：

    3.1 边框(border)- 单个属性

    测试代码：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: pink;
    13.             /* border: 粗细  线条样式   颜色 -- 不分先后顺序 */
    14.             /* solid : 实线 */
    15.             /* border: 1px solid #000; */
    16.  
    17.             /* dashed: 虚线 */
    18.             /* border: 5px dashed #000; */
    19.  
    20.             /* dotted : 点线 */
    21.             /* border: 5px dotted #000; */
    22.  
    23.             border-left: 5px dotted #000;
    24.             border-right: 5px dotted #000;
    25.             border-top: 1px solid red;
    26.             border-bottom: 1px solid red;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31.     <div>内容div>
    32. body>
    33. html>
    测试结果：

    3.4 盒子实际大小初级计算公式

    例子：

    结果如下：

    (案例)新浪导航案例

    代码如下：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 调节上下，上面为橙色，下面为灰色的 */
    10.         .box {
    11.             height: 40px;
    12.             border-top: 3px solid #ff8500;
    13.             border-bottom: 1px solid #edeef0;
    14.         }
    15.  
    16.         /* 后代: box里面的a */
    17.         .box a {
    18.             width: 80px;
    19.             height: 40px;
    20.             /* 推荐先加上: 清楚的看到文字在什么位置 */
    21.             /* background-color: #edeef0; */
    22.             display: inline-block;
    23.             text-align: center;
    24.             line-height: 40px;
    25.             font-size: 12px;
    26.             color: #4c4c4c;
    27.             /* 去掉超链接的下划线 */
    28.             text-decoration: none;
    29.         }
    30.  
    31.         /* 鼠标悬停在上面，背景变成灰色，字体变成橙色 */
    32.         .box a:hover {
    33.             background-color: #edeef0;
    34.             color: #ff8400;
    35.         }
    36.     style>
    37.  
    38.     
    39. head>
    40. <body>
    41.     <div class="box">
    42.         <a href="#">新浪导航a>
    43.         <a href="#">新浪导航a>
    44.         <a href="#">新浪导航a>
    45.         <a href="#">新浪导航a>
    46.     div>
    47.     <p>
    48.         <a href="#">a>
    49.     p>
    50. body>
    51. html>

    4.1 内边距(padding)- 取值

    小结

    测试如下:

    4.3 盒子实际大小终极计算公式(重要)

    看，盒子被撑大了

    改造新浪导航：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box {
    10.             height: 40px;
    11.             border-top: 3px solid #ff8500;
    12.             border-bottom: 1px solid #edeef0;
    13.         }
    14.  
    15.         /* 后代: box里面的a */
    16.         .box a {
    17.             padding: 0 16px;
    18.             /* width: 80px; */
    19.             height: 40px;
    20.             /* 推荐先加上: 清楚的看到文字在什么位置 */
    21.             /* background-color: #edeef0; */
    22.             display: inline-block;
    23.             text-align: center;
    24.             line-height: 40px;
    25.             font-size: 12px;
    26.             color: #4c4c4c;
    27.             text-decoration: none;
    28.         }
    29.  
    30.         .box a:hover {
    31.             background-color: #edeef0;
    32.             color: #ff8400;
    33.         }
    34.     style>
    35.  
    36.     
    37. head>
    38. <body>
    39.     <div class="box">
    40.         <a href="#">新浪a>
    41.         <a href="#">新浪导航新浪导航a>
    42.         <a href="#">新浪导航a>
    43.         <a href="#">新浪导航a>
    44.     div>
    45.     <p>
    46.         <a href="#">a>
    47.     p>
    48. body>
    49. html>
    结果如下：

    (拓展)不会撑大盒子的特殊情况
    1. ➢ 不会撑大盒子的特殊情况(块级元素)
    2. 1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
    3. 2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

    4.5 CSS3盒模型(自动内减)

    ➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

    ​ • 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

    ➢ 解决方法 ① ：手动内减

    ​ • 操作：自己计算多余大小，手动在内容中减去

    ​ • 缺点：项目中计算量太大，很麻烦

    ➢ 解决方法 ② ：自动内减

    ​ • 操作：给盒子设置属性 box-sizing : border-box ; 即可

    ​ • 优点：浏览器会自动计算多余大小，自动在内容中减去

    5.1 外边距(margin)- 取值

    5.2 外边距(margin) - 单方向设置

    ➢ 场景：只给盒子的某个方向单独设置外边距

    ➢ 属性名：margin - 方位名词

    ➢ 属性值：数字 + px

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

    5.3 margin单方向设置的应用

    版心居中：

    5.4 清除默认内外边距(清除浏览器自带的marginh和padding)

    (案例)网页新闻列表案例

    测试代码：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         * {
    10.             margin: 0;
    11.             padding: 0;
    12.             /* 所有的标签都可能添加内边距或border, 都內减模式 */
    13.             box-sizing: border-box;
    14.         }
    15.  
    16.         .news {
    17.             width: 500px;
    18.             height: 400px;
    19.             border: 1px solid #ccc;
    20.             margin: 50px auto;
    21.             padding: 42px 30px 0;
    22.         }
    23.  
    24.         .news h2 {
    25.             border-bottom: 1px solid #ccc;
    26.             font-size: 30px;
    27.  
    28.             /* 行高是1倍, 就是字号的大小 */
    29.             line-height: 1;
    30.             padding-bottom: 9px;
    31.         }
    32.  
    33.         /* 去掉列表的符号 */
    34.         ul {
    35.             list-style: none;
    36.         }
    37.  
    38.         /* li {} */
    39.         .news li {
    40.             height: 50px;
    41.             border-bottom: 1px dashed #ccc;
    42.             padding-left: 28px;
    43.             line-height: 50px;
    44.         }
    45.  
    46.         .news a {
    47.             text-decoration: none;
    48.             color: #666;
    49.             font-size: 18px;
    50.         }
    51.     style>
    52. head>
    53. <body>
    54.     
    55.     <div class="news">
    56.         <h2>最新文章/New Articlesh2>
    57.         <ul>
    58.             <li><a href="#">北京招聘网页设计，平面设计，phpa>li>
    59.             <li><a href="#">北京招聘网页设计，平面设计，phpa>li>
    60.             <li><a href="#">北京招聘网页设计，平面设计，phpa>li>
    61.             <li><a href="#">北京招聘网页设计，平面设计，phpa>li>
    62.             <li><a href="#">北京招聘网页设计，平面设计，phpa>li>
    63.         ul>
    64.     div>
    65. body>
    66. html>
    测试结果：

    5.6 外边距正常情况

    ➢ 场景：水平布局 的盒子，左右的margin正常，互不影响

    ➢ 结果：最终两者距离为左右margin的和

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

    gin会合并

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

    ➢ 解决方法：避免就好

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

    测试代码如下：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             width: 100px;
    11.             height: 100px;
    12.             background-color: pink;
    13.         }
    14.  
    15.         .one {
    16.             /* margin-bottom: 50px; */
    17.             margin-bottom: 60px;
    18.         }
    19.  
    20.         .two {
    21.             margin-top: 50px;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <div class="one">11div>
    27.     <div class="two">22div>
    28. body>
    29. html>

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

    1. ➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
    2. ➢ 结果：导致父元素一起往下移动
    3. ➢ 解决方法：
    4. 	1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
    5. 	2. 给父元素设置overflow：hidden
    6. 	3. 转换成行内块元素
    7. 	4. 设置浮动
    问题如下:

  • 相关阅读:
    使用 CI/CD 进行语义发布
    2023校招C++开发oppo笔试
    SpringBoot运维实用篇
    vue修饰符 lazy number trim
    千峰商城-springboot项目搭建-81-订单提交及支付-qrcode生成二维码
    第六届全国大学生生物医学工程创新设计竞赛参赛经历
    云边缘网关TG453
    人人开源搭建后台管理系统 & 逆向工程生成CRUD代码
    HIVE操作自查手册（全）
    设计模式之原型模式
  • 原文地址：https://blog.csdn.net/weixin_48370579/article/details/128180220