浏览器内核

内核	css前缀	浏览器
Trident内核	css前缀为"-ms-"	IE
Gecko内核	css前缀为"-moz-"	火狐浏览器
WebKit内核	css前缀为"-webkit-"	safari chrome
Presto内核	css前缀为"-o-"	Opera（欧朋）

rem、em、px、vw、vh、百分比布局

em相对于父元素，rem相对于根元素。

vw、vh相对于视口的宽高

【margin和padding设置百分比】:margin 设置成百分比的时候，只跟父容器宽度有关

amfe-flexible：移动端适配解决方案

弹性布局

关于盒模型的理解

怪异模式（IE）：box-sizing:border-box;

标准模式（W3C）：box-sizing:content-box;

• content-box:不包括border, margin, padding
• padding-box:width和height属性包括padding的大小，不包括border和margin
• border-box:width和height属性包括padding和border，不包括margin。

BFC

直译为块级格式化上下文

内部的box会在垂直方向一个接一个的放置，但相邻的box margin会重叠

【注】:可以包裹一层使其成为两个BFC

是一个独立的容器，容器内的元素不会影响到外部的元素

计算BFC的高度时，浮动元素也参与计算（设置overflow:hidden，使其成为BFC，清除浮动）。

BFC的区域不会与float box重叠

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

伪元素（::）和伪类(: )

伪类：用于向某些选择器添加特殊的效果

伪元素：用于将特殊的效果添加到某些选择器

【区别】:有没有生成新的元素

display的属性

flex, table, gird（网格布局）

【flex的兼容】

【grid】:grid-template-columns:定义每一列的列宽；grid-template-rows:每行的行高

【display:none 与 visibility:hidden 的区别】:两者都会看不见，前者宽高等信息会消失，后者会占据空间

背景

背景一个长图，如何设置背景为图片中间一部分

 .page {background-image:url(...);background-size: 100%;background-position: center;background-repeat: no-repeat;}//或者.page {background:url(...) no-repeat center center ;background-size: 100%;

首页的大背景图，以防图片缩放变形

background: #111228 url("../images/home.png") center no-repeat;
background-size: auto 100%;

背景色渐变

线性渐变

   background: -webkit-linear-gradient(top,red,white,blue);     background: -moz-linear-gradient(top,red,white,blue);

使用css3滤镜写模糊背景

#blur{filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);-ms-filter:blur(10px);-o-filter:blur(10px);
}

商品图片

商品的图片有的可能会很大，那我们显示时不能被压缩
解决方法：
1.写背景图

<div class="goods-image" :style="{backgroundImage:'url('+ item.mainPhoto + ')' }" v-if="item.mainPhoto"></div>

2.使用object-fit

对图片进行剪切，保留原始比例：

object-fit: cover;

文字

文字竖向显示

writing-mode: vertical-lr;/*文字从左向右*/
writing-mode: tb-lr;

文字超出显示省略号

• 单行

