CSS3长度单位

vm视口宽度的百分之多少10vw就是视口宽度的10%
vh视口宽度的百分之多少10vw就是视口高度的10%

box-sizing怪异盒模型

使用box-sizing属性可以设置和模型的俩种类型

width和height设置的是盒子内容区的大小。（默认值） content-box
width和height设置的是盒子总大小（怪异盒模型） border-box

resize调整盒子大小

使用resize属性可以可以控制是否允许用户调节元素尺寸。

none:不允许用户调整元素大小。（默认）
both:用户可以调节元素的宽度和高度。
horizontal:用户可以调节元素的宽度。
vertical:用户可以调节元素的高度。

box-shadow盒子阴影

使用box-shadow属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;语法
  • 各个值的含义：
    • h-shadow:水平阴影的位置，必须填写，可以为负值 v-shadow:垂直阴影的位置，必须填写，可以为负值 blur:可选，模糊距离 spread:可选，隐隐的外延值 color:可选，阴影的颜色 inset:可选，将外部阴影该为内部阴影

    默认值：box-shadow:none表示没有阴影

    opacity盒子阴影

    opacity属性能为整个元素添加透明度效果，值是0到1之间的小数，0是完全透明，1表示完全不透明。

    background-origin设置背景图的原点。

  • 语法

    • 1.padding-box:从padding区域开始显示背景图像。–默认值
    2.border-box:从border区域开始显示背景图像。
    3.content-box:从content区域开始显示背景图像。

    background-clip设置背景图的向外裁剪的区域。

  • 语法

    • 1.padding-box:从padding区域开始向外裁剪背景。–默认值
    2.border-box:从border区域开始向外裁剪背景。
    3.content-box:从content区域开始向外裁剪背景。
    4.text:背景图只呈现在文字上。

    background-size设置背景图的尺寸。

  • 语法

    • 1.用长度指定背景图片大小，不允许负值。

    background-size:300px 200px;

    2.用百分比指定背景图片大小，不允许负责。

    background-size:100% 100%;

    3.auto：背景图片的真实大小，–默认值
    4.contain：将背景图片等比缩放，是北京图片的宽高，与容器的款或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

    background-size:contain:

    5.cover：将背景图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。–相对比较好的选择

    background-size:cover;

    边框圆角

  • 同时设置四个角的圆角：

    • border-radius:10px;

    文本阴影

    text-shadow:h-shahow v-shadow blur color;语法

    文本换行

    常用值如下: normal:文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） pre:原样输出，与pre标签的效果相同。 pre-wrap:在pre效果的基础上，超出元素边界自动换行。 pre-line:在pre效果的基础上，超出元素边界自动换行，且识别文本中的换行，空格会忽略。 nowrap:强制不换行。

    文本溢出

  • 常用值如下
    • : clip:党内联内容溢出时，将溢出部分裁切掉。（默认值） ellipsis:当内联内容溢出快容器时，将溢出部分替换为···。

    要使得text-overflow属性生效，快容器必须显式定义overflow为非visible值，white-space为nowrap值。

    CSS3 多列布局

    CSS 多列布局是一种用于将网页内容排列成多列显示的技术，能够在有限的空间内更高效地展示信息，以下是关于 CSS 多列布局的学习内容：

  • 基本概念
  • 多列布局属性：CSS 通过一系列属性来实现多列布局，主要用于控制列的数量、宽度、间距以及列之间的分隔线等。
  • 应用场景：多列布局常用于新闻列表、文章排版、产品展示等场景，使内容呈现更加清晰、有条理，提高可读性和视觉效果。

  • 主要属性

    • column-count

  • 语法：column-count: auto | <integer>
  • 描述：指定元素要划分的列数，auto为默认值，表示根据其他属性自动计算列数，<integer>为具体的列数。

    • column-width

  • 语法：column-width: auto | <length>
  • 描述：指定每列的宽度，auto表示由浏览器根据容器大小和其他属性自动确定列宽，<length>为具体的宽度值，如100px、20em等。

    • column-gap

  • 语法：column-gap: normal | <length>
  • 语法：column-gap: normal | <length>
  • 描述：设置列与列之间的间隙宽度，normal的默认值通常为1em，也可以指定具体的长度值。

    • column-rule

  • 语法：column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>
  • 语法：column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>
  • 描述：是一个复合属性，用于设置列之间的分隔线，分别对应分隔线的宽度、样式和颜色。例如column-rule: 1px solid black表示 1 像素宽、实线、黑色的分隔线。

    • column-span

  • 语法：column-span: none | all
  • 描述：指定元素是否跨越所有列，none表示元素不跨越列，在所在列显示，all表示元素跨越所有列。

  • 示例

    • 以下是一个简单的 CSS 多列布局示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .multicol {
      /* 设置3列布局 */
      column-count: 3;
      /* 列之间的间隙为20px */
      column-gap: 20px;
      /* 列之间的分隔线为1px实线灰色 */
      column-rule: 1px solid gray;
    }
    让一个标题跨越所有列：
    css
    h1 {
      column-span: all;
    }

    注意事项

  • 内容适配：多列布局中的内容应根据列宽自动换行和调整，确保内容在不同列中完整显示，避免出现截断或显示不完整的情况。对于图像等元素，可能需要设置max-width: 100%等属性来使其适应列宽。
  • 兼容性问题：多列布局在不同浏览器中的支持存在一定差异，特别是在一些旧版本浏览器中。在实际应用中，需要进行充分的测试，并根据需要使用浏览器前缀来提高兼容性，如-webkit-column-count、-moz-column-count等。
  • 复杂布局处理：对于复杂的多列布局需求，可能需要结合其他 CSS 布局技术，如 Flexbox 或 Grid 布局来实现更精细的排版效果。同时，要注意多列布局与其他布局方式之间的相互影响，避免出现布局混乱的问题。