CSS3
css相关
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
重新理解z-index
今天遇到一个布局兼容问题,调试了一番,发现z-index的表现和自己的认知不相符,才知道自己对z-index的认知有错误,于是写篇文章总结下这个z-index的具体使用。有基础的朋友可以直接看第四节。对于z-index的使用规律,MDN实际上就简单一句话:”z-index越大则越上层,有爹则拼爹“。1,同一个层叠上下文中,z-index越大则越上层。2,不同层级上下文,则层级越高越上层。3,层级等级和层叠等级相同的,则后来的覆盖之前的。原创 2023-07-06 09:49:16 · 756 阅读 · 0 评论 -
css3画立体图形
【代码】css3画立体图形。原创 2022-10-13 18:56:19 · 346 阅读 · 0 评论 -
控制文本保留几行,末尾省略
需要注意的是text-overflowellipsis;只对displayinline;原创 2022-07-29 10:26:31 · 154 阅读 · 0 评论 -
移动端1px问题的解决
实际上是利用伪元素,创建一个容器,设备像素比是多少就设置为多大的。然后边框设置为1px,再将这整个伪元素的大小缩放设备像素比倍。这样就得到合适的1px。然后需要1px边框的地方:而对于有圆角的,基于我们的原理,圆角应该对应放大几倍,这样缩小回去之后才能一致,比如说圆角26px的时候,就需要:......原创 2022-06-16 14:13:00 · 329 阅读 · 0 评论 -
利用before伪元素创建图标
一,实现效果二,实现代码<template> <div class="printItemBox"> <el-card> <div class="title">顶栏</div> </el-card> </div></template><script>export default {}</script><styl原创 2021-03-26 10:35:20 · 483 阅读 · 0 评论 -
项目中一些零碎化总结的
一,css全局样式和局部样式的命名左侧红框已经在全局样式命名为title的样式,因为是全局的,如果右侧还命名为title,就是直接复用这个。所以说,全局的样式命名尽量简单通用,而子页面的样式,如果复用全局的,就直接设置类名,如果是独立的,最好类的命名元素中增加一个本页面或者本组件的特有标识。虽然css的模块中加了scoped,里面的不会影响到全局,但是全局的依旧会影响到内部(除非覆盖填写样式)...原创 2021-03-26 10:24:03 · 125 阅读 · 0 评论 -
vue页面中样式修改子组件的样式
一,原因我们在使用element ui或者自定义通用组件的时候,有时候需要在父组件中修改子组件的样式,就容易遇到这么一个情况,在父组件中修改子组件的样式无法生效?原因是我们在vue页面的样式通常会加scoped,来保证这个vue组件的样式仅仅作用于这个组件,而不会影响到其他组件,这个scoped的原理,这篇博客讲得很清晰明了了。https://blog.csdn.net/qq_41800366/article/details/107062781也就是: vue 给该组件的每一个标签自动添加一个唯一原创 2021-01-31 00:28:41 · 5144 阅读 · 1 评论 -
css的calc函数
来源:https://www.runoob.com/cssref/func-calc.html一,示例:使用 calc() 函数计算 元素的宽度:#div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center;原创 2021-01-29 10:01:46 · 589 阅读 · 0 评论 -
黑马品优购项目的总结二
一,当有多个元素并列时,采用li然后浮动,高度塌陷的解决。给父盒子增加清除浮动效果.clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0}或者直接给父元素来一个:overflow:hidden。二,同样是多个li并列,导致长度不够超出边界。变到下一行了。如上图,三个li都有右边距,最后一个同样设置了。不想取消的话,可以把父盒子的原创 2020-08-08 12:11:03 · 601 阅读 · 0 评论 -
黑马品优购项目的总结-首页
一,准备阶段建立好代码的统一规范和文件夹的布置命名,以便后期管理因为一些html元素有默认样式,我们不喜欢它的默认样式,所以需要一个名为base.css的初始化样式。然后注意到,首页,详情页这几个页面的头部和尾部是一样的,为了避免重写样式,可以把共有的样式提取出来,取名common.css。设置网页的icon图标,位置是放到根目录下,然后代码引用放在head之间即可。书写网页的三大标签:title、content、keywords字体图标的创建 :二,导航栏的制作:就是大盒子套小原创 2020-08-07 19:53:38 · 1097 阅读 · 0 评论 -
表单相关伪类
/表单相关伪类/:enabled 匹配可编辑的表单:disable 匹配被禁用的表单:checked 匹配被选中的表单:focus 匹配获焦的表单<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input:enabled{ back原创 2020-07-19 14:50:53 · 486 阅读 · 0 评论 -
伪元素
一,整体总结:二,::before和::after<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .div1::before{ content: ""; displ原创 2020-07-14 22:05:32 · 773 阅读 · 1 评论