CSS3
关注
分享
扫一扫
文章平均质量分 51
CSS3样式处理
程序媛夏天
前端领域优质创作者、自媒体创作者、优快云内容合伙人，致力于前端领域技术的推广与优秀技术的普及。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端面试经典题--页面布局
题目：假设高度已知，请写出三栏布局，其中左、右栏宽度各为300px，中间自适应原创 2023-09-08 18:38:52 · 716 阅读 · 0 评论 -
每天10个前端小知识 【Day 18】
每天学习10个趣味前端小知识 ，快来看看吧！原创 2023-02-18 00:30:00 · 6846 阅读 · 0 评论 -
每天10个前端小知识 【Day 17】
每天学习10个趣味前端小知识，快来看看吧！原创 2023-02-17 02:00:00 · 3359 阅读 · 0 评论 -
每天10个前端小知识 【Day 16】
每天学习10个趣味前端小知识，快来看看吧！原创 2023-02-16 00:15:00 · 6925 阅读 · 2 评论 -
每天10个前端小知识 【Day 15】
每天学习10个趣味前端小知识，快来看看吧！原创 2023-02-15 01:30:00 · 4507 阅读 · 0 评论 -
每天10个前端小知识 【Day 14】
每天学习10个趣味前端小知识，快来看看吧！原创 2023-02-14 01:30:00 · 336 阅读 · 0 评论 -
每天10个前端小知识 【Day 13】
每天学习10个趣味前端小知识，快来看看吧！原创 2023-02-13 01:00:00 · 560 阅读 · 0 评论 -
响应式布局
写屏幕尺寸宽度，从最大的开始写到最小的。使用less它会有继承性，就是比如1336px的屏幕分辨率也是和1920px的一样的话，那么1366px的就不用写了，可以省略。响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。992~1200的中等屏幕（桌面显示器）768~992之间的为小屏设备（平板）大于1200的宽屏设备（大桌面显示器）小于768的为超小屏幕（手机）...原创 2022-08-15 16:03:07 · 453 阅读 · 0 评论 -
行内、块级、行内块三者元素的区别
1.行内元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。span , a , b , i , u , em2.块级元素：霸占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素：所有的容器级标签，都是块级元素，以及p标签。div , h系列 , li , dt ,dd注意了：img是一个可替换元素。它的 display 属性的默认值是 inl原创 2022-04-26 23:00:49 · 1655 阅读 · 0 评论 -
el-select选中变色及百分比怎么做
选中后超过80%的显示红色，没有则显示黄色，没有百分比的不变颜色。1.A思路：用的是获取dom节点，每切换一次就获取dom节点，然后给它变色；但是这样子的缺点就是有时候切换就会不显示颜色，这个原因是它捕获不到最新的dom节点。2.B思路：用的vue里面的:class，并且就是设置一个变量，如果这个变量为true就是红色，否则就是false黄色，但是这样子不能正确显示百分比出来。3.C思路：就是在外面蒙一层div，符合这个条件就给它颜色。.........原创 2022-06-24 10:28:56 · 1020 阅读 · 0 评论 -
修改elementUI的el-popconfirm 气泡确认框样式不起效果
在控制台上能够修改宽高度，把该元素拿来放在源文件中不能起效果；修改前：修改后：1.元素没有取对（其实一般改这种官方组件，不是写一长串的类名，以及深度处理器；相反它反而很简单，外面写一个组件定义的类名，里面写这个组件封装的类名就好了）2.可以用不加scoped的全局样式3.看elementUI官方文档，里面有一个poper-class属性总结：我没改对样式，是从源头上就错了，并且方法上也有问题；比如我之前取的是这个玩意，并且在编写源码的时候，我有将p写成.p，并且就是我有将同级的类在源码中用空格将它隔原创 2022-06-16 19:25:43 · 3630 阅读 · 1 评论 -
元素塌陷问题
页码使用的elment组件，关闭按钮本应该是居中的，但是它却往左边了，查看dialog组件里面设置了center，并且其他的弹窗的关闭按钮是居中的。在页码组件外面再套一层一层div,并且给它宽高度，下面的关闭按钮就能够正常居中了。...原创 2022-06-16 18:57:42 · 196 阅读 · 0 评论 -
z-index使用无效的解决办法
重点：z-index要配合position一起用，否则无效;效果图：源代码：原创 2022-06-08 19:29:13 · 529 阅读 · 0 评论 -
怎样实现单行或多行文字超出则为省略号呢？
原创 2022-04-26 22:56:19 · 228 阅读 · 0 评论 -
怎样实现单行或多行文字超出则为省略号呢？
原创 2022-04-26 22:55:25 · 193 阅读 · 0 评论 -
前端的长度单位有哪些
首先在前端开发中，会遇到各种不同类型的长度单位，而整体的长度单位分为两大类：绝对长度和相对单位。1.绝对单位1.px 像素（Pixel）px 的最小单位是1，所以小数的度量没有意义2. pt（point镑）物理长度单位。指的是72分之一英寸。pt=1/72(英寸),px=1/dpi(英寸)2.相对单位1.em相对于所在容器的font-size属性，若自身没有设置font-size属性，则相对于浏览器的默认字体尺寸。一般浏览器默认字体大小是16px, 则1em = 16px, 2em = 3原创 2022-04-20 00:54:25 · 1662 阅读 · 0 评论 -
前端面试：css动画属性
面试官问你用过哪些css动画属性，能具体说说吗，现在再来回顾一下知识点：css动画属性具体的animation属性1.animation-timing-function属性：规定动画的速度曲线。2.animation-iteration-count属性：定义动画的播放次数。3.animation-play-state属性：规定动画正在运行还是暂停。4.animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见。例子：实现一个简单的动画效果：button原创 2022-04-01 23:14:26 · 411 阅读 · 0 评论 -
单行和多行文字溢出处理方式
例<p>text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。</p>单行文字溢出处理p { width: 100px; text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本 white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到标签为止 overflow: hidden原创 2022-03-11 18:12:59 · 586 阅读 · 0 评论 -
flex：1代表什么
1.定义和用法flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。2.CSS 语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;默认值： 0 1 auto属性值3.flex：1代表什么先看代码<div class="con原创 2022-03-11 16:06:24 · 8036 阅读 · 1 评论 -
为什么使用scoped就可以使组件的样式不相互污染？
1.什么是scoped在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。2.scoped的实现原理Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:<style scoped lang="less"> .example{原创 2022-03-11 14:43:54 · 661 阅读 · 0 评论 -
element 中设置el-date-picke 禁用未来时间选择置灰
<el-date-picker v-model="form.date" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" > </el-date-picker>data(){ return{ .原创 2022-03-02 14:30:44 · 1255 阅读 · 0 评论 -
BFC是什么？如何触发？BFC解决了什么问题？
1.BFC是指什么？BFC = Block Formatting context 意思是块格式化上下文，BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素无论如何布局，都不会影响到区域外元素的布局。 这个渲染区域只对块级元素起作用。2.常见的触发BFC有什么方式1.浮动元素（float不为none）2.绝对定位的元素（position为absolute或者fixed）3.overflow不为visible的块级元素4.display值为flex、 flow-root 、inlin原创 2022-01-05 10:12:48 · 954 阅读 · 0 评论 -
CSS强制英文、中文换行与不换行
1. word-break:break-all;只对英文起作用，以字母作为换行依据2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据3. white-space:pre-wrap; 只对中文起作用，强制换行4. white-space:nowrap; 强制不换行，都起作用5. text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持） 参数：normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行br原创 2021-12-14 17:32:49 · 1226 阅读 · 0 评论 -
清除浮动的四种方式及其原理理解
为什么要清除浮动首先我们来看一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <转载 2021-12-13 16:17:47 · 209 阅读 · 0 评论 -
PC响应式布局常见页面宽度
PC端响应式布局常见页面宽度：平板>=768px桌面显示器>=900px大桌面显示器>=1200px原创 2021-07-17 12:23:08 · 1407 阅读 · 0 评论 -
微信小程序：怎么设置字体？
1.小程序设置字体有没有效果呢？font-family: PingFangSC-Regular, PingFang SC;如上设置，答案是没有一点效果的。因为真机调试的时候，手机是不带PingFang 字体的。2.要怎样设置才能有自己想要的字体？设置字体有两种方法，但是最好的方案 是 js动态加载字体，然后页面引用。js部分在onload中写下 wx.loadFontFace({ family: 'webfont', source: 'url("//原创 2021-08-16 11:36:54 · 20348 阅读 · 1 评论 -
微信小程序：设置radio组件的大小颜色
能够改变单选框的倍镜颜色以及大小，但是我用height width 是不能改变单选框的大小。 <radio color="#2D84FC" style="transform: scale(0.8)" ></radio>原创 2021-08-16 16:49:06 · 1036 阅读 · 0 评论 -
浮动及弹性盒子
1.浮动介绍在w3c中有详细的介绍：https://www.w3school.com.cn/css/css_positioning_floating.asp2.弹性盒子介绍可以看我的博客：flex弹性盒子教程里面有很详细的介绍以及用法https://blog.youkuaiyun.com/weixin_45822171/article/details/1142899903.什么场景下用浮动及弹性盒子举例：用浮动的实现图用弹性盒子的实现图在用浮动中，因为文字超出了框框，所以它脱离了文档流原创 2021-07-28 09:51:44 · 894 阅读 · 0 评论 -
让div垂直水平居中的方法
关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。1.图片展示2. 首先它分为以下两种情况：<body> <div class="wrap"> <div class="box">123</div> </div></body>知道宽高的情况下1.margin：0 auto; (效果为水平居中){ width: 1原创 2021-07-01 19:18:46 · 1388 阅读 · 3 评论 -
flex布局中 justify-content: space-between方法的排版问题
1.未实现图2.要实现的效果图3.解决方法：使用after伪元素来解决该布局bug源代码：<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> &转载 2021-06-17 17:27:34 · 695 阅读 · 0 评论 -
flex弹性盒子布局详细教程
导语：由于工作的需要，自己也在工作中查漏补缺，今日写了一份flex总结。1.flex有哪些属性？2.详细讲解：应用在flex contaier上的css属性3.详细讲解：应用在flex items上的css属性这是自己从哔哩哔哩上看到的视频，想要看视频的童鞋推荐下方链接https://www.bilibili.com/video/BV1E7411774G?p=15&spm_id_from=pageDriver...原创 2021-03-02 17:32:59 · 344 阅读 · 0 评论 -
css3自适应单位vw,vh详解
在CSS3中，新增了很多长度单位，今天就来谈谈： vw、vh、vmin、vmax1.什么是视口？在客户端，视口指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小.原创 2021-02-02 13:35:06 · 2000 阅读 · 0 评论 -
来讲讲display:none 与 visibility:hidden 的区别是什么？
visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。说明这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。...原创 2020-10-22 22:28:07 · 353 阅读 · 0 评论 -
display:table-cell属性
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。如何垂直居中一个标签，也可以用到该属性...原创 2020-10-22 22:06:01 · 469 阅读 · 0 评论 -
css命名为何不推荐使用下划线
导语：最近在做个人项目将代码上传到华为云时，系统检查代码时报错，描述说我的css选择器命名不规范，如图：那为什么css样式不推荐使用下划线命名呢？首先我们先从它的规范讲起W3C规范W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。原创 2020-10-22 17:33:02 · 1884 阅读 · 0 评论