CSS_备忘笔记

fantaxy025025

浏览: 1252245 次
性别:
来自: 北京

最近访客更多访客>>

大家都说我很棒

songhait

GDGZWQZ

zjut_wyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js_css_html_xml_nodejs

属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：如"this is en message"

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：如"this-is-en-message"

[lang|=en] { color:red; }

CSS 选择器参考手册

选择器描述

[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

background-color

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

background-image 也不能继承。事实上，所有背景属性都不能继承。

text-indent

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

浮动的理解

相对于默认的static来说，浮动float好像是在单独的层进行的，因为他不占据static块的文档流位置。

但是，浮动不是单独的层，因为浮动float在浮动到达的位置确定后，会占据该位置，其他数据不能挤占该位置。

简而言之，浮动float不占据static文档流的摆放位置，但占据显示位置。

正是上面的特性，可以达到word的“文字环绕”效果

显示的先后顺序影响其显示时可决定的效果

http://www.w3school.com.cn/tiy/t.asp?f=csse_class-clear

<html>

<head>
<style type="text/css">
img
  {
  float:left;
  clear:right;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>

</html>

结果是两个img仍然没有分成两行。为什么第一个img的clear：right 没有起作用？

这主要代码是顺序执行的，当执行到第1个img要清除右浮动的时候，第2个img并没有被加载，所以它的清除效果也就无效了，于是第2个div依然会紧跟着第1个img。

这个效果和运行机制，是需要理解的！

清除浮动方法小结

浮动副作用：

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动：

方法1：clear:both清除浮动

空标签清浮动的方法是：在html页面中加入一个空标签，用空标签来清除浮动。此标签可以是div或p等任何标签，<hr>标签需要另外加上{border:0;}。

HTML: <div class="clear"> </div>

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

clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的10px的行高低于10px时将以10px的高度显示的bug。

但是空标签清浮动会增加多余的的标签代码。

方法2：overflow清除浮动：父级div定义 overflow:hidden

为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。

在需要清除浮动的父标签中加入overflow属性即可，但是在IE6下不认识此属性则加入zoom:1;或height:1%;CSS样式改为：

.out {overflow:auto;zoom:1;}

</style>

并不是所有的overflow属性都可起来一样的效果，比如overflow:visible属性就只能对IE6/7、遨游起作用，而对FF、chrome、opera、IE8均无清浮动的作用。对于父标签定义高度且定义的高度小于子标签则IE6/7、遨游则以下拉框形式显示；而FF、chrome、opera、IE8则将子标签超出部分隐藏。

visibility和display

visibility:invisible表示隐藏，但仍占据其位置

display:none 不显示切不占据位置，跟没有此元素一样

相对定位和绝对定位

相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

XXX

分享到：

RubyOrRails_使用技巧_收集 | Android 只开启一个Activity实例，launchMo ...

2013-11-09 14:33
浏览 829
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论