伪元素:::before ::after *必须添加content属性,否则后期不可见 content: ""; *默认是行级元素,如果想设置宽高,就必须转换为块级元素 position: absolute; *行内元素,需要转换成块:display:block float:** position: ...
分类:
Web程序 时间:
2020-02-13 14:45:56
阅读次数:
204
css伪类 css伪类用于向某些选择器添加特殊的效果。:link, :visited, :hover, :focus, :active, :first-child, :langcss3新增的伪类::last-child, :only-child, :first-of-type, :last-of-t ...
分类:
Web程序 时间:
2020-02-12 12:41:29
阅读次数:
107
清除浮动:让浮动子元素撑开父级的高度 参考案例: 解决方式: 1. 给父元素设置高度 2. 让父元素开启BFC: 或者 3.使用br标签 4.空标签清除浮动 5.伪元素: 注:浮动盒子与定位盒子的宽高均由内容撑开 ...
分类:
其他好文 时间:
2020-02-10 09:38:32
阅读次数:
61
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同css文件:写在后面的起作用 不同css文件:后导入的起作用 但今天遇到一个问题 <body> <div s ...
分类:
Web程序 时间:
2020-02-04 10:28:46
阅读次数:
113
CSS 选择符优先级!important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] )>类型选择符(标签)=伪元素选择符(:first-child)sticky 定位问题sticky 定位的元素受父级块级元... ...
分类:
Web程序 时间:
2020-02-02 12:05:36
阅读次数:
85
1.指定文本前后添加内容 2. 实现一个书签标记logo 3.文字前后自动加上引号 4.自定义样式实现checkbox 5. 简单实现一个聊天气泡 6. 相片堆叠 参考链接 "掘金:CSS伪元素:before和:after介绍" ...
分类:
Web程序 时间:
2020-01-22 23:51:13
阅读次数:
179
before: 伪元素选择器用于在某个元素之前插入一些内容 伪类选择器:before使用content属性插入字符、属性插入图片 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text ...
分类:
Web程序 时间:
2020-01-19 22:01:13
阅读次数:
128
一、input标签 1.<input>实现按钮效果 -与表单相关的按钮效果 -<input type="button" value="按钮"> 2.<button>标签表示按钮 -与表单无关的按钮效果:<button>按钮</button> -类似于<input type="submit"> - 提 ...
分类:
Web程序 时间:
2020-01-17 00:17:52
阅读次数:
131
垂直居中,在CSS中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊9种不同的居中方法。有常见的flex、transform、absolute等等。也有CSS3的网格布局。还有伪元素的方法,是的,你没有看错,::after和::before也可以实现居中。1、flex大家的第一反应,可能就是flex了。因为它的写法够简单直观,兼容性也没什么问题。是手机端居中方式的首选。<
分类:
Web程序 时间:
2020-01-16 01:00:21
阅读次数:
110
伪元素 伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它? 伪元素和伪类一样,添加到选择器,但是不是描述状态,他允许我们为元素某些部分设置样式;利用伪元素,我们可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简 ...
分类:
其他好文 时间:
2020-01-15 19:08:22
阅读次数:
77