web应用——CSS（下）

5.字体

1.font-size

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

2.font-style

font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

3.font-weight

font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

4.font-family

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

6.背景

1.background-color

CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

2.background-image

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

3.background-size

background-size 设置背景图片大小。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

4.background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

5.background-position

background-position 为背景图片设置初始位置。

6.background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

7.边框

1.border-style

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

border-style: soild soild soild soild
              上     右     下     左

只设一个为全部，两个为一上下、二左右，三个为一上、三下、二左右，下边color同理

2.border-width

border-width属性可以设置盒子模型的边框宽度。

3.border-color

CSS属性border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

4.border-radius

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-radius: 0 5px 0 0 表示右上角变为圆角，半径为5px
此属性可以将图片变为圆形(圆角半径等于图片半径)
border-radius: 50% 当图片为长方形则为椭圆
border-radius: 50% 20% / 10% 40% 比较奇怪的形状

5.border-collapse

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

8.元素展示格式

1.display属性

• block：

• 独占一行

• width、height、margin、padding均可控制

• width默认100%。

• 代表：div

• inline：

• 可以共占一行

• width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效

• width默认为本身内容宽度

• 代表：span

• inline-block

• 可以共占一行

• width、height、margin、padding均可控制

• width默认为本身内容宽度

2.white-space

white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。

3.text-overflow

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

4.overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。

添加滚轮

9.内边距与外边距

1.margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

• 可以接受1~4个值（上、右、下、左的顺序）

• 可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left

• 可取值

• length：固定值

• percentage：相对于包含块的宽度，以百分比值为外边距。

• auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

• margin: 0 auto只对块元素有效，而行内块元素(img) 或 行内元素的 display 需要转化成 block 才可以。

• 也可以设置其父元素的 text-align: center 实现子元素居中。

• 外边距重叠

• 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

• 父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

width = content + padding + border

2.padding

padding CSS 简写属性控制元素所有四条边的内边距区域。

• 可以接受1~4个值（上、右、下、左的顺序）

• 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left

• 可取值

• length：固定值

• percentage：相对于包含块的宽度，以百分比值为内边距。

10.盒子模型

box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

• content-box：是默认值，设置border和padding均会增加元素的宽高。

• border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

11.位置

position

CSS position属性用于指定一个元素在文档中的定位方式。

定位类型：

• 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。

• 相对定位元素（relatively positioned element）是计算后位置属性为 **relative** 的元素。

• 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 **fixed** 的元素。

• 粘性定位元素（stickily positioned element）是计算后位置属性为 **sticky** 的元素。

取值：

• static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。

• absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

• sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

12.浮动

1.float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

display为inline或inline-block时，使用float后会统一变成block。

取值：

• left：表明元素必须浮动在其所在的块容器左侧的关键字。

• right：表明元素必须浮动在其所在的块容器右侧的关键字。

2.clear

有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用clear。

取值：

• left：清除左侧浮动。

• right：清除右侧浮动。

• both：清除左右两侧浮动

13.flex布局

flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

1.flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

取值：

• row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

• row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。

• column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

• column-reverse：表现和column相同，但是置换了主轴起点和主轴终点

2.flex-wrap

CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值：

• nowrap：默认值。不换行。

• wrap：换行，第一行在上方。

• wrap-reverse：换行，第一行在下方。

3.flex-flow

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。

4.justify-content

CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

取值：

• flex-start：默认值。左对齐。

• flex-end：右对齐。

• space-between：左右两段对齐。

• space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
• space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。

5.align-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

取值：

• flex-start：元素向主轴起点对齐。

• flex-end：元素向主轴终点对齐。

• center：元素在侧轴居中。

• stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

6.align-content

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

取值：

• flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

• flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

• center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

• stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

7.order

定义flex项目的顺序，值越小越靠前。

8.flex-grow

CSS 属性 flex-grow CSS 设置 flex 项主尺寸 的 flex 增长系数。

负值无效，默认为 0。

9.flex-shrink

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

负值无效，默认为1。

10.flex-basis

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。

取值：

width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

11.flex

flex-grow、flex-shrink、flex-basis的缩写。

常用取值：

• auto：flex: 1 1 auto

• none：flex: 0 0 auto

14.响应式布局

media查询

当屏幕宽度满足特定条件时应用css。

例如：

@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

Bootstrap

• bootstrap地址（https://v5.bootcss.com/）