CSS笔记

前端学习笔记专栏区别于官网中全面的知识讲解，主要记录学习技术栈时对于重点内容的提炼，便于对技术栈知识的快速回顾以及使用

1.各类主要选择器

• 常规选择器
  • p：元素选择器
  • .class：类选择器
  • #id：id选择器
  • input[type="text"]：属性选择器
  • div p：后代选择器
• 常用选择器
  • 父级是div元素的p元素：div>p
  • div元素之后的第一个p元素（兄弟元素）：div+p
  • p元素之后的每一个ul元素：p~ul
  • p元素是其父级的第一个子级：p:first-child
  • p元素是其父级的第二个子级：p:nth-child(2)
  • p元素是其父级的第一个p元素：p:first-of-type
  • p元素是其父级的第二个p元素：p:nth-of-type(2)
  • p元素前后插入内容：p:before / p:after
  • 并非p元素的元素：:not(p)
• 特殊选择器
  • 具有焦点的input元素：input:focus
  • p元素的第一个字母：p:first-letter
  • p元素的第一行：p:first-line

2.各类非常规样式属性

• background
  • 图像在对应方向上平铺：background-repeat: repeat-x/repeart-y/no-repeat
  • 图像在背景中的位置：backgrounf-position: right top
  • 图像在背景中是否固定或随页面滚动：backgrounf-attachment: fixed
• text
  • 元素内文本左右两端对齐：text-align: justify
  • 设置文本的装饰：text-decoration: none/underline/line-through
  • 文本转换大小写：text-transform: uppercase/lowercase/lowercase
  • 文本第一行缩进：text-indent: 50px
  • 文本换行：white-space: nowrap
  • 文本垂直对齐：vertical-align: middle
• position
  • 跨越阈值前相对定位，跨越后固定定位：position: sticky
• @media
  • 根据媒体类型选择不同样式：@media screen/print
  • 根据屏幕大小选择不同样式：@media (max-width:600px)

3.对齐

• 水平对齐：
  • text-align: center
  • width: 50%; margin: auto;
• 垂直对齐：
  • vertical-align: middle
  • padding: 70px 0
  • line-height: 40px; height: 40px;
  • position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  • display: flex; align-items: center; justify-content: center;
• 左右对齐
  • position: absolute; right: 0;
  • float: right/left

4.盒子模型

• 由外到内：margin、outline(不占用weight与height)、border、padding、content
• 属性顺序：上右下左、上（左右）下、（上下）（左右）
• box-sizing:
  • content-box：width仅包括content（默认）
  • border-box：width包括content、padding、border
• BFC触发特性
  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cell、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)
• BFC布局规则
  • 内部的盒子垂直方向上排列
  • BFC内两个相邻box的margin会发生重叠(margin塌陷)
  • 每个盒的左外边界挨着包含块的左外边界，即使存在浮动
  • BFC的区域不会与float元素重叠
  • BFC是独立的容器，容器内的子元素不会影响到外面的元素，反之亦然。
  • 计算BFC的高度时，浮动元素会撑起父元素的高度。
• BFC应用
  • 自适应两栏布局：利用BFC与float元素不会重叠的特性
  • 解决margin塌陷：将两个盒子放在不同的BFC中
  • 父元素内部高度为0：子元素浮动导致父元素高度为0，父元素设置为BFC

5.CSS3新增特性

• 边框：
  • 边框图片：border-image: url(border.png) 30 30 round
  • 阴影：box-shadow: 10px 10px 5px #888888;
  • 圆角：border-radius: 25px;
• 背景：
  • 背景图片：background-image: url(img_flwr.gif)
  • 背景图片尺寸：background-size: 80px 60px;
  • 背景图片的位置区域：background-origin: content-box/padding-box/border-box
  • 背景的绘制区域：background-clip: content-box/padding-box/border-box
• 渐变
  • 线性渐变：background-image: linear-gradient(to right, red , yellow);
  • 径向渐变：background-image: radial-gradient(red, yellow, green);
• 文本效果
  • 文本阴影：text-shadow: 5px 5px 5px #FF0000;
  • 盒子阴影：box-shadow: 10px 10px grey;
  • 文本溢出：text-overflow: ellipsis;
  • 文本换行：word-wrap: break-word;
  • 单词拆分：word-break: break-all;
• 转换
  • 平移：transform: translate(50px,100px);
  • 2d旋转：transform: rotate(30deg);
  • 宽度高度放大/缩小：transform: scale(2,3);
  • 倾斜：transform: scale(2,3);
  • 3d旋转：transform: rotateX(30deg) / transform: rotateY(30deg);
• 过渡
  • 过渡：transition: width 2s, height 2s, transform 2s;
  • 属性：transition-property: width;
  • 持续时间：transition-duration: 1s;
  • 时间曲线：transition-timing-function: linear;
  • 延迟时间：transition-delay: 2s;
• 动画
  • 定义动画：@keyframes myfirst {from {background: red;} to {background: yellow;}}
  • 使用动画：animation: myfirst 5s;
• 弹性盒子
  • 定义：display: flex
  • 元素排列顺序：direction: rtl
  • 元素排列方式：flex-direction: row/colunmn
  • 元素主轴对齐方式：justify-content: center
  • 元素侧轴对齐方式：align-items: center
  • 元素换行方式：flex-wrap: wrap
  • 各行侧轴对齐方式：align-content: center
  • 元素顺序：order: 1
  • 元素居中：margin: auto
  • 元素扩大缩小比率：flex: 1 1 auto

6.文字超过显示省略号

// 显示单行
{
    white-space: nowrap; // 文本强制不换行；
    text-overflow: ellipsis; // 文本溢出显示省略号；
    overflow: hidden; // 溢出的部分隐藏；
}    

// 显示双行
{
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

7.特殊属性

• 选中没有子元素的元素：:empty
• flex布局中各元素的间距：gap：20px
• 背景颜色裁剪成文字部分：background-clip: text
• 文本禁止光标选中：user-select：none
• 设置自身/后代元素获取焦点时伪类：:focus-within
• 瀑布流布局布局划分列数：column-count: 2
• 瀑布流布局元素避免中断：break-inside: avoid