![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 51
css的一些常用的样式
ruantianqing
.....
展开
-
移动端适配(转载)
移动端适配的重新思考1 移动端适配就是用rem或vw?并不是所有场景都适合用*rem或vw*进行适配。vw和rem适配的本质是等比例缩放,让页面在不同屏幕尺寸下有类似于矢量图片缩放的效果,保证了页面元素之间的尺寸缩放比例和位置。这两种适配方案适合视觉组件种类比较多,视觉设计对元素位置的相对关系依赖较强的移动端页面,基本上大部分页面都可以用着两种方案进行适配。但对于文本内容较多,我们希望引导用户沉浸在更多的内容而不是更大的内容的,这种等比例缩放的方案并不能满足要求,我推荐直接使用px结合转载 2021-11-22 00:14:38 · 997 阅读 · 0 评论 -
iconfont 图标 使用
1 可以使用在线连接,也可以下载到本地2 在线连接在assets下的font文件夹下新建iconfont.css文件夹,引入在线链继在main.js文件中引入iconfont.css文件3 下载文件下载到本地后,把压缩包里的css文件拖到assets下的font文件夹下,然后在main.js中引入4使用<i class="iconfont icon-shouqi"></i>写上图标对应的类名就可以使用了注意:每次更新图标的时候都要更换在线连接或者重新下原创 2021-01-24 19:31:23 · 303 阅读 · 0 评论 -
flex布局
1 弹性盒模型Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。》弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列;》弹性布局包括两个方面:弹性盒与弹性项(弹性子元素)采用Flex布局的元素,称为弹性容器(flex container),简称“弹性盒”它的所有子元素自动成为容器成员,成为弹性项目(flex item),简称“弹性项”将一个盒子设置为弹性盒:》 display:flex;》 或者display:inline-flex;原创 2021-01-21 16:36:48 · 109 阅读 · 0 评论 -
css背景属性 css background
1 背景属性background-color背景颜色在标准盒模型中,背景色会应用给整个内容区域(会应用到边框上):width+padding2+border2background-image背景图片,设置的图片是从padding开始渲染的,并且从border开始平铺渲染背景色从border开始渲染背景图片从padding开始渲染,并且从border开始平铺渲染。background-repeat设置背景平铺,x水平方向,y垂直方向:》 no-repeat不重复平铺》 repeat重复平铺原创 2021-01-21 11:36:09 · 166 阅读 · 0 评论 -
scss
1 sass跟less一样,sass也是一种css预编译语言,比less支持的语法更多,如循环语句,条件语句等。sass是通过ruby编译的,因此我们使用sass要首先安装ruby安装完成,输入gem -v可以查看版本号sass属于gem的一个模块,我们可以通过gem安装sass:gem install sass安装完成,提供了sass指令,我们输入sass -v可以查看版本号,我们可以手动安装sass:gem install 将sass文件拖进来。ruby编码不涵盖中文字符串,所以我们要更改字符原创 2021-01-13 21:28:28 · 171 阅读 · 0 评论 -
less
1 介绍less是一个css预编译语言 可以解决css无法复用样式,权重问题,无法计算,无法使用语句,没有方法,单位转换等等问题Github:http://github.com/less/less官网:http://lesscss.org/中文官网:http://lesscss.cn/2 编译less安装less npm install less -g npm install less --save-dev 此时得到一个全局的lessc指令,可以通过lessc -v查看版本号 浏览器原创 2021-01-13 21:16:08 · 1030 阅读 · 0 评论 -
媒体查询
1 响应式网页开发响应式网页制作的概念同一个网页根据视口的不同,显示不同的版本响应式网页制作:responsive web design(RWD)响应式布局的优缺点:优点:对于不同视口都可以显示非常饱满的网页结构,没有横向滚动条缺点:制作复杂,同时对于移动端而言,需要加载非常多的pc端的样式和图片等资源,影响加载速度,同时费流量媒体查询:响应式布局可以在不同的视口下,呈现不同的效果,实现的原理就是通过媒体查询完成媒体查询的使用,有以下几种:可以直接引入样式,限定视口大小;直接在样式中原创 2021-01-13 10:48:02 · 766 阅读 · 0 评论 -
rem布局
1 rem与emrem单位:指的是html元素的font-size的倍数。和em关注父元素不同,rem只关注根元素(html)<html>---font-size: 20px; 这个就是基准字号<body>---font-size: 2rem; 计算后是40px,不看父亲只看根 <div>----font-size: 2rem; 计算后是40px,不看父亲只看根 <p>----font-size: 2rem; 计算后是40px,不看父亲只看根 &l原创 2021-01-13 10:40:15 · 438 阅读 · 0 评论 -
css换行,溢出显示省略号
1 css强制换行text-overflow: ellipsis;white-space:nowrap;overflow:hidden;原创 2021-01-12 21:11:33 · 389 阅读 · 0 评论 -
vue实现内容过多隐藏,点击显示
htmlDescription是介绍的具体内容<div class="introduce">介绍:{{Description}}</div><div class="more" v-if="!isShowAll && isRoll" @click="toDown">展开<i class="iconfont icon-up2-copy"></i></div><div class="more" v-if="!is原创 2021-01-12 15:24:42 · 4057 阅读 · 0 评论