css一些记录

2019-08-16  本文已影响0人  小小了墨

使用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变量

  1. 变量区分大小写
  2. 变量只能用于属性值，不能用于属性名
  3. 变量是字符串可以与其他字符串拼接
div{
    --bar: 'hello';
    --foo: var(--bar)' world';
}
  1. 变量值是数值，则不能与数值单位直接连用，必须使用calc()函数将其连接
div{
    --gap: 20;
    /*下面是无效的*/
    margin: var(--gap)px;
    /*生效*/
    margin: calc(var(--gap)*1px);
}
  1. 如果变量值带有单位，就不能写成字符串
/*无效*/
.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;
}

多行

  1. 移动端和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 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

  1. 不管超不超出都显示
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;
}
上一篇 下一篇

猜你喜欢

热点阅读