.single-ellipsis{width: 500px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

• 多行

.multiline-ellipsis {display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 4; //需要显示的行数overflow: hidden;text-overflow: ellipsis;}

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

文字渐变

 background-image: -webkit-linear-gradient(bottom, #e86932, #ea412e);-webkit-background-clip: text;-webkit-text-fill-color: transparent;

滚动条

隐藏滚动条（滚轮写在对应的盒子里）

overflow-y: scroll;
scrollbar-width: none; /* Firefox */&::-webkit-scrollbar {display: none; /* Chrome Safari */
}

或者

::-webkit-scrollbar {display: none;width: 0 !important;height: 0 !important;-webkit-appearance: none;background: transparent;}

写滚动条样式

.scroll-container {height: 250px;border: 1px solid #ddd;padding: 15px;overflow: auto;.row {margin: 0;line-height: 1.5;}​&::-webkit-scrollbar {/*滚动条整体部分*/width: 8px;background: white;}&::-webkit-scrollbar-corner, /* 滚动条角落（边角） */&::-webkit-scrollbar-thumb,/*滚动条里的小块*/&::-webkit-scrollbar-track/* 滚动轨道*/ {border-radius: 4px;}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track {/* 滚动条轨道 */background-color: rgba(180, 160, 120, 0.1);box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);}&::-webkit-scrollbar-thumb {/* 滚动条手柄 */background-color: #00adb5;}}

input

鼠标点击 去掉input自带边框

{ outline: none }

修改placeholder样式

input {width: 100%;height: .84rem;line-height: .84rem;background: #F8F8F8;border-radius: .08rem;border: none;font-size: .32rem;padding: 0 .2rem;box-sizing: border-box;color: #666;&::-webkit-input-placeholder {/* WebKit browsers */color: #666;}&:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #666;}&::-moz-placeholder {/* Mozilla Firefox 19+ */color: #666;}&:-ms-input-placeholder {/* Internet Explorer 10+ */color: #666;}
}

垂直居中的方法

写三角形

/** 正三角 */.triangle {width: 0;height: 0;border-style: solid;border-width: 0 25px 40px 25px;border-color: transparent transparent rgb(245, 129, 127) transparent;}​/** 倒三角 */.triangle {width: 0;height: 0;border-style: solid;border-width: 40px 25px 0 25px;border-color:  rgb(245, 129, 127) transparent transparent transparent;}

写遮罩层

.dialog {position: fixed;z-index: 10;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.8);.content {position: absolute;width: 400rpx;height: 300rpx;background-color: red;left: 50%;top: 50%;transform: translate(-50%, -50%);}}
}

清除浮动

参考
方法1：

 .clearfix:after {content: "";display: block;visibility: hidden;height: 0;line-height: 0;clear: both;}

float之后，元素会居顶，如何居中显示
想要垂直居中，可以设置position

方法2：
添加 clear：both
方法3：
父元素添加overflow：hidden；

全屏灰色

使用滤镜filter的grayscale函数。

 <style>.filter {-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/filter: gray; /*ie9- */}</style><html class="filter"></html>

设置个别组件灰色

filter: grayscale(100%);//写入对应的组件css中

CSS实现自适应分隔线的方法

table

等宽表格单元格

.calendar {    table-layout: fixed;
}

test

1.商品主图放在一个盒子中。请编写样式，使得盒子宽200px,高200px， 商品主图在盒子中居中显示，主图有可能很大，也有可能很小。不管是很大或者很大，使图片等比缩放以保证长边缩放到200px，短的一边在盒子里面居中显示。

object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

如果是背景

.img{width: 200px;height: 200px;background: url(./img/test4.png) no-repeat center;background-size: contain;
}

2.页面在iPhone手机中底部空白导致按钮被隐藏

解决：

     padding-bottom:  constant(safe-area-inset-bottom);//兼容IOS<11.2padding-bottom:  env(safe-area-inset-bottom);//兼容iOS>=11.2//相当于在iphonex情况下，会自动加个padding-bottom的高度，不是的话就不生效，margin也行的哦

修改meta

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> //重点是红色部分

build up__css相关推荐

1. go build 编译报错 missing go.sum entry for module providing package

   go build 编译报错 missing go.sum entry for module providing package 解决方法 // 移除未使用的依赖 go mod tidy 再次编译,就可 ...

2. relay.build调用关系

   relay.build调用关系 在用TVM优化过程中,常见demo如下图: relay.build背后的调用机制梳理如下: python中的build函数实现如下,此方法实际调用了BuildModul ...

3. Android Build.VERSION.SDK_INT

   Build.VERSION.SDK_INT   代表的操作系统的版本号 ,谷歌的解释大致翻译如下 当前在此硬件上运行的软件的SDK版本装置.当设备启动时,此值从不更改,但它可能当硬件制造商提供OTA更 ...

4. No cached version of com.android.tools.build:gradle:2.0.0 available for offline mode.

   异常场景 从AS2.0升级到2.1,重新编译工程后,抛出了如下异常 Error:A problem occurred configuring root project 'AndroidStudioPr ...

5. Error:The SDK Build Tools revision (23.0.3) is too low for project ':app'. Minimum required is 25.0.

   导入github上项目的时候出现 Error:The SDK Build Tools revision (23.0.3) is too low for project ':app'. Minimum ...

6. Go 学习笔记（37）— 标准命令（go build 跨平台编译、交叉编译、go clean、go run、go fmt、go install、go get）

   1. 标准命令简述 Go 本身包含来大量用于处理 Go 程序的命令和工具. 命令 作用 build 用于编译指定的代码包或 Go 语言源码文件.命令源码文件会被编译成可执行文件,并存放到命令执行的目录 ...

7. android 多版本打包,Android build.gradle版本名打包配置的方法

   1.生成密钥文件到app工程目录下 2.在gradle.properties文件下配置密钥文件信息 # Project-wide Gradle settings. # IDE (e.g. Androi ...

8. Maven 的Could not calculate build plan错误解决方法（不一定适用，看原因）

   Maven 的Could not calculate build plan错误解决方法(不一定适用,看原因): 1.将C:\Users\a\.m2\repository\org\apache\mave ...

9. 【3】npm run build Vue的项目，如何修改相对路径配置

   如果静态文件不是部署在网站根目录下,vue-cli将给你造成巨大的麻烦,你不能直接把build好的文件抛进一个目录,你不能直接在本地打开用vue做好的静态网站.改成相对路径,主要需要做两步: 1.修改 ...

10. 权威解释IDEA的“Include in project build”打钩或者不打勾有啥区别？

    打钩后→Ctrl+F9 或者 就会在项目对应的目录生成war包 反之,如果不打勾"Include in project build",那么生成项目(Ctrl+F9)的时候就不会生成 ...

最新文章

1. 2022-2028年中国加密货币行业市场研究及前瞻分析报告
2. MYSQL日期 字符串 时间戳互转
3. 国办支持乡村医生建设 医疗信息化提速
4. WebLogic Server的单点登陆功能--转载
5. HDU 2255 奔小康赚大钱 带权二分图匹配 KM算法
6. vue弹层时禁止页面滚动
7. Quartz2D简单绘制之矩形椭圆
8. python学习笔记之property
9. 可蠕虫 DarkRadiation 勒索软件瞄准 Linux 和 Docker 实例
10. UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 130: invalid continuat
11. VMware虚拟机克隆或复制linux后无法上网的解决方案
12. 参加了一场温州游资的婚礼，也太壕了
13. python实现最小二乘法进行线性拟合
14. 几个经典的数字电路设计
15. pipe 半双工_linux进程间通信之管道（无名管道pipe）实现全双工双向通信
16. LeetCode237——删除链表中的节点
17. simlink里面MATLAB Function ‘xxx‘ not supported for code generation.
18. Mixpanel 可视化ABTest分析 —— iOS篇
19. 路由巧设置 局域网轻松限制BT下载
20. 通过nodejs 服务器读取HTML文件渲染到页面

热门文章

1. 机器人学回炉重造（1）：正运动学、标准D-H法与改进D-H法的区别与应用（附ABB机械臂运动学建模matlab代码）
2. C1. Skyscrapers (从easy到hard)
3. 论文总结——SIPaKMeD宫颈细胞Pap涂片数据集
4. QQ输入法截图屏幕自动放大
5. WIN10系统连接蓝牙音箱，显示已连接但无声音
6. java调用百度地图api,展示世界地图
7. 六、Python文件操作
8. 线上jvm 内存飙高排查
9. 超滤膜助力料酒生产 美味十里飘香
10. 解决VS停止调试时浏览器自动关闭关闭浏览器时自动停止调试