码迷,mamicode.com
首页 > Web开发 > 详细

CSS 技巧汇总

时间:2020-02-02 12:05:36      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:active   推出   sele   依赖   执行   自己   inpu   after   状态   

CSS 选择符优先级

!important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] )>类型选择符(标签)=伪元素选择符(:first-child)

sticky 定位问题

sticky 定位的元素受父级块级元素影响,其宽度继承的是父级的宽度,另外其只能显示在父级的内容区,当滚动距离超过其父级的高度时,即超过内容区后,其也会相应得被推出可视区域,使用时要注意。
注:sticky 元素的父级元素不能含有 overflow:hidden 和 overflow:auto 属性。

display:inline-block 详解及兼容性方法

2002 年 W3C 推出 CSS2.1 规范时,给 元素的 display 属性增加了 inline-block 值。其作用是 “这个值导致一个元素产生一个块状盒模型(block box),而本身作为单一的内联盒模型(inline box)流动排列(flow)”。即 display 为 inline-block 的元素既可以像块状元素一样定义高度宽度,又可以和内联元素(比如文字)排列在一行。
这个效果在页面设计的时候,很多地方都可以带来便利,最常见的莫过于在对链接进行 “以图换字” 时,既可以像内联元素那样实现一行排列,又可以设置像块状元素那样设置单个链接大小,还可以通过 text-indent 来隐藏文字显示背景图片。
现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Firefox、Safari/Chrome、Opera、IE8+ 支持。但 IE6、7 可以通过触发 hasLayout 属性来模拟(因为 inline-block 会触发 IE 的 hasLayout,从而使内联元素具有类似 inline-block 元素的属性)。Firefox2 有 -moz-inline-box 和 -moz-inline-stack 私有属性,在实际应用中两者都有一些 bug:-moz-inline-box 会存在 text-align(无法水平居中 / 居右,使用 -moz-box-pack:center/end 来修正)、line-height(无法垂直居中,使用 -moz-box-align:center 来修正)等属性无效的问题; 而相对来说 -moz-inline-stack 的表现好些,但也有 bug:如果元素的父级元素具有 display:inline 属性则会使 Firefox 中其包含的链接不可点击,这个需要对元素用 position:relative 来解决,另外 text-align、line-height 等属性无效,目前无法修正)。

兼容实现方法:

display:inline-block;
*display:inline;
zoom:1;/* 这两个属性在 IE6、7 中让块状元素实现 display:inline-block 的效果 */
width:100px;
height:100px;/* 这两个属性为任意非 auto 值 */
text-indent:-999em;/* 现代浏览器中隐藏文字 */
font:0/0 "";
overflow:hidden;/* 这两个属性任选其一配合上文,实现 IE 隐藏文字 */
vertical-align:middle;/* 垂直居中,防止与其他内联元素有比较大的偏离 */

“垂直居中” 之研究

使用一个 100% 高的隐藏元素来辅助,设置 vertical-align 迫使内容区垂直居中,支持图片、多行文字(不固定高度),是目前兼容性最好的方法

<div class="vertical-center">
<div class="text-wrap">
<p>text</p>
<p>text</p>
</div>
</div>
<div class="vertical-center">
<img src="">
</div>
.vertical-center:after {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: "";
}
.text-wrap {/* 对于文本需要多包一层 */
display: inline-block;
*display: inline;
*zoom: 1;
width: 100%;
vertical-align: middle;
}

iOS 设备下 iframe 内容无法滚动的问题

很长时间以来,iOS 设备上 Safari 中超出边界的元素将不能滚动,这时候需要用个小技巧来解决这个问题。
html 代码:

<div class="ios-scroll">
<iframe height="100%" width="100%" frameBorder="0"></iframe>
</div>

注:外部包围 iframe 的容器必须有明确的高度值

css 代码:

.ios-scroll {
-webkit-overflow-scrolling:touch;
}

禁止双击时选择页面内容

在做图片滚动时,在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好。
针对这个问题可以对相应的元素添加 onselectstart="return false;"(IE、Chrome),另外针对火狐添加 -moz-user-select:none,即代码如下所示:

<div onselectstart="return false;" style="-moz-user-select:none;"></div>

如何去除点击链接或按钮时出现的虚线?

有时候在点击链接或者按钮的时,总有一个虚线框在触发元素上,显得特别刺眼(如用 a 标签 做 Tab 切换),那如何去除这个虚线框呢?

在 IE 中,需要在元素的 html 代码中加入 hidefocus=”true” 属性。即:

<a href="http://www.china.com" hidefocus="true">china</a>

或者在直接给元素定义样式:

