前端学习笔记专栏区别于官网中全面的知识讲解，主要记录学习技术栈时对于重点内容的提炼，便于对技术栈知识的快速回顾以及使用
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)
- 父级是div元素的p元素：
- 特殊选择器
- 具有焦点的input元素：
input:focus - p元素的第一个字母：
p:first-letter - p元素的第一行：
p:first-line
- 具有焦点的input元素：
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: centerwidth: 50%; margin: auto;
- 垂直对齐：
vertical-align: middlepadding: 70px 0line-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
