CSS学习记录(四) ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第九天

写在前面

以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识，方便日后的回看复习。本节内容主要包含CSS里的盒子模型的一些相关知识。

盒子模型基本属性

• 边框(border)
  • 构成：边框宽度(border-width)、边框样式(border-style)、边框颜色(border-color) | 属性 | 作用 | | --- | --- | | border-width | 定义边框的粗细，单位为px | | border-style | 定义边框的样式 | | border-color | 边框颜色 |
  • 边框样式有：
    • solid：实线边框
    • dashed：虚线边框
    • dotted：点线边框
  • 书写代码距离：boder: 1px solid red;
  • 注意
    • 单元格与单元格之间的连接处，因为两单元格的边框都有粗细，所以连接处会因为边框宽度叠加导致接触位的线较粗，可用border-collapse:collapse，表示相邻边框合并在一起
    • 边框会影响盒子的实际大小
• 内边距(padding)
  • 内边距指的是边框与内容的距离，属性包含如下
    | 属性 | 作用 | | --- | --- | | padding-left | 左内边距 | | padding-right | 右内边距 | | padding-top | 上内边距 | | padding-buttom | 下内边距 |
  • 复合属性：内边距属性合并在一起写，其含义如下 | 值 | 含义 | | --- | --- | | padding: 1px | 含1个值，表示上、下、左、右的内边距为1px | | padding: 1px 2px | 含2个值，表示上下内边距为1px，左右内边距为2px | | padding: 1px 2px 3px | 含3个值，表示上边距为1px，左右边距为2px，下边距为3px | | padding: 1px 2px 3px 4px | 含4个值，表示上边距1px，右边距2px，下边距3px，左边距4px |
  • 注意：
    • 内边距会影响盒子的实际大小
    • 如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
• 外边距(margin)
  • 外边距指的是盒子与盒子之间的距离，属性包含如下
    | 属性 | 作用 | | --- | --- | | margin-left | 左外边距 | | margin-right | 右外边距 | | margin-top | 上外边距 | | margin-bottom | 下外边距 |
  • 块级盒子如何水平居中？
    1. 给盒子指定宽度
    2. 盒子的左右外边距都设置为auto
  • 外边距合并的相关问题
    • 相邻块级元素垂直外边距的合并
      • 发生于：上下相邻两个块元素分别有上、下边距，最终它们之间的距离取上、下边距的较大值而非两者之和
      • 解决方案：尽量只给一个盒子添加外边距
    • 嵌套块元素垂直外边距的塌陷
      • 发生于：对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
      • 解决方案
        • 为父元素定义上边框
        • 为父元素定义上内边距
        • 为父元素添加overflow: hidden;
      • 注意：浮动、固定、绝对定位的盒子不会有塌陷问题
• 清除内外边距
  • 为什么要清除内外边距？
    • 网页元素很多带有默认的内外边距，不同的浏览器默认的也不一致，因此为了排除这些差异对我们布局的影响，我们在布局前需要清理网页元素的内外边距
    • 清除方式

      * {
          padding: 0;  /* 清除内边距 */
          margin: 0;   /* 清除外边距 */
      }
      

    • 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

写在最后

以上便是我的一些学习笔记，若有不足，欢迎指出