pleasestartyourperformance / css-content Goto Github PK
View Code? Open in Web Editor NEWcss-常见问题整理
css-常见问题整理
flex布局的盒模型box-sizing是content-box,是不包含内边距的
box-sizing: border-box;
1、一般z-index的使用是在有两个重叠的标签,在一定的情况下控制其中一个在另一个的上方出现。
2、z-index值越大就越是在上层。z-index:9999;z-index元素的position属性要是relative,absolute或是fixed。
3、z-index在一定的情况下会失效。
①、父元素position为relative时,子元素的z-index失效。
解决:父元素position改为absolute或static
②、该元素没有设置position属性为非static属性。
解决:设置该元素的position属性为relative,absolute或是fixed中的一种。
③、该标签在设置z-index的同时还设置了float浮动
解决:float去除,改为display:inline-block;
先看下样图:
有动画效果展开收起那种感觉,
主要分三层:
up-dialog:主体盖住全部
dialog-model:黑色半透明那个遮罩
dialog-content:主要内容
原理:
up-dialog利用visibility显隐可以使用动画单纯地v-if 或者 react的if 会导致动画消失
dialog-model用opacity控制
dialog-content向上 还是向下动画利用transform
<View className={'up-dialog'} style={{visibility:showTimeFilter ? 'visible' : 'hidden'}}>
<View className={'dialog-model'} onClick={()=>{ setShowTimeFilter(false)}} style={{opacity:showTimeFilter ? 1 : 0}}> </View>
<View className={'dialog-content'} style={{transform:showTimeFilter ? 'translate3d(0,0,0)' : ''}}>
<View className={'dialog-content-card'}>
1231312
</View>
</View>
</View>
.up-dialog{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
visibility: hidden;
transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.dialog-model{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0,0,0,.3);
transition: opacity 300ms ease-in;
}
.dialog-content{
position: absolute;
top: 0;
width: 100%;
height: 544px;
background: #F8F8F8;
border-radius: 0 0 20px 20px;
padding: 30px;
box-sizing: border-box;
transform: translate3d(0,-100%,0);
transition: transform 300ms cubic-bezier(.36,.66,.04,1);
}
.dialog-content-card{
background: #fff;
}
showTimeFilter 为true 显示 false隐藏帘幕
flex:1表示以上内容,翻译过来就是
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值,并且将根据可用的屏幕大小占用屏幕。例如: - 如果包装器中有3个div,则每个div将占用33%。
<div style="display: flex;width: 300px;border: 1px solid rebeccapurple;">
<div style="flex: 1;border: 1px solid red;height: 50px;margin-left: 20px">
123
</div>
<div style="flex: 1;border: 1px solid blue;height: 50px;margin-left: 20px">
123
</div>
<div style="flex: 1;border: 1px solid blue;height: 50px;margin-left: 20px">
123
</div>
</div>
首页显示多个功能按钮,采用 flex 布局,一行3个按钮。每个按钮之间等间距。
<div class="container test1">
<div class="box test2">
<div class="content">title</div>
</div>
<div class="box test2">1</div>
<div class="box test2">1</div>
<div class="box test2">1</div>
<div class="box test2">1</div>
<div class="box test2">1</div>
<div class="box test2">1</div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.box {
flex-basis: 30%;
margin-top: 2.5%;
}
.content {
padding: 1em;
}
.box:last-child {
margin-bottom: 2.5%;
}
.test1 {
background-color: blue;
width: 300px;
}
.test2 {
height: 80px;
background: yellow;
}
flex-wrap
flex-wrap 的默认值是 nowrap,即不换行。
非常奇葩的是,flex-wrap 这个设置会覆盖掉 flex-basis 的设置。
无论你 flex-basis 设置成什么宽度,只要 flex-wrap 是 nowrap,所有子元素都会挤在一行。
所以,这里 flex-wrap 需要显示的设置成 wrap.
justify-content
space-between 与 space-evenly 的区别:
space-evenly:evenly 是均匀的意思,均匀排列每个元素,每个元素之间的间隔相等
space-between:虽然也是元素等间隔分布,但是首尾元素是贴边的
flex-basis
这也是我第一次见到的 flex 属性。。。
其实我不明白 flex-basis 与 width 的区别,查了一下,网上都是长篇大论,没有一个我有耐心冲头到尾看完的。
说一下,我的实际测试结果,这个例子中,如果把 flex-basis 换成 width,实际上是完全可以的,显示效果完全一样。
但是根据文档所说,flex-basis 的默认值是 auto,对元素宽度的影响优先于 width,所以,flex 子元素最好使用 flex-basis。
还有一点非常重要,flex-basis 在 box-sizing 为 content box,而不是 border box 时,决定的是 content 的宽度。所以,一旦子元素增加了 border 以及 padding 之后,布局就会乱掉,原因就是子元素的实际宽度变成了 flex-basis + border + padding。
这里就引出了另外一个话题,如果想对子元素的外观做设置需要怎么办?
如果最后一行元素想靠左排列呢
父级改成:
justify-content: space-between;
子元素在最后加上一个 height 为 0,padding 为 0,border 为 0 的元素。这样就能保证布局是左侧排列了。
width:100%;
height:615px;
background:url('../../../static/img/humanReport/bg-power-report.png') no-repeat;
background-size:cover;
background-size:cover 可以再放大的时候背景图跟着放大
本应该在父盒子内部的元素跑到了外部。
二,为什么会出现盒子塌陷?
当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。
1.最简单,直接,粗暴的方法就是盒子大小写死,给每个盒子设定固定的width和height,直到合适为止,这样的好处是简单方便,兼容性好,适合只改动少量内容不涉及盒子排布的版面,缺点是非自适应,浏览器的窗口大小直接影响用户体验。
2.给外部的父盒子也添加浮动,让其也脱离标准文档流,这种方法方便,但是对页面的布局不是很友好,不易维护。
3.给父盒子添加overflow属性。
overflow:auto; 有可能出现滚动条,影响美观。
overflow:hidden; 可能会带来内容不可见的问题。
4.父盒子里最下方引入清除浮动块。最简单的有:
有很多人是这么解决的,但是我们并不推荐,因为其引入了不必要的冗余元素 。
5.after伪类清除浮动。
外部盒子的after伪元素设置clear属性。
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom, red 0%, red 80%, transparent 50%);
background-size: 3px 18px;
background-repeat: y-repeat;
::v-deep .el-dialog{
background: url(~@/assets/images/szDialog/dialog_bg.png);
background-size: 100% 100%;
}
::v-deep .el-dialog__header{
padding: 15px 0 15px 20px;
}
::v-deep .el-dialog__body{
padding-top: 10px;
padding-bottom: 27px;
}
::v-deep .el-dialog__headerbtn{
background: url(~@/assets/images/szDialog/dialog_close.png);
background-size: 100% 100%;
width: 32px;
height: 32px;
top: -1px;
right: -2px;
}
::v-deep .el-dialog__title{
font-weight: 500;
font-size: 18px;
color: #ECFFFE;
}
::v-deep .el-dialog__close{
display: none;
}
::v-deep .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
background: rgba(0,50,53,0.3);
border-radius: 2px;
border: 1px solid rgba(48,253,255,0.5);
color: #30FDFF;
box-shadow: none;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0080C2 !important;
color: #DCF0FF !important;
}
::v-deep .el-pagination__goto{
font-size: 14px;
color: #30FDFF;
}
::v-deep .el-pagination__classifier{
font-size: 14px;
color: #30FDFF;
}
::v-deep .el-pagination.is-background .el-pager li{
background: rgba(0,50,53,0.3);
border-radius: 2px;
border: 1px solid rgba(48,253,255,0.5);
color: #30FDFF;
box-shadow: none;
}
::v-deep .el-pagination.is-background .el-pager li.is-active{
background: #1C9CA2;
color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev{
background: rgba(0,50,53,0.3);
border-radius: 2px;
border: 1px solid rgba(48,253,255,0.5);
color: #30FDFF;
box-shadow: none;
}
.search-map-pagination{
border: 1px solid #0199AF !important;
background: rgba(7,23,43,0.5) !important;
.el-select-dropdown__wrap{
background: rgba(0, 56, 64,0.8);
}
.el-select-dropdown__item{
color: #fff;
font-weight: 400;
font-size: 14px;
}
.el-select-dropdown__item.selected{
background: transparent;
color: #00DFFF;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background: transparent;
color: #00DFFF;
}
}
::v-deep .el-table__empty-text{
font-size: 14px;
color: #fff;
}
/deep/ .el-table__empty-block{
border-top: 0 !important;
}
::v-deep .el-table .el-table__header-wrapper th{
background-color: rgba(5,41,48,0.7) !important;
color: #B1FFFA;
border-bottom: 0;
}
::v-deep .el-table{
background-color: transparent !important;
}
::v-deep .el-table tr{
background-color: rgba(5,41,48,0.1);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
background-color: rgba(5,41,48,0.5)
}
::v-deep .el-table .el-table__cell{
color: #fff;
border: 0;
}
::v-deep .el-table .el-table__body tr:nth-child(odd).el-table__row:hover > td {
background-color: inherit !important; /* 或者你想设置的任何颜色 */
}
::v-deep .el-table .el-table__body tr:nth-child(even).el-table__row:hover > td {
background-color: #0b294a !important; /* 或者你想设置的任何颜色 */
}
::v-deep .el-table__inner-wrapper::before{
display: none;
}
/deep/ .el-select .el-input__inner{
background: rgba(0,45,84,0.2);
font-size: 14px;
color: #ACDAFE;
border: 1px solid #7CA9CB;
}
//三角
/deep/ .el-select .el-input .el-select__caret{
color: #8DB7DC;
}
.my-search-green-dialog{
border: 1px solid #0199AF !important;
background: rgba(0, 56, 64,0.8) !important;
.el-dropdown-menu{
//background: transparent;
background: rgba(0, 56, 64,0.8);
padding: 0;
}
.el-select-dropdown__item.selected{
background: transparent;
color: #30FDFF;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background: transparent;
color: #30FDFF;
}
.el-select-dropdown__item{
color: #fff;
font-weight: 400;
font-size: 14px;
}
.popper__arrow{
border-bottom-color:#8DB7DC!important;
}
.popper__arrow::after{
border-bottom-color:#8DB7DC!important;
}
.el-popper__arrow{
display: none;
}
}
.my-picker-green-dialog{
.el-picker-panel__content{
background: rgba(0,45,84,1) !important;
color: #8DB7DC !important;
}
.el-picker-panel__icon-btn{
color: #8DB7DC;
}
.el-date-range-picker__header{
color: #8DB7DC;
}
.popper__arrow{
display: none !important;
border-bottom-color:#8DB7DC!important;
}
.el-date-table th{
color: #8DB7DC;
}
.el-date-table td.in-range div{
//background-color: #666;
}
}
::v-deep .el-input__inner{
background: rgba(0,45,84,0.2);
font-size: 14px;
color: #ACDAFE;
border: 1px solid #7CA9CB;
}
/deep/ .el-input--prefix .el-input__inner{
background: rgba(0,45,84,0.2);
border: 1px solid #7CA9CB;
color: #fff;
}
单独class
.sz-date-picker{
background: rgba(0,45,84,1) !important;
color: #8DB7DC !important;
.el-picker-panel__icon-btn{
color: #8DB7DC;
}
.el-date-range-picker__header{
color: #8DB7DC;
}
.popper__arrow{
display: none !important;
border-bottom-color:#8DB7DC!important;
}
.el-date-table th{
color: #8DB7DC;
}
}
我们为了可以取出元素的自然高度,是将元素的height属性设置成auto的,
也就是说我们每次去取每次都设置为auto,
但这样存在的一个问题就是:会覆盖前面的状态,
如果,一开始的height是0px, 然后你将height设置为200px,
这里两端都是明确的值,当然会发生过渡,
但如果你为了取自然高度,在中间设置了一个auto,比如
先是height: 0px, 再height: auto, 再height: 200px;
这样,就是从auto 过渡到 200px, 由于auto不是确定的值,因此过渡不会发生
import React, {useEffect, useState} from "react";
import './overtime-statistic.scss';
import {View} from "@tarojs/components";
import {AtIcon} from "taro-ui";
interface Props{}
const AccordionList: React.FC<Props> = () => {
const [isShow, setIsShow] = useState(true);
useEffect(()=>{
const dom:any = document.getElementById('card-content');
dom.dataset.height = dom.offsetHeight;
dom.style.height = '0px'
console.log(dom);
},[])
useEffect(()=>{
const dom:any = document.getElementById('card-content');
if(isShow){
dom.style.height = dom.dataset.height + 'px'
}else{
dom.style.height = '0px'
}
},[isShow])
const iconClick = ()=>{
setIsShow(!isShow)
}
return(
<View className={'card-block mock_del'}>
<View>
我是头部
<AtIcon
className={isShow ? 'card-icon-rotate' : 'card-icon-no-rotate'}
value='chevron-right' size='30'
color='#999'
onClick={() => {
iconClick()
}}
/>
</View>
<View className={isShow ? 'card-show card-content' : 'card-hide card-content'} id={'card-content'}>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
<View>1231312313</View>
</View>
</View>
)
}
export default AccordionList;
.card-block{
padding: 0 30px;
background: #F9F9F9;
}
.card-content{
overflow: hidden;
margin-top: 20px;
box-sizing: border-box;
border-radius: 8px;
color: #666;
font-size: 24px;
transition: 0.5s;
height: auto;
}
import bg1 from 'src/common/assets/img/employee/wecome_bg_1.png'
public bg1 = bg1
<div class="preview-content" :style="{backgroundImage:`url(${bg1})`}">
</div>
background-repeat: no-repeat;
background-position: center center;
background-size:100% 100%;
::v-deep .el-select {
.el-select__tags {
.el-tag {
// 注意这个inline-block 对卡片溢出隐藏很重要
display: inline-block;
// 解决单个tag文字过长溢出隐藏问题
.el-select__tags-text {
display: inline-block;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-icon-close {
top: -6px;
right: -4px;
}
}
}
}
<div class="platform ">
<span class=" circle circle-left"></span>
<span class="circle circle-right"></span>
</div>
body{
background: #0C0C0C;
}
.circle{
position: absolute;
display: inline-block;
width:15px;
height: 15px;
border-radius: 50px;
/* background-color: aquamarine; */
text-shadow: 0px 10px 20px #fff;
/* background: #000; */
background-image: radial-gradient(#cdffff 10%,#44e9f3);
box-shadow:0px 2px 8px rgba(225,255,255,0.6);
}
.circle-right{
left:-92px;
top:-445px;
motion-path: path("M1027.77,517h45.96s16.25,0.206,20.98,15c8.44,20.045,85.92,214,85.92,214s8.35,18.469,2,28c-5.59,8.4-25.98,8-25.98,8L779,783");
offset-path: path("M1027.77,517h45.96s16.25,0.206,20.98,15c8.44,20.045,85.92,214,85.92,214s8.35,18.469,2,28c-5.59,8.4-25.98,8-25.98,8L779,783");
animation: moveRight 8s linear infinite;
}
@keyframes moveRight {
100% { motion-offset: 100%;}
100% { offset-distance: 100%;}
}
.circle-left{
left:-82px;
top:-430px;
motion-path: path("M376,502H330s-16.269.206-21,15c-6.938,14.045-86,214-86,214s-8.354,18.469-2,28c5.6,8.4,26,8,26,8H625");
offset-path: path("M376,502H330s-16.269.206-21,15c-6.938,14.045-86,214-86,214s-8.354,18.469-2,28c5.6,8.4,26,8,26,8H625");
animation: moveLeft 8s linear infinite;
}
@keyframes moveLeft {
100% { motion-offset: 100%;}
100% { offset-distance: 100%;}
}
css 未提供文字渐变色属性,偏方 为 设置外层background为 白色,内层文字透明,背景色渐变色
.text-gradient{
-webkit-text-fill-color: transparent;
background: linear-gradient(112deg, #55ADED 18%, #8669FF 63%, #CE4CEB 102%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
//单行省略
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//多行换行省略
{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
“我的文件不知道在那里呢
你告诉我在...好吗.pdf”
https://www.npmjs.com/package/react-lines-ellipsis
import LinesEllipsis from 'react-lines-ellipsis';
<LinesEllipsis
text='long long text'
maxLine='3'
ellipsis='...'
trimRight
basedOn='letters'
/>
问题:border-image 和 border-radius 并不兼容
解决
.div{
width: 284px;
height: 48px;
border-radius: 10px;
position: relative;
border: 0 ;
padding: 1px 1px;//使用padding来给背景颜色
border-image: linear-gradient(104deg, #5BD1EF 19%, #87D342 84%) 1.4;
background-clip: content-box,border-box;
background-image: linear-gradient(#fff, #fff), linear-gradient(104deg, #5BD1EF, #87D342);
display: flex;
align-items: center;
}
需要给border 0 不然的话,safri浏览器 会显示无圆角的边框子
缺点:背景无法透明,并且当前元素无法设置padding,设置的话会导致边框超级大
这几个要一起设置哦
::-webkit-scrollbar {
width: 7px;//宽度设置的是竖向滚动条的宽度
height:7px //高度是设置横向滚动条的高度
}
::-webkit-scrollbar-track {
border-radius: 7px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 7px;
background: rgba(0, 0, 0, 0.1);
}
1.z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话,是不会有效果的
2.同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用
失效的情况:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
4、问题标签的祖先标签的z-index值比较小
解决方法:
第一种: position:relative改为position:absolute;
第二种:浮动元素添加position属性(如relative,absolute等);
第三种:去除浮动。
第四种:提高父标签的z-index值
opcity属性,当你要设置两个元素的z-index值的时候,要注意是否给其中一个元素添加了opcity属性,如果添加了,那么添加了opcity属性的元素将一直在最上层
还有就是比较普遍的,我们设置层级一般都是因为设置了position,当你设置的两个子元素,一个有position属性,另一个没有position的时候,拥有position属性的元素将一直在其他元素上方。如下面的例子
需要给c也加上position属性才让bc可以先同处一级,然后z-index才会起作用。
那如果我把子元素的position都去掉呢?当父盒子有position而所有子元素都没有position属性的时候,z-index一样全部失效,后面的盒子将会覆盖前面的盒子,z-index无效。
同样的我们两个都加上浮动的效果跟上面的效果是一样的,后覆盖前,z-index无效
一个加float另一个不加,则是加float的元素一直浮动在最上层。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.