分类 CSS 下的文章

CSS 的优先级机制[总结]

样式的优先级 多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style   有个例外...

前端文摘:最全的 CSS2.1 和 CSS3+ 的区别一览

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏,欢迎大家留言。 新属性 下面是 CSS3 新增的 CSS3 属性列...

元素使用CSS进行隐藏的几种方式与差别

一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。后宫选秀——一个一个看。 { display: none; /* 不占据空间,无法点击 */ } {opacity:0; /* 占据空间,可以点击*/} { visi...

CSS未知宽高元素水平垂直居中

方法一  思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素(parent)可以动态的改变高度(table元素的特性) 缺点:IE8以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

Flex 布局

Flex 布局教程:语法篇 作者: 阮一峰 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一...

CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。 当不对doctype进...

设置type=”file”的input框,在鼠标划过的时候是小手(兼容ie,chrom)

当input的type=“file”时,鼠标放上去是一个箭头,如果想要体验好一点可以给此input加一个css样式,这个在IE下面是可行的: cursor: pointer; cursor: hand;//写两个是为了照顾IE5,它只认hand 为了兼容chrom需要设置:font-size:0

解决了一个大问题,select设置disable后ie修改默认字体颜色暂时解决

找了很多资料,终于在科学上网后找到了一个方法,虽然暂时不知道原理,但是已经实现了功能就是好的 select[disabled='disabled']::-ms-value { color: #000; }

去除ie的select下拉框箭头图标

select { width: 100%; height: 34px; border: solid 1px #0086EA; /*为下拉小箭头留出一点位置,避免被文字覆盖*/ padding-right:34px; padding-left: 10px; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("/assets/img/caret.png")...

jquery实现菜单背景点击变色

html <ul class="menu"> <li><a class="" href="" target="main_pro">一</a></li> <li><a class="" href="" target="main_pro">二</a></li> <li><a class="" href="" target="main_pro">三</a></li> <li><a class="" href="">四</a></li> </ul...

用jquery实现iframe自适应高度,不会出现滚动条

方式1: 1 2 3 4 5 //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () {     var mainheight = $(this).contents().find("body").height() + 30;     $(this).height(mainheight); }); 方式2: 1 2 3 4 5 6 //注意:下面的代码是放在ifra...