11.4 冯娜

        1234

         4567

八、交互

1、 更改用户与之交互时选择内容的方式 。

2、 当用户单击该段时，将完全选中该段：user-select-all；

​ 本段具有默认的选择行为：user-select-auto；

​ 用户单击时无法选择该段落：user-select-none

九、溢出

1、是内容溢出元素框时发生的事情。

2、overflow-auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

3、overflow-hidden: 内容会被修剪，并且其余内容是不可见的 。

十、定位

1、position-static:默认值，元素处于正常的文档流中， 会忽略left、top、right、bottom和z-index属性。

2、position:relative:相对定位， 是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响 。

3、position:absolute:绝对定位，指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

　　1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

　　2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4、position:fixed:固定定位，相对于body定位的。将元素固定在页面的某个位置，不会随着页面滚动条发生位置变化，一直固定在可视区域，脱离文档流，不占据页面空间，会变为块级元素，永远都是相对于浏览器实现位置初始化。

5、position:sticky:设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

6、fixed-top:固定在浏览器页面顶部。

7、fixed-bottom：固定在浏览器页面底部。

8、sticky-top：固定在浏览器页面的顶部。

十、阴影

1、shadow-none：无阴影

2、shadow-sm:小阴影

3、shadow:一般阴影

4、shadow-lg:大阴影

十一、尺寸

1、w- 宽度 、p-内边距、w-auto：宽度自动

2、h-高度、d-inline-block：行内块元素、h-auto：高度自动

3、mh-最大高度

4、相对于视口：min-vw- 、min-vh、vw-、vh-

十二、间距

1、m-:margin

2、p-:padding

3、t-:margin-top/padding-top

4、b-:margin-bottom/margin-bottom

5、l-:margin-left/padding-left

6、r-:margin-right/padding-right

7、x-:-left/-right

8、y-:-top/-bottom

9、0-：消除margin/padding

10、间距有1-5的取值范围

11、auto:设置margin为自动类

12、 mx-auto类，用于通过将水平边距设置为来将定宽块级内容（即具有display: block和一width组的内容）水平居中auto 。

13、负边距： margin属性可以使用负值（padding不能） 。

十三、拉伸链接

1、 添加.stretched-link到链接以使其包含块。 包含带有.stretched-link类链接的元素是可单击的。

2、卡片中添加：stretched-link

3、

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>

十四、文本

1、文本对齐：text-left、text-center、text-right

2、文字换行：text-wrap、text-nowrap

3、文字溢出： text-truncate 类将文本截断并添加省略号 ，但必须是 display: inline-block 或 display: block 类型。

4、单词中断： 可以防止长字符串破坏布局。 text-break 将长字符串设置为 overflow-wrap: break-word 属性。

5、文本转换：text-lowercase：转为小写的文本；text-uppercase：转为大写的文本；text-capitalize：转为首字母大写的文本。

6、字体粗细和斜体：font-weight-bold 粗体、font-weight-bolder 粗体粗体文本（相对于父元素）、font-weight-normal 普通重量文本、font-weight-light 重量轻的文本、font-weight-lighter较轻的文本（相对于父元素） 、font-italic斜体文字

7、等宽字体： text-monospace 类将所选内容更改为等宽字体 。

8、重置颜色： text-reset 类重置文本或链接的颜色，以便从父元素继承颜色属性 。

9、文字装饰： text-decoration-none 类去除文字的装饰。

十五、垂直对齐

1、align-baseline 基线 、align-top 顶部 、align-middle 中部 、align-bottom 底部 、align-text-top 文本顶部 、align-text-bottom 文本底部

2、还可以在表格中使用。

十六、可见性：

1、 visible ：可见

2、 invisible ：不可见

十七、flex布局：

1、d-flex：flexbox容器；d-inline-flex：嵌入式flexbox容器

2、d-flex有响应式变化，d-sm-flex...

3、方向：flex-row 水平左对齐、flex-row-reverse水平右对齐

flex-column 垂直对齐、 flex-column-reverse 开始从相对侧上的垂直方向 。 也存在的响应式变体

4、内容水平对齐方式：justify-content-start 左对齐、justify-content-end 右对齐、justify-content-center 居中对齐、justify-content-between 两端对齐、justify-content-around 两端留白对齐，具有响应式。

5、内容垂直对齐方式：align-items-start 上对齐、align-items-end 下对齐、align-items-center 居中对齐、align-items-baseline 上对齐、align-items-stretch 占满整个父元素的高度上对齐，具有响应式。

6、布局：具有响应式

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

7、使内容填充满整个容器：flex-fill。具有响应式。

8、撑开：flex-grow-1： flex-grow-1元素使用其可能的所有可用空间，同时为其余两个flex项目留出必要的空间 。

9、收缩： flex-shrink-1： flex-shrink-1被迫将其内容包装到新行中，“缩小”以为之前的flex项目留出更多空间 。

10、自动边距：mr-auto 右边、ml-auto左边

11、对齐项目：mb-auto下边、mt-auto上边

12、换行： flex-wrap 、不换行： flex-nowrap 、对侧换行：flex-wrap-reverse。具有响应式。

13、order：响应式下显示模块的顺序。例如：order-2 、order-1、order-3。顺序为：中、左、右。在布局页面时很方便。

14、对齐内容（混合使用）：align-content-start flex-wrap 上对齐换行、align-content-end flex-wrap下对齐换行、align-content-center flex-wrap居中对齐换行、align-content-between flex-wrap 上下对齐换行、align-content-around flex-wrap 上下留白居中对齐、align-content-stretch flex-wrap 占满父元素上下对齐。