• CSS详解（二）

    接上篇CSS详解（一）-CSDN博客

    1、网页布局本质

    网页布局的本质是通过 CSS 将各种 HTML 元素（即“盒子”）摆放到页面中合适的位置。这包括设置元素的尺寸、位置、边距、填充、对齐方式、浮动等。这些盒子通过 CSS 的各种布局机制进行排列，如浮动布局、定位布局、弹性布局（Flexbox）以及网格布局（CSS Grid）等

    2、盒子模型组成

    2.1 组成

    2.1.1 内容（Content）：盒子内部的实际内容，例如文本、图片等。

    2.1.2 内边距（Padding）：内容与边框之间的空间。

    2.1.3 边框（Border）：围绕内容和内边距的线。

    2.1.4 外边距（Margin）：盒子与其他盒子之间的空间。

    2.2 影响盒子本身大小的主要因素

    2.2.1 内容（Content）：盒子内部的实际内容决定了盒子的大小。

    2.2.2 内边距（Padding）：内边距增加会使盒子变大，因为它是内容与边框之间的空间。

    2.2.3 边框（Border）：边框的大小也会增加盒子的总大小。

    这三个部分加在一起，构成了盒子的总大小。而外边距（Margin）虽然不影响盒子的大小，但它影响了盒子与其他元素之间的距离

    3、border边框

    在 CSS 中，border 属性可以用来设置元素的边框样式，它有三个子属性分别是 border-color、border-width 和 border-style，它们分别用于设置边框的颜色、粗细和样式。

    3.1 border-color：用于设置边框的颜色。可以使用具体的颜色值，如红色、蓝色等，也可以使用 RGB、HEX 或 HSL 值。

    3.2 border-width：用于设置边框的粗细或宽度。可以使用像素（px）、百分比（%）或其他长度单位来指定边框的宽度。

    3.3 border-style：用于设置边框的样式，常见的样式包括：

    • solid：实线边框。
    • dashed：虚线边框。
    • dotted：点线边框。 
      border: 2px solid red;

      这会将边框宽度设置为 2 像素，样式设置为实线，颜色设置为红色。

    4、合并表格的相邻边框 

    使用 border-collapse: collapse
    • 用于合并表格的相邻边框，使其看起来像是单个边框。
    • 这个属性只适用于表格元素，例如 ，，，，，
      ，。 
      1. table {
      2.   border-collapse: collapse;
      3. }
      4.  
      5. td, th {
      6.   border: 1px solid black; /* 指定边框样式 */
      7.   padding: 8px; /* 添加内边距 */
      8. }

       5、边框影响盒子实际大小

      5.1 边框宽度的影响：
      • 在盒子模型中，边框会增加元素的实际大小，这意味着边框的宽度会增加元素的宽度和高度。
      5.2 box-sizing 属性：
      • box-sizing 属性用于指定元素的盒子模型，可以是 content-box（默认值）或者 border-box。
      • 当设置为 border-box 时，元素的宽度和高度包括内容、内边距和边框，而不是仅包括内容部分。
      1. div {
      2.   width: 200px;
      3.   height: 100px;
      4.   border: 2px solid black; /* 设置边框 */
      5.   box-sizing: border-box; /* 使用 border-box 盒子模型 */
      6. }

       在这个示例中，即使设置了固定的宽度和高度，边框的存在也会影响盒子的实际大小。使用 box-sizing: border-box; 可以确保边框被包含在指定的宽度和高度内。

      6、内边距padding

      padding 是 CSS 盒模型中的一个属性，用于指定元素的内边距，即元素内容与边框之间的空间。padding 属性可以分为四个独立的值：

      1. padding-top：指定元素的顶部内边距大小。
      2. padding-right：指定元素的右侧内边距大小。
      3. padding-bottom：指定元素的底部内边距大小。
      4. padding-left：指定元素的左侧内边距大小。

      这些属性可以单独指定，也可以同时指定一个、两个或三个值来设置不同方向上的内边距大小。

      1. /* 分别指定四个方向的内边距 */
      2. div {
      3.   padding-top: 10px;
      4.   padding-right: 20px;
      5.   padding-bottom: 30px;
      6.   padding-left: 40px;
      7. }
      8.  
      9. /* 同时指定水平和垂直方向的内边距 */
      10. div {
      11.   padding: 10px 20px; /* 上下 10px，左右 20px */
      12. }
      13.  
      14. /* 同时指定四个方向的内边距 */
      15. div {
      16.   padding: 10px 20px 30px 40px; /* 顺时针方向分别为 上、右、下、左 */
      17. }

       复合写法

      • padding: 10px;：表示上下左右的内边距都为 10 像素。
      • padding: 10px 20px;：表示上下的内边距为 10 像素，左右的内边距为 20 像素。
      • padding: 10px 20px 30px;：表示上部内边距为 10 像素，左右内边距为 20 像素，下部内边距为 30 像素。
      • padding: 10px 20px 30px 40px;：表示顺时针方向，上部内边距为 10 像素，右部内边距为 20 像素，下部内边距为 30 像素，左部内边距为 40 像素。

      这些写法能够方便地控制元素的内边距，使得样式表更加简洁和易于理解。

      padding会影响盒子实际大小

      当给一个块级盒子添加 padding 时，通常会影响盒子的实际大小，因为 padding 会增加盒子内容区域的尺寸。但是，如果一个块级盒子没有明确设置 width 或 height 属性，那么添加 padding 不会改变盒子的大小。

      这是因为在 CSS 中，盒子的宽度和高度是指内容区域的尺寸，而不包括 padding、border 和 margin。所以，当没有明确指定宽度或高度时，盒子的大小会根据内容自动调整，而 padding 不会影响这个自动调整的过程。

       7、 外边距margin

      外边距（Margin）是盒子模型的一个组成部分，用于控制元素与其他元素之间的空间。它可以在上、下、左、右四个方向上设置不同的值，从而调整元素在页面布局中的位置和间距。

      外边距属性可以分别设置，也可以合并在一起设置，其常用属性包括：

      • margin-top：上外边距。
      • margin-right：右外边距。
      • margin-bottom：下外边距。
      • margin-left：左外边距。

      外边距的值可以使用像素（px）、百分比（%）、em 等单位来指定。

      1. margin-top: 10px;
      2. margin-right: 20px;
      3. margin-bottom: 10px;
      4. margin-left: 20px;

      或者合并设置

      margin: 10px 20px; /* 上下外边距为 10px，左右外边距为 20px */

      8、块级盒子水平居中对齐

      要将块级盒子水平居中对齐，通常需要满足两个条件：

      1. 盒子必须有指定的宽度。
      2. 盒子的水平外边距设置为 auto。
      2.  
      4.

       .container 类用于包裹 .box，并且设置了 text-align: center; 以实现容器内内容的水平居中对齐。然后，.box 类定义了盒子的样式，其中 width 属性指定了盒子的宽度，而 margin: 0 auto; 则使其水平居中对齐。

      9、行内元素和行内块元素水平居中 

      text-align: center; 属性通常用于将行内元素和行内块元素水平居中对齐。当你将这个属性应用于父级元素时，所有内联元素（包括行内元素和行内块元素）都会相对于父级元素进行水平居中对齐。

      2.  
      4.

      .parent-container 类是父级容器，内部包含多个行内元素和一个行内块元素。通过将 text-align: center; 应用于 .parent-container，所有内联元素都会相对于该容器水平居中对齐。

      10、兄弟关系的块元素垂直外边距合并 

      在 CSS 中，兄弟元素之间的垂直外边距有可能会合并，这是一种常见的现象。当相邻的两个块级元素上下都设置了外边距时，它们的外边距会合并成一个外边距，取其中较大的那个值，而不是简单地将它们的外边距相加。

      11、父子关系的块元素垂直合并（塌陷）

      11.1 给父元素添加一个上边框： 通过给父元素添加一个上边框，可以防止其与子元素的外边距合并。

      1. .parent {
      2.     border-top: 1px solid transparent; /* 透明的上边框 */
      3. }

      11.2 给父元素添加上内边距： 通过给父元素添加上内边距，同样可以防止外边距合并。

      1. .parent {
      2.     padding-top: 1px;
      3. }

      11.3 使用 overflow 属性： 设置父元素的 overflow 属性为 hidden 也可以避免外边距合并。 

      1. .parent {
      2.     overflow: hidden;
      3. }

      12、 清除元素内外边距

      1. /* 清除所有元素的内外边距 */
      2. * {
      3.     margin: 0;
      4.     padding: 0;
      5. }
      6.  
      7. /* 为行内元素设置左右内外边距 */
      8. .inline-element {
      9.     margin-left: 0;
      10.     margin-right: 0;
      11.     padding-left: 0;
      12.     padding-right: 0;
      13. }

      这段代码会清除所有元素的内外边距，并为行内元素设置了左右内外边距，以照顾兼容性。这样可以确保页面的外观在不同浏览器中更一致。

      13、默认自带内外边距的元素

      13.1 段落

      • 默认外边距：上下外边距
      • 默认内边距：浏览器特定，通常是一些小的值

      13.2 标题

      -

      • 标题元素可能具有不同级别的默认内外边距，取决于浏览器的默认样式表

      13.3 列表

        、
          和
        1.  

          • 列表项之间可能有一些默认的外边距
          • 列表项内部可能会有一些默认的内边距

          13.4  

          元素

          • 通常没有默认的外边距或内边距，但取决于浏览器的默认样式表

          13.5  元素 

          • 可能会有一些默认的外边距
          • 内边距通常是零

          13.6 

          元素

          • 可能会有一些默认的外边距和内边距，取决于浏览器的默认样式表

          13.7 

          元素

          • 可能会有一些默认的内外边距和边框样式

          13.8 

          元素

          • 可能会有一些默认的外边距和内边距，用于包装表单控件集合

          13.9