position:relative;/* 这是 IE 下的一个 bug,在自身或父级元素定义该样式会导致按钮或链接点击时失去虚线,刚好实现了我们需要的效果,有时无效 */
blr:expression(this.onFocus=this.blur());/* 会反复执行,有严重的效率问题,不推荐使用 */

而在 Firefox 等浏览器中则相对比较容易,直接给元素定义样式 outline:none; 就可以了,另外针对 Firefox 的 input/button 元素要通过私有属性特别处理:

button::-moz-focus-inner,input::-moz-focus-inner {
border-color:transparent;
}

多行文字两端对齐

多行文字尤其是表单的 label 标签,因为字数不一,却要两端排版对齐。

正确的做法是 text-align:justify。但是还需要加上 CSS3 草案的 text-justify:distribute 。
这种做法存在的问题是:除了 IE 之外,尚无浏览器实现 text-justify:distribute。且 IE 必须还加上 text-align-last:justify。
是的,尽管 IE 常为我们所不齿,但是在文字排版和国际化方面,IE 是做的最好的。仅就两端分布对齐这个特例而言,IE 领先了其他浏览器 10 年以上。

这样综合下来,有如下代码:

display:block;
width:5em;
text-align:justify;
text-align:end;/* 对于除了 IE 之外的浏览器用尾对齐覆盖之前的两端对齐方式 */
text-align-last:justify;
text-justify:distribute;

在 IE 和将来正确实现 CSS3-text 模块的浏览器中将两端分布对齐。
在当前除 IE 以外的主流浏览器中将右对齐,作为合理的 fallback。

以图换字的思路及方法

做网页的时候经常会遇到个问题:想让普通文字链接显示个性化的图片,就要对链接使用背景图片,同时让链接里的文字消失,这就需要用到 “以图换字”(Fahrner Image Replacement),就是用图片替换文字表现。

具体方法是位置移动:也就是让内容进行位置移动,移出显示区之外。

<div class="logo"><a href="URL" title="标题">标题内容</a></div>
.logo {< 大专栏  CSS 技巧汇总br/>    overflow:hidden;
width:100px;
height:100px;
}
.logo a {
display:block;
background:URL;
text-indent:-999em;
}

扩展阅读:Revised Image Replacement 上有更丰富的方法。

用 CSS Border 实现三角形的思路及方法

在盒模型中,上下左右边框交界处出会呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。

<div class="triangle"></div>
<div class="triangle2"></div>
overflow:hidden;
width:0;
height:0;
font:0/0 "";
border:10px dashed transparent;/* IE6 下,设置边框的 border-style 为 dashed,即可达到透明的效果 */
border-bottom:10px solid #FF9600;

用 CSS 实现梯形角标时在 Firefox 下出现奇异白线的问题及解决方法

利用上条的思路,可以实现在容器上显示梯形角标:

.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #f60;
}
.box::before {
position: absolute;
top: 3px;
left: -27px;
z-index: 1;
width: 60px;
border: 18px solid transparent;
border-bottom-color: #f60;
transform: rotate(-45deg);
content: '';
}

但是在 Firefox 下会在梯形两端各出现一条白线,经确认是 Firefox 对 rotate 支持的 bug。
可以使用如下代码修复:

transform: rotate(-45deg) translate3d(0, 0, 1px);

清除(闭合)浮动

按照 CSS 规范,浮动元素(floats)会被移出文档流,不会影响到块状元素的布局而只会影响内联元素(通常是文本)的排列。因此当其高度超出父级元素时,一般父级元素不会自动伸展以适应内容的高度,从而造成内容溢出影响破坏布局的现象。这种现象叫“浮动溢出”或者“高度塌陷”,如何避免?

解决方法:

zoom:1;/* 针对 IE,触发 hasLayout */
overflow:hidden;/* 针对现代浏览器 */

注:overflow:hidden 用来布局容易出问题,一是很可能造成其内部的浮动层显示不全(致命伤);二是在某些情况下会造成双击空白处全选(没总结出规律,偶尔会出现)。此外,某些时候还会造成性能问题。

这时,现代浏览器可以使用以下方法

.clear:before,
.clear:after {
display: table; /* 不用 block,而是用 table 的原因是用于 :before 可以触发 BFC,从而避免父级与第一个子级元素外边界合并。 */
content: " "; /* 为了避免 Opera 的 bug,否则它会在被清除浮动的元素的顶部和底部产生一个可见空格 */
}
.clear:after {
clear: both;
}

另一种方法就是在父级元素内最后面插入一个额外的标签,并令其清除浮动以撑开父级元素。这种方法优点是兼容性好,缺点是需要额外的无语义的标签

