flex布局
flex: <flex-grow> <flex-shrink> <flex-basis>
默认值0 1 autoflex-grow
大小flex 增长系数flex-shrink
flex 元素的收缩规则flex-basis
在主轴方向上的初始flex-direction
主轴的方向flex-flow
flex-direction 和 flex-wrap 的简写flex-wrap
单行显示还是多行显示order
布局时的顺序
对齐属性。
align-content
[弹性盒子布局]的纵轴、[网格布局]的主轴的对齐align-items
[弹性盒子布局]交叉轴的对齐、[网格布局]块向轴上的对齐align-self
对齐当前 grid 或 flex 行中的元素,并覆盖已有的align-items
的值justify-content
[弹性盒子布局]主轴的对齐、[网格布局]的行向轴分配place-content
是align-content
和justify-content
的简写row-gap
行元素之间的间隙gutter大小column-gap
列元素之间的间隙gutter大小gap
是row-gap
和column-gap
的简写
有用的选择器
- p:first-of-type 、p:nth-of-type(2):其父级第一个元素(需要为p)
- p:first-child、p:nth-child(2):其父级下第一个p元素
- .className:not(p)
多行溢出
- 单行
css
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 多行
css
-webkit-line-clamp: 2;//(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。为了实现该效果,它需要组合其他的 WebKit 属性)
display: -webkit-box;//(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
-webkit-box-orient: vertical;//(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )
overflow: hidden;//(文本溢出限定的宽度就隐藏内容)
text-overflow: ellipsis;
- 基于 JavaScript 的实现方案
媒体查询
css
@media (min-width: 30em) and (max-width: 50em) { ... }
@media (30em <= width <= 50em ) { ... }
消除浮动
- 1、父级div定义overflow:hidden、overflow:auto、定义height
- 2、结尾处加空div标签clear:both
- 3、父级div定义伪类:after
css
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
js操作css
获取/设置 CSS 样式
ini
const element = document.getElementById("example");
const style = window.getComputedStyle(element);
element.style.backgroundColor = "red";
类名、样式名
ini
const element = document.getElementById("example");
element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active"); // 如果存在类名 active ,则删除,否则添加
element.className = "test";
尺寸、位置
ini
const element = document.getElementById("example");
console.log(element.clientWidth);
console.log(element.clientHeight);
console.log(element.offsetWidth);
console.log(element.offsetHeight);
element.style.width = "200px";
element.style.height = "100px";
动画
transform keyframes
css
#charactor1 {
animation: 3s linear 1s infinite cyclic1;
}
@keyframes cyclic1 {
from {
transform: rotate(0deg) translateX(200px);
}
to {
transform: rotate(360deg) translateX(200px);
}
}
#charactor2 {
animation: 3s linear 1s infinite cyclic2;
}
@keyframes cyclic2 {
from {
transform: translateX(200px) rotate(0deg);
}
to {
transform: translateX(200px) rotate(360deg);
}
}
@font-face 自定义网站字体属性,然后引用到想要应用该字体的元素上。
css
@font-face {
font-family: <font-name>;
src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
unicode-range: <unicode-range>;
font-variant: <font-variant>;
font-feature-settings: <font-feature-settings>;
font-variation-settings: <font-variation-settings>;
font-stretch: <font-stretch>;
font-weight: <font-weight>;
font-style: <font-style>;
font-display: <font-display>;
}
示例:
css
/* 加载一个本地字体 */
@font-face{
font-family: myFont;
src: local('Microsoft YaHei');
}
/* 加载多个本地字体 */
@font-face{
font-family: myFont;
src: local(黑体), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("PingFang SC"), local(sans-serif);
}
/* 应用自定义字体 */
.box{
font-family: myFont;
}
欢迎关注我的前端自检清单,我和你一起成长