CSS学习笔记
佛佛ง
前端
展开
-
解决text-align: justify;在微信小程序中不兼容
百度了其他大佬的,在项目中试验了一下,核心是在文字后边加一个空标签<view class="ka-left" > <view class="ka-name">{{monthlypay[m].month}}卡<text class="hid"></text></view> <view class="ka-jine"> ¥{{monthlypay[m].jine}} </view></...原创 2021-11-02 19:29:46 · 1288 阅读 · 1 评论 -
dom元素的offsetWidth、clientWidth、scrollWidth范围
offsetWidth = 元素宽度 + padding + borderclientWidth = 元素宽度 + paddingscrollWidth = 元素宽度 + padding + 溢出尺寸,无溢出 = clientWidth高度和宽度类似原创 2018-07-05 15:20:48 · 360 阅读 · 0 评论 -
纯css实现向上箭头动画显示
效果图:DOM:<div> <img src="http://pics4.baidu.com/feed/3801213fb80e7bec70739c1b83cebc3e99506b81.jpeg?token=de56394c09656ca554744bf001f2d130&s=D53AA375CD88745D882B156F0300E078"/> <div class="arr-box"> <div class="arr"&g原创 2021-08-10 18:40:06 · 1180 阅读 · 0 评论 -
段落文字两端对齐
使文字两端对齐,保持美观的样式,如下设置:word-wrap: break-word;white-space: normal;word-break: break-all;text-align: justify;效果:原创 2020-12-28 15:54:07 · 388 阅读 · 0 评论 -
消除两元素之间的空白间隙
两个元素之间可能会有空白字符,这时候可以通过为父元素设置font-size:0;之后再对子元素设置具体的font-size值即可原创 2019-11-07 16:45:41 · 450 阅读 · 0 评论 -
去掉a标签的下划线、鼠标显示手型、文字不换行
1、去掉a标签的下划线text-decoration: none;2、鼠标移到div上显示手型cursor:pointer3、文字不换行white-space:nowrap;原创 2019-11-07 14:50:14 · 1075 阅读 · 1 评论 -
CSS-滚动条样式设置
注意:滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下: ::-webkit-scrollbar 滚动条整体样式 ::-webkit-scrollbar-button 一设置滚动条样式,滚动条两...原创 2019-06-12 11:47:58 · 2239 阅读 · 0 评论 -
CSS-子元素过滤选择器:first-child 与 :nth-child(n) 的特殊之处
语义:1、:first-child 指的是选取父元素的第一个子元素2、:nth-child(n) 指的是选取父元素下的第 n 个子元素,n 从1开始来看一个实例,页面展示的样式如下:DOM结构如下:<div class="selector"> <img src="../../../assets/images/monitors/echart_...原创 2019-06-22 17:10:30 · 1962 阅读 · 0 评论 -
CSS-文字不可选中
使用 user-select:none; 设置,文字不能被选中,不能复制。原创 2019-07-02 14:52:18 · 1809 阅读 · 0 评论 -
解决IE浏览器下flex对table不起作用的问题
问题描述:如果对tablebox1使用flex布局,下面的两个table宽度均设置成100%,根据flex的特性,当宽度达不到要求时,会自动缩放,但在IE浏览器下不起作用,table会溢出,如下图所示:解决方案:对每个table包一个div,这个div 的宽度为100%即可,效果如上图的第二行表格。源码:<!DOCTYPE html PUBLIC "-//W3C//...原创 2019-07-30 17:02:11 · 824 阅读 · 0 评论 -
清除IE浏览器input后面的删除图标
IE浏览器自带的input,输入值后,会出现 x 按扭,不让其出现的设置如下:input::-ms-clear { width: 0; height: 0;}原创 2019-08-08 13:47:25 · 1144 阅读 · 0 评论 -
css-实现光波效果
1、dom结构(微信小程序结构)<view class="status"> <image src="../../assets/home/stoping.png"></image> <view class="animate1"></view> <view class="anim...原创 2019-10-08 18:58:09 · 1134 阅读 · 0 评论 -
CSS-实现图片靠左、靠右、居中显示
通过在img标签外包一层具有text-align属性的元素,把图片当做文字来处理,如下:<div> <img src="images/top1.jpg" alt="这是一个图片"> </div> <p> <img src="images/top2.jpg" alt="这是一个图片&原创 2019-01-10 18:18:12 · 39037 阅读 · 0 评论 -
CSS-背景图片
给元素加背景图片常用的方式:一种是通过img添加,另一种是通过div设置background参数1、通过img添加<div class="aa"> <img src="images/flight_add_icon_nor.png" ></div>.aa{ width: 300px; height: 100px; ...原创 2019-01-10 18:02:47 · 176 阅读 · 0 评论 -
CSS3实现圆形轨迹动画
1、代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><转载 2018-06-27 18:18:01 · 6101 阅读 · 0 评论 -
jQuery选择器性能优化
1、按性能理想 从优到劣 排序:ID选择器>类选择器>标签选择器>属性选择器>伪选择器$("#id") >$(".class")>$("p")>$("[attribute=value]")>$(":selected")有!important优先级最高2、在实际页面中的显示顺序 内原创 2018-04-16 15:50:08 · 352 阅读 · 0 评论 -
伪类选择器
1、链接伪类选择器::link、:visited,只对 a 链接有效2、动态伪类选择器::hover、:active、:focus原创 2018-09-03 14:51:20 · 188 阅读 · 0 评论 -
border属性
border:1px solid red; border-width border-style border-color border-radius:10px 20px 30px 40px border-left:1px solid red; border-left-width border-top-left-radius:10px;左上角 borde...原创 2018-09-03 15:00:58 · 347 阅读 · 0 评论 -
文字截断/省略...-单行、多行
只针对google和IE浏览器分析,求他浏览器不做比较。单行文字截断:google、IE均支持.single{ width: 300px; height: 100px; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}多行文字截断:1、只对g...原创 2018-11-16 15:00:43 · 648 阅读 · 0 评论 -
滚动条设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> ..原创 2018-12-04 16:17:53 · 220 阅读 · 0 评论 -
绝对定位position:absolute;实现居中对齐
position:absolute;元素定位的起点,可参考下图:要实现居中显示,如下效果:源码:<!doctype html><html><head> <meta charset="utf-8"> <title>练习的地方</title> <style>原创 2018-12-07 17:16:28 · 37875 阅读 · 2 评论 -
background设置
1、简单语法:background:颜色 url 平铺方式 水平 垂直一种默认的方式。 2、例子:background:#fff url(smile.png) no-repeat center bottom;原创 2018-12-06 16:05:35 · 430 阅读 · 0 评论 -
.html文件引用.css的样式顺序
<link rel="stylesheet" type="text/css" href="a.css"><link rel="stylesheet" type="text/css" href="b.css">html文件中引入了两个css文件,分别是a.css 和 b.css,样式如下:<!-- a中有一原创 2018-12-06 17:32:21 · 819 阅读 · 0 评论 -
固定元素,不随页面改变位置position:fixed
当页面滑动到第2个页面时,黄色固定元素一直处于初始化的位置不变,实现这个功能:1、使用position:fixed;还需要指定位置,比如top、right值等。2、注意【需要固定的元素在html中放置的位置】下面的代码中,“第2个固定” 显示在页面上,而 "第1个固定" 没有显示,因为“第2个固定”放在后面,这样会覆盖前面元素的z-index等级,如果想让 "第1个固定"显示,则需...原创 2018-12-07 11:09:57 · 5997 阅读 · 0 评论 -
CSS-text-decoration(文字修饰)
text-decoration属性<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=dev原创 2019-01-10 17:44:29 · 840 阅读 · 0 评论 -
CSS带有背景图片的渐变效果
1、html<div class="jianbian">111</div>2、css.jianbian{ width:240px;height:25px;margin:50px auto;border:1px solid red;background:url("barbg_blue1.png") 0 0 repeat, linear-gradient(to right, #...原创 2018-06-27 11:00:03 · 5348 阅读 · 0 评论