.clear {
overflow:hidden;
clear:both;
height:0;
}

强制文本自动换行和不换行的方法

防止文本撑破页面,强制自动换行:

word-wrap:break-word; /* 可以把长单词强行断句;首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句(IE、Firefox3.5、Chrome、Opera 支持)。CSS3 中已经改名为 overflow-wrap(Chrome、Opera 支持)。 */
word-break:break-all; /* 可以把长单词强行断句;不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句(IE、Firefox15、Chrome 支持)。 */
table-layout:fixed; /* 针对 table 上使用,但是有副作用,会导致 td 宽度平均分配 */

强制<pre>换行:

pre {
word-wrap:break-word; /* IE6+ */
white-space:pre-wrap; /* CSS3 属性, Firefox、Safari/Chrome、Opera、IE8 */
}

注:强制文本不换行可以使用:white-space:nowrap;

IE 的 “hasLayout” 模式研究

“hasLayout” 模式

hasLayout 是 Windows Internet Explorer 渲染引擎的一个内部组成部分。在 IE 中,一个元素要么自己对自身的内容进行计算尺寸和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为 true 或 false。
当一个元素的 hasLayout 属性值为 true 时,我们说这个元素有一个布局(Layout)。当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位,而不是依赖于祖先元素来完成这些工作。
IE6、7 上的很多布局方面 Bug 都是和这个属性有关或者可以用这个属性解决的。

触发 “hasLayout”

  • body、img、table、tr、th、td 等元素的 hasLayout 一直为 true。
  • type 为 text、button、file 或 select 的 input 的 hasLayout 一直为 true。
  • 设置 {position:absolute} 的元素的 hasLayout 为 true。
  • 设置 {float:left|right} 的元素的 hasLayout 为 true。
  • 设置 {display:inline-block} 的元素的 hasLayout 为 true。
  • 设置 {height:xx} 或 {width:xx} 的元素必须具备以下两个条件之一,其 hasLayout 才能为 true:
    1. IE8 兼容模式和 IE8 以前的浏览器中,在标准 (strict) 模式下其 display 的值是 block。
    2. 元素在怪异模式(Quirks mode)下。
  • 设置了 {zoom:xx} 的元素在 IE8 的兼容模式或 IE8 之前的浏览器中其 hasLayout 为 true,但在 IE8 的标准模式下则不会触发 hasLayout。
  • 设置了 {writing-mode:tb-rl} 的元素的 hasLayout 为 true。
  • 元素的 contentEditable 的属性值为 true。
  • 在 IE8 标准模式下设置了 {display:block} 的元素的 hasLayout 一直为 true。

防止链接变成一次链接

所谓伪类就是指依赖于浏览器或是用户的状态。对于链接来讲,存在 link,hover,visited,active 四种状态,即四种伪类选择器:a:link(存在链接,但无鼠标动作),a:visited(被点击或访问过),a:hover(鼠标悬停于链接上时的状态),a:active(鼠标点击与释放之间的状态)。
CSS 便是以这几个伪类选择器实现了其为数不多的动态效果。目前最为常用的就是导航条和按钮的动态显示。

在使用链接的伪类选择器时,一般会发现链接点击一次后,会永远显示 visited 状态,没有办法表示 hover、active 了,所以我们要解决这个 “一次性按钮” 问题。
将样式表里面链接四种伪类选择器顺序修改成为:

link
visited
hover
active

顺序这样,后面的优先级大于前面的,就行了。

之所以排在后面的优先级大,是因为浏览器读取 CSS 文件时是自上而下的。
但这并不是充分条件。visited,hover,active 这三种状态不是独立的,它们存在交集。
比方说一个按钮,如果它被点击过,而且你正点击这个按钮,那么这个按钮既是 visited,也是 active,而且因为鼠标悬于按钮之上,所以它也处在 hover 的状态。那么这个时候,你把 CSS 文件中的 visited 置于最后的话,那么 hover 和 active 两种状态的属性都会被 visited 的属性所覆盖而不显示。
同理,active 必须置于 hover 之后才能显示其属性。

要点:

  1. visited 必须置于 hover 和 active 之上;
  2. active 必须置于 hover 之后;
  3. link 的位置无所谓,所以你只需保证 VHA 的顺序即可。

所以我们一般设置 a 的样式时候,都是按照 LVHA(简记为 LoVeHAte)的顺序来进行设置,可以避免出现上述的 bug。

CSS 技巧汇总

标签:active   推出   sele   依赖   执行   自己   inpu   after   状态   

原文地址:https://www.cnblogs.com/lijianming180/p/12251440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!