CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)
时间:2022-06-09
本文章向大家介绍CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、flex布局
flex布局
2、box-shadow阴影
box-shadow: h-shadow(必选) v-shadow(必选) blur spread color inset;
box-shadow
Example:
box-shadow:0 0 20rpx #aaaaaa;
3、line-gradient渐变
background: linear-gradient(to right, blue, white);
line-gradient渐变
4、绝对定位使元素居中
可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度
/* 可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度 */
.popup {
width:100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
5、vertical-align属性图片与文字对齐
<view class="title_right">
<text>全部订单</text>
<image src="/images/left_icon.png" style="vertical-align:middle"></image>
</view>
6、关于图片、文字的居中
(1)图片居中要在图片本身上设置margin: 0 auto; (2)文字居中要在其父元素上设置text-align: center;
<!-- html -->
<view class="father">
<image src="/images/fc.png"></image>
<text>113131313</text>
</view>
// css
.father {
text-align: center;
image {
width: 90rpx;
height: 90rpx;
display: block;
margin: 0 auto;
}
text {
font-size: 20rpx;
color: #929292;
}
}
7、单行居中,多行居左
单行居中,多行居左
8、css选择器-获取最后一个元素
:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
p:last-child {
background: red;
}
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
css选择器-获取最后一个元素
9、文字溢出并显示省略号?
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
10、文字超过两行才溢出并显示省略号?
{
width: 561rpx;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
11、box-sizing
(1)问题场景
在CSS中,设置的width
和height
只会应用到这个元素的内容区;如果这个元素有border
或padding
,那么绘制到屏幕上时的盒子宽度和高度会加上设置的borde
和padding
。
这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距,在响应式布局时,这个特点很烦人。
(2)解决
// 默认值
box-sizing: content-box;
box-sizing: border-box;
border-box告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
12、设置input中placeholder的文字样式
// .inputClassName是标签的类名,包括(input,textArea);
.inputClassName::-webkit-input-placeholder {
color: #b6b6b6;
}
.inputClassName:-moz-placeholder {
color: #b6b6b6;
}
.inputClassName::-moz-placeholder {
color: #b6b6b6;
}
.inputClassName:-ms-input-placeholder {
color: #b6b6b6;
}
input
13、获取元素位置
11、持续更新。。(如果你遇到了坑或者有好的解决方案欢迎留言)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 设计模式总篇:从为什么需要原则到实际落地(附知识图谱)
- 一文入门DNS?从访问GitHub开始
- 没内鬼,来点干货!SQL优化和诊断
- 好像很厉害的生成器!一秒钟搞定一个项目
- 【一起学系列】之策略模式:好多鸭子啊
- 没内鬼,来点干货!volatile和synchronized
- 【一起学系列】之观察者模式:我没有在监控你啊
- Celery 4 初体验及踩坑
- MySQL 最佳实践:gh-ost 工具使用详解
- 如何将 Hexo 博客部署到云开发静态网站托管
- WordPress 静态化部署到云开发网站托管
- 如何用云应用快速部署一个nodebb的开源论坛
- 【一起学系列】之装饰器模式:不改代码增强功能?
- Hello!GitHub 好用好玩值得收藏的开源项目集合~
- 【一起学系列】之工厂模式:产品?产品族?