全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一点自己的理解~ (1)原本这两个伪类核心是content,用于在指定元素之前或之后插入内容,但实际开发中用的比较多的是传空字符串"",再做样式控制. (2)用户操作促使样式改变我们通常是采用添加类/删除类.类名切换等方法控制,但这种情况是针对已存在某dom元素,我们去控制该dom元素的样式

如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; text-align: center; font-size:; //父元素设置为0祛除换行符或空格 } .box img { vertical-align: middle; } .box span { font-size: 20px; width: 220px; display: inline-bl

使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属性选择器.伪类选择器.过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写代码更加简单轻松. 根据所获取页面中元素的不同,可以把CSS3选择器分为5大类:基本选择器.组合选择器.伪类选择器.伪元素和属性选择器.其中,伪类选择器又分为6种:动态伪类选择器.目标伪类选择器.

一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12px;} /* div为指定标签名 hover选择符,伪类 或者 伪元素名 */ 伪选择器专门用来选择特殊区域或者特殊状态下的元素或者对象,这些特殊区域或者特殊状态是无法通过标签选择器,ID选择器或者类选择器进行精确控制的 二.伪类选择器和伪对象选择器 伪类 说明 :focus 定义对象在成为输入焦点

清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; padding:; list-style:none; #清除列表样式 } a { text-decoration:none; #清除a标签下划线 color:black; # 设置a标签字体颜色 } 文本样式 简写: font:   字重      字体大小/行高     字族          

盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的宽高 显示宽高 border+padding+content 自身布局 margin-top | margin-left 兄弟布局 margin-bottom | margin-right 父级水平居中 margin:0 auto; 与inline相关的盒子 vertical-align ''' 文

IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了. XML/HTML代码 <!–[if IE 6]> <script type=”text/javascript”> docume

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面

div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;} .pic_box img{vertical-align:middle;} .pic_box::after{ content:'center'; display:inline-block; width:0; hei

CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出 伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到            的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例

在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1发布于 199

关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标悬停状态 :active:活动状态     除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等. :focus:选择器用于选取获得焦点的元素. :first-child:某个标签的第一个元素,例:li :last-child:某个标签的最后一个元素. 而且CS

一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果,所以就来研究研究哈!  一.先来看哈他们的定义哈! 1.selector:before( sRules ) 它要和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容: 2.selector:after( sRules ) 和before用

一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 例如下

一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; .善于使用父亲的padding而不是儿子的margin; 二,css精灵 .css精灵优点,减少http请求 .通过background-position来控制显示位置 .background-attachment:fixed; 背景图片固定,不随滚动条滚动 精灵的使用 background ur

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.链接伪类 a:link{属性:值;} /*链接默认状态 ( a{属性:值}效果是一样的.)*/ a:visited{属性:值;} /*链接访问之后的状态*/ a:hover{属性:值;} /*鼠标放到链接上显示

0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别).当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号:: 一个选择器一般来说只能使用一个伪元素,并且伪元素必须处于选择器语句的最后. 常见的伪元素有以下几种: ::after ::before ::first-letter ::

前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式. [重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点. 注意伪类使用单冒号 ":&q

注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:focus这几种常用伪类写法一致,下面就不再赘述.为了直

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决