抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

实用css笔记

Mr.wang
css

发布于：2020年1月1日
次浏览

记录开发过程中的css,less使用

如何清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。

使用after伪元素清除浮动

1
2
3
4
5
6
7
8
.clearfix:after {
  content: ""; 
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}   
.clearfix {*zoom: 1;}   /* IE6、7 专有 */

使用before和after双伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以触发BFC BFC可以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

css英文单词不断开

1
2
3
4
word-break: break-all;
word-wrap: break-word;//英文
 word-break: keep-all;//保持英文单词完整
white-space: pre-wrap;//中文

移动端 100vh 问题

在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现：

你以为的 100vh === 视口高度

实际上 100vh === 视口高度 + 浏览器工具栏（地址栏等等）的高度

解决方案

安装 vh-check npm install vh-check --save

1
2
import vhCheck from 'vh-check';
vhCheck('browser-address-bar');

定义一个 LESS Mixin

1
2
3
4
.vh(@height: 100vh) {
  height: @height;
  height: calc(@height - var(--browser-address-bar, 0px));
}

媒体查询

区分设备类型

1
2
3
all (所有的设备)
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

特性

1
2
3
4
5
width网页显示区域完全等于设置的宽度
height网页显示区域完全等于设置的高度
max-width / max-height网页显示区域小于等于设置的宽度
min-width / min-width网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式)  | landscape (横屏模式)

关键字

1
2
3
and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性 相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

语法

1
2
3
4
5
6
7
8
9
10
11
12
//外联样式
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
//内联样式
    - 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
//多个条件联写
@media only screen and (width: 320px) and (height: 568px) {}
@media only screen and (min-width:400px) and (max-width:600px){}

浏览器查询Unicode编码

浏览器控制台输出 escape(‘查询字符串’)

less

less中的变量

1
2
3
4
5
6
7
8
9
10
11
12
13
/*如何定义
@变量名=变量值
如何使用
在样式中
属性:变量名
例子
定义*/
@color=#f00；
/*使用*/
a{
color:color;
background:color;
}

less的循环 ，使用递归

1
2
3
4
5
6
7
8
9
10
11
12
.box1{
    border-bottom:10px solid #ccc;
}
.box2{
    border-bottom:20px solid #ccc;
}
.box3{
    border-bottom:30px solid #ccc;
}
.box4{
    border-bottom:40px solid #ccc;
}
1
2
3
4
5
6
7
.loop(@cout)when(@cout>0){
    .loop((@cout-1))
    .box@{cout}{
        border-bottom:@cout+0px solid #ccc;
    }
}
.loop(3)

原生css的声明变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*声明变量 使用 -- 关键字
调用变量 使用 var() 函数*/
a{
	--color: red;
      /* 使用变量 必须放在var函数内 */
    background-color: var(--color);
}
var(--变量名,参数)
 div {
      height: 500px;
      /* 默认参数  200px */
      padding-top: var(--padding-top,200px);
      /* 默认参数 10px solid red */
      border: var(--border, 10px solid red);
      /* 默认参数  linear-gradient(yellow,red) */
      background-image: var(--img,linear-gradient(yellow,red));
    }

css的计算（calc）

1
2
3
div{
	height:calc(100px*90)
}

将超出的文本以…的方式缩减

1
2
3
4
5
6
7
8
9
.line2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

flex弹性布局子元素居中

1
2
3
4
5
div{
    display:flex;
    justify-content:center;
    align-content:center;
}

使用:not()选择器

1
2
3
ul>li:not(last-child){
    border-right: 1px solid #666;
}

not()是可以令最后一项li不加右边框，表示否定

使用伪类+content+position+transform实现文字或者图形的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*文字实现 ° 度数单位*/
 div {
         width: 150px;
         height: 30px;
         border: 1px solid #000;
         position: relative;
   }

div::after {
         content: '°';
         position: absolute;
         top: 0;
         right: 10px;
  }

bing.com搜索的国际版按钮的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
span {
    width: 82px;
    height: 36px;
    display: block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
}

span i {
    position: absolute;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

span::after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px rgba(255, 255, 255, 0.2) solid;
    border-bottom: none;
    transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);  /*重点*/
    transform-origin: bottom left;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1px 2px 0 0;
    box-sizing: border-box;
}
</style>

<body>
    <span>
        <i>国际版</i>
    </span>
</body>

使用overflow-x排版横向列表

1
overflow-x:auto

说明：通过flexbox或inline-block的形式横向排列子元素，对父元素设置overflow-x:auto横向滚动查看，或者设置overflow-x:auto 纵向滚动条一般用于商品分类

使用letter-spacing排版倒序文本

1
letter-spacing:-10px

说明：通过letter-spacing设置负值字体间距将文本倒序

使用::selection改变文本选择颜色

1
2
3
.demo::selection{
    background-color: green;
}

说明：可以让你选择的文字设置单独的css样式

css禁用鼠标事件

1
2
3
4
5
.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

css字体不让选中

class样式添加以下：

1
2
3
4
5
6
7
8
9
10
div{
-webkit-user-select:none;

   -moz-user-select:none;

   -ms-user-select:none;

   user-select:none;

}

css之滚动条

当设置这两个属性时，只允许Y轴滚动（纵向）

1
2
overflow: scroll;
overflow-x: hidden;

自定义滚动条的css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
html::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    background:#ccc;
}
/*定义滑块 内阴影+圆角*/  
html::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
/*定义滚动条轨道 内阴影+圆角*/  
html::-webkit-scrollbar-track {
    background: #fff;
}

Flexible的使用

目前Flexible会将视觉稿分成**100份**（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1
2
1a   = 7.5px
1rem = 75p

cssrem

所有的下载插件都可以在文件->首选项->设置进行修改

某些插件需要重启才能进行使用

sroll-snap-type

这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。

mandatory：强制性

强制使滚动条停止在scroll-snap-align:设定的位置

scroll-snap-type: x mandatory;对于X轴的捕捉控制，scroll-snap-align: center;强制使li回到中间

proximity 接近、临近、大约

滚动结束后可能还在原来的地方，也可能额外滚动

scroll-snap-margin/scroll-snap-padding

可以设定margin padding 进行控制，滚动条的盒子属性

scroll-snap-type: both mandatory

对于X和Y轴同时可进行滚动

scroll-snap-align: start | center | end;

子元素相对于父元素的对其方式

1
2
3
4
5
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
1
2
3
4
5
6
7
ul {
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
}

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2020/01/01/css-%E5%AE%9E%E7%94%A8css%E7%AC%94%E8%AE%B0/

本页文档最后更新于：2021年11月10日

javascript

css

评论