使用Flex布局居中
.box {
display:flex;
align-items:center;/*垂直对齐*/
justify-content:center;/* 水平对齐*/
}
修改input的checkbox样式
第一种
html
<div class="box">
<input id="fruit" type="checkbox" checked />
<label for="argee"></label>水果
</div>
sass
.box {
position: relative;
label{
&::before{
content: '\0020';
display: inline-block;
width: 17px;
height: 17px;
font-size: 15px;
margin-right: 10px;
position: absolute;
background-color: #fff;
transform: translate(-1.5em, -0.5em);
}
}
#fruit + label::before{
border-radius: 3px;
}
#fruit{
display: none;
}
#fruit:checked + label:before{
content: '\2713';
font-size: 15px;
color: #cb9f6d;
text-align: center;
line-height: 17px;
}
}
第二种
html
<p class="agreement">
<input type="checkbox" id="agree" v-model="agree">我接受
</p>
sass
.agreement{
font-size: 0.3rem;
text-align: center;
margin-top: 0.7rem;
input[type=checkbox]{
margin-right: 0.1rem;
outline: none;
appearance: none;
width: 0.22rem;
height: 0.22rem;
border: 1px solid #29dce3;
border-radius: 0.05rem;
&:checked{
background: url('../assets/image/checkbox.png') center center no-repeat;
background-size: 0.22rem 0.22rem;
border-color: transparent;
}
}
模拟等待进度(简易)
html
<div class="clipped">
<div class="top"></div>
</div>
css
div{
box-sizing: border-box;
}
.clipped {
position: relative;
width: 200px;
height: 200px;
margin: 15vh auto;
border-radius: 50%;
border: 10px solid skyblue;
background-color: #fff;
}
.top{
position: absolute;
width: 100px;
height: 20px;
background-color: #fff;
top: 50%;
left: 50%;
transform-origin: 0 10px;
transform: translate(0,-50%);
animation: circle1 5s linear 0s infinite;
}
@keyframes circle1 {
from {
transform: translate(0,-50%) rotate(-90deg);
}
to {
transform: translate(0,-50%) rotate(270deg);
}
}
css变量
- 变量区分大小写
- 变量只能用于属性值，不能用于属性名
- 变量是字符串可以与其他字符串拼接
div{
--bar: 'hello';
--foo: var(--bar)' world';
}
- 变量值是数值，则不能与数值单位直接连用，必须使用calc()函数将其连接
div{
--gap: 20;
/*下面是无效的*/
margin: var(--gap)px;
/*生效*/
margin: calc(var(--gap)*1px);
}
- 如果变量值带有单位，就不能写成字符串
/*无效*/
.foo{
--foo: '20px';
font-size: var(--foo);
}
/*生效*/
.foo{
--foo: 20px;
font-size: var(-foo);
}
:root{
/*全局声明变量*/
--global: #aaa;
}
body{
/*声明变量*/
--primary: #ddd;
}
div{
/*局部声明*/
--secondary: #eee;
}
div a{
/*读取变量*/
color: var(--primary);
text-decoration-color: var(--secondary);
border-color: var(--global);
/*变量默认值，如果变量不存在，则使用后面的值*/
/*后面的值是以 类似 模板字符串 的形式解析*/
background: var(--color, #333);
}
/*响应式布局*/
@media screen and (max-width: 768px){
:root{
--global: #bbb;
}
body{
--primary: #ccc;
}
}
js中的css变量
JavaScript 也可以检测浏览器是否支持 CSS 变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
js操作css变量
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
js和css实现通信
document.addEventListener('click',(e)=>{
const docStyle = document.documentElement.style;
docStyle.setProperty('--mouse-x',e.clientX);
docStyle.setProperty('--mouse-y',e.clientY);
docStyle.setProperty('--if',if(x>5) this.width = 10);
})
div{
--if: if(x>4) this.width = 10;
}
CSS控制文字，超出部分显示省略号
单行
.ellipsis {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多行
- 移动端和WebKit浏览器
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
- 不管超不超出都显示
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
CSS background-image: 路径中有括号时不显示
在css中设置背景图片，结果地址中有括号，导致图片请求失效
/*
* 这样会不显示
*/
div {
background-image: url(http://xxxx-(12)-xxx.png)
}
/*
* 下面这样可以显示
*/
div {
background-image: url('http://xxxx-(12)-xxx.png')
}
原因：括号和url的括号冲突，在地址外面加引号解决识别冲突
文字两端对齐
html
<div>两端</div>
<div>两端对齐</div>
css
div {
margin: 10px 0;
width: 100px;
border: 1px solid;
text-align: justify;
text-align-last: justify;
}
div:after {
content: '';
display: inline-block;
width: 100%;
}
一些注意的问题
尽量用padding代替margin
margin-top的塌陷
两个同属一个BFC的相邻盒模型的margin会重叠
position:fixed 降级的问题
如果父元素中有使用transform，那么当前的position:fixed;效果会降级为position:absolute;
解决方案： 当直接父元素的高度和屏幕高度相同时,
fixed和absolute效果一样
用vm配合rem
scss
$vm_fontsize: 75;
@function rem($px) {
@return ($px / $vm_fontsize) * 1rem
}
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body增加限制，防止默认100%宽度的block元素随body过大而变形
body {
max-width: 540px;
min-width: 320px;
}
解决1px方案
移动端要处理1px细线问题
css
.border {
overflow: hidden;
position: relative;
border: none!important;
}
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 200%;
height: 200%;
border: 1px solid red;
transform-origin: 0 0;
transform: scaleY(0.5);
}
选择除某个元素标签外的所有标签
<!-- 选择除p标签外的所有标签 -->
:not(p) {
margin: 0;
padding: 0;
}
