CSS
关注
分享
扫一扫
css带你穿上漂亮的衣服
一个橙子呀
悄悄拔尖 惊艳所有人
展开
-
使用overflow-y属性,实现可以滚动但滚动条隐藏
只需要加一个css样式即可.div { height: 300px overflow-x: hidden; overflow-y: auto;}.div::-webkit-scrollbar { display: none;}原创 2021-09-10 15:27:16 · 10779 阅读 · 2 评论 -
CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法
实现单行垂直居中，两行垂直居中，超过两行省略…显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2; .原创 2021-07-05 10:41:35 · 1771 阅读 · 0 评论 -
flex布局各占50%,并实现中间有缝隙
要实现子元素各占50%宽,中间留有缝隙的需求,如果设置右margin,第二个盒子会掉下去所以我们都会使用padding,可是要是使用了右padding,左边容易就会少一块,那怎么才能解决既有缝隙,又让左右两个图片平分区域?那就是给每一个li一个padding-right:10px,给ul父元素负的margin-left:-10px就实现了! <ul class="list-detail"> <li class="item-detail"> <a href.原创 2021-05-18 17:54:30 · 8551 阅读 · 0 评论 -
如何让图片始终在1:1的区域内自适应
在写pc端页面经常会遇到不可以写宽高实现图片始终在1:1的区域内自适应.看下图,图片正常是1000*1000的尺寸,不论屏幕如何缩放,我都会让图片在1:1的区域内自适应,是怎么实现的呢?直接上代码<div class="item"> <img src="pictures/source/73a2af88.jpg" alt=""></div> .item- { position: relative; width: 100%; padd原创 2021-05-18 11:32:31 · 550 阅读 · 0 评论 -
css常用样式整理-持续添加中...
内容超出不换行white-space: nowrap;显示省略号text-overflow: ellipsis;overflow: hidden;/*必须设置才能显示省略号*/-o-text-overflow: ellipsis;/*兼容性处理*/边框阴影样式box-shadow: 0 4px 5px #dfe7e8;box-shadow: 0 3px 10px 3px rgb(66 71 76 / 10%);css判断奇数偶数nth-of-type(odd)nth.原创 2021-05-12 19:18:37 · 119 阅读 · 0 评论 -
如何简单实现div白框定位在图片底部
页面给了1200固定宽<img class="pc-default-img en-default-img pc-english" src="./static/images/contact-us/pc-english.jpg" alt="" style="display: block;"><div class="w1200 content flex-cont flex-wrap"></div>.contact-us-container img { widt.原创 2021-05-12 15:57:37 · 356 阅读 · 0 评论 -
背景颜色和背景图片同时显示,背景图片在底部
.footer-content { width: 100%; padding: 88px 0 86px; background: url(../images/index/footer-pc-bg.jpg) no-repeat top center/1920px 68px; background-color: #002f36; background-size: 100% auto; background-position: 0 100%;}注意:背景颜色.原创 2021-05-12 14:46:08 · 299 阅读 · 0 评论 -
如何让文字在图片上垂直居中
实现思路:给图片外面的父盒子相对定位给两行文字的父盒子绝对定位,上下左右都为0,通过flex布局来使文字垂直居中,适配大小屏幕<div class="card-default-top"> <img src="./static/images/price/price-bzn.png"> <div class="price-content"> <div class="price-standard" data-language=".原创 2021-05-12 14:33:40 · 675 阅读 · 0 评论 -
css让图片自适应容器（div）大小并居中显示
我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。(因为此图片表示很难过…哎);<div> <img src="1.jpg" alt=""></div>div { width: 400px; height: 400px;//对于图片的多变性,很多情况下不给固定高,让图片自适应,避免图片变形失真 border-radius: 5px; display:原创 2021-05-12 10:01:55 · 3798 阅读 · 0 评论 -
CSS实现奇数、偶数、指定数样式
第一种：简单数字序号写法直接匹配第number个元素。参数number必须为大于0的整数。:nth-child(number)第二种：倍数写法匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/第三种：倍数分组匹配先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标原创 2021-04-12 13:50:22 · 1465 阅读 · 0 评论 -
Rgba()和 Opacity 的透明效果有什么不同？
1.rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度,取值0-1；2.而 rgba()只作用于元素的颜色或其背景色,取值0-1；（设置 rgba 透明的元素的子元素不会继承透明效果！）...原创 2021-04-02 11:23:57 · 299 阅读 · 0 评论 -
媒体查询如何使用
媒体查询的用法@media语法： @media 媒体类型 and (媒体特性) {你的样式}最大宽度max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：@media screen and (max-width:480px) { .ads { display:none; }}上面表示的是：当屏幕小于或等于 480px 时，页面中包含类样式 .ads 的元素都将被隐藏。最小宽度min-width 与 max-width 相反，指原创 2021-04-02 10:23:39 · 289 阅读 · 0 评论 -
CSS3新特性之盒子阴影box-shadow介绍
css3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影语法:box-shadow:h-shadow v-shadow blur spread color inset;示例:<style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; box-shadow: 10.原创 2020-07-10 15:16:22 · 755 阅读 · 0 评论 -
轻松解决外边距塌陷的几种方法(你值得收藏)
什么是外边距塌陷？满足以下条件就会产生外边距塌陷现象：产生在嵌套元素中（父元素与子元素）垂直方向上的外边距合并现象（margin-top和margin-bottom）话不多说,直接上代码进行演示:带你走向人生的的巅峰,哈哈哈html:<div class="father"> <div class="son"></div></div>css:<style> *{ margin: 0; padding: 0; .原创 2020-07-09 10:53:14 · 10264 阅读 · 6 评论 -
CSS 改变鼠标样式(大全)
前端经常会用到改变鼠标的样式来达到更好的页面效果,比如经常会使用到改变成小手,拖拽时改变成移动拖拽的鼠标样式,可每次都需要查阅资料来完成代码,在此做下详细总结:使用方法: <span style="cursor:auto">Auto</span> <span style="cursor:crosshair">Crosshair</span> <span style="cursor:default">Default&..原创 2020-06-17 14:03:44 · 13944 阅读 · 0 评论 -
CSS3—新特性总结（全）
1.圆角 ——border-radius2.过渡 —— transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)3.动画 ——animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）4.2D 3D转换——transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)rotate(30d原创 2020-06-10 16:55:13 · 831 阅读 · 0 评论 -
div内文字的溢出部分用省略号显示
一：通过CSS控制显示div内显示一行，超出部分用省略号显示div内显示多行，超出部分用省略号显示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 单行文字末尾省略号显示 */ .div1{原创 2020-06-05 16:26:24 · 7544 阅读 · 0 评论 -
如何实现一个弹窗定位在屏幕中央
html代码： <el-button type="primary" @click="copyflag=true">点我弹出</el-button> <!-- 弹窗 --> <div class="darkBoxs" v-if="copyflag"> <div class="main"> <div class="top"> <span>弹窗内容</spa原创 2020-06-02 15:54:27 · 1635 阅读 · 1 评论 -
CSS实现Element Ui 中Tree 树形控件图标的设置
只需要在css中设置图片地址即可，代码如下：.notice_center .el-tree-node__content { .el-tree-node__expand-icon + span::before { content: url(../../../../static/img/bumen.png); }}.notice_center .el-tree-node__children .el-tree-node__children { .is-leaf + span::befo原创 2020-05-25 17:07:58 · 1319 阅读 · 0 评论 -
鼠标放上去会变成小手样式
只需要在你想变成小手的div上加上一个css的样式即可div { cursor:pointer; }原创 2020-04-29 17:34:43 · 5433 阅读 · 0 评论 -
富文本wangeditor层级太高覆盖问题(已解决)
因为wangEditor设置的层级z-index很高，会覆盖掉和他重合的区域会出现日期根本选不中的情况，解决办法如下：在css里加上如下样式即可，注：如果使用vue，则不要写在scoped内，否则无效 .w-e-menu { z-index: 2 !important; } .w-e-text-container { z-index: 1 !important; ...原创 2020-04-27 21:05:35 · 4940 阅读 · 15 评论 -
盒子水平垂直居中的四种方式(详细总结)
盒子水平居中的四种方式第一种当子盒子有固定宽高的时候这样来使用<style> .father{ width: 500px; height: 500px; background-color: #ccc; position: relative; } .child{ width: 2...原创 2020-01-16 20:19:24 · 657 阅读 · 1 评论 -
如何快速实现左侧固定，右侧自适应
最简单之方法—flex布局话不多说，直接上代码<style> *{ margin: 0; padding: 0; } .box{ /* 首先给父盒子flex布局 */ display: flex; } .left{ /* 左侧给个固定宽高 */ w...原创 2020-01-17 09:48:20 · 309 阅读 · 0 评论