css
文章平均质量分 65
Rita_jing
这个作者很懒,什么都没留下…
展开
-
“超链接样式被点击过后a:hover{}和a:active{}样式不起作用”的原因及解决方法
今天发现了改变CSS属性的排列顺序: L-V-H-Aa:link {}a:visited {}a:hover {}a:active {}--> 我个人认为原因是:如果a:hover {}写到a:active {}后面就会覆盖a:active {},因为点击时鼠标也是在元素上的,因此它们具有包含性,就像数学中的集合,应该由大到小。原创 2017-03-28 21:18:25 · 6997 阅读 · 0 评论 -
全屏滚动的原理及实现
之前用fullpage插件做过全屏滚动的页面,今天用js自己实现了一下,还蛮简单的.首先html结构为 wrap块为窗口可看到的部分,我们可以通过js获取窗口可视区的大小,并为其设置overflow: hidden属性,使得窗口不出现滚动条,只显示窗口大小的一页内容;设置main定位为rela原创 2017-10-14 20:52:27 · 10585 阅读 · 3 评论 -
伪元素:before和:after
之所以称为伪元素,也就是说不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。原创 2017-08-24 15:32:10 · 358 阅读 · 0 评论 -
icon-font
icon-font,是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法,不仅体积小,而且以维护,昨天做网页时第一次用,大小和颜色可通过修改文字大小和颜色实现,拉伸不变形,不要太好用我是直接使用网站上的Icon Font实现的,推荐一个不错的网站 https://icomoon.io/ ,里面有好多免费的Icon Font点击右上角IcoMoon App就可以看到很多免费Icon原创 2017-05-27 10:09:16 · 625 阅读 · 0 评论 -
css相关
1.display有哪些值?说明他们的作用block 像块类型元素一样显示。none 缺省值。像行内元素类型一样显示。inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。list-item 像块类型元素一样显示,并添加样式列表标记。table 此元素会作为块级表格来显示inherit 规定应该从父元素继承 display 属性的值原创 2017-03-31 22:19:11 · 304 阅读 · 0 评论 -
css如何让元素水平居中、垂直居中
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。转载 2017-03-31 21:53:44 · 609 阅读 · 0 评论 -
题目
1.如果一个dom元素中,既有冒泡,又有捕获的话,会先执行哪个呢?w3c规定了,任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。2.Doctype作用?标准模式与兼容模式各有什么区别?(1)声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现原创 2017-04-04 15:54:08 · 295 阅读 · 0 评论 -
css之层叠级别及z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。每个stacking context都包括以下stack level (后来居上):1.父级stacking context的背景、边界2.z-index值为负值的定位元素(值越小越在下)3.文本流中非定位的、block块级子元素4.文本流中非定位的、float浮动子元素5.仿转载 2017-03-30 09:44:22 · 1812 阅读 · 0 评论 -
关于css选择器
伪类: anchor伪类: a:link {} /a:visited {} /a:hover {} /a:active :first-child伪类:选择元素的第一个子元素,eg: p:first-child :lang 伪类:为不同的语言定义特殊的规则动态伪类::focus、伪类可以与 CSS 类配合使用:eg: a.red:visited {color:#FF000原创 2017-03-28 21:22:52 · 280 阅读 · 0 评论 -
css中可以继承的属性
不可继承的属性有:display、margin、border、padding、background、height、min-height、max-height、width、 min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、转载 2017-03-28 16:51:18 · 610 阅读 · 0 评论 -
css之border/padding/margin
border: 1.宽度不支持百分比;thin/medium/thick;2.solid/dotted/dashed/double/inset/outset/ridge/groove: a. IE下的dotted是小圆,通过添加图形可以用来实现IE7/IE8下的圆角效果; b. 利用double实现原创 2017-04-09 09:19:46 · 602 阅读 · 0 评论 -
CSS实现等分布局的4种方式,css等分布局4种
思路一: float缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差【1】float + padding + background-clip使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景float:left; + padding-right:20px; + background-转载 2017-03-29 20:59:38 · 5316 阅读 · 0 评论 -
css层叠规则
层叠规则就是当多个样式添加到同一元素时,样式优先级规则,也就是其最终显示的样式。样式类型可以分为:浏览器默认样式、外部样式(即引用的CSS后缀文件)、内部样式(即写在标签内的样式)及内联样式(直接写在style属性内的样式)、用户自定义样式(有些页面会允许用户自定义样式)。1.浏览器默认样式优先级最低;2.遇到冲突的属性定义,带!important的比不带!important的优先级高原创 2017-03-28 20:06:34 · 739 阅读 · 0 评论 -
CSS外边距合并的问题及解决措施
1、水平的margin不会被折叠,只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 2、相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠,甚至一个浮动的盒模型和它的子元素之间也是这样。 3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为vis原创 2017-03-28 19:02:59 · 4294 阅读 · 0 评论 -
怎么提升CSS选择器性能?
1、避免使用通用选择器2、避免使用标签或 class 选择器限制 id 选择器3、避免使用标签限制 class 选择器4、避免使用多层标签选择器。使用 class 选择器替换,减少css查找5、避免使用子选择器6、使用继承转载 2017-03-28 22:10:55 · 302 阅读 · 0 评论 -
圣杯布局
布局一,两栏布局,侧栏固定在右边,左边主栏宽度自适应,效果如下:code: .layout{ padding-right: 210px; } .layout_aside { width: 200px; background: #ccc; margin-right: -210px; } .layout_m原创 2017-06-21 21:27:46 · 297 阅读 · 0 评论