CSS学习笔记二（W3CSchool）

选择器

1. 子选择器 > 

    只选择直接的子元素(即第一代后代，儿子)，即嵌套层次为1的，嵌套更深的则忽略(第二代即以上，即孙子结点及以上)，例如

 h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>  //只会选择第一个h1下的strong标签，而第二个h1下的strong又隔了一个em标签则不符合要求

2. 后代选择器

    理解为选择  在...中的....，不管嵌套层次多深都会选取

3. 相邻兄弟选择器

    紧跟在某元素之后具有相同父元素的元素

h1 + p {margin-top:50px;}

4. 属性选择器

    要选择包含某种属性而不管属性值是什么的元素：

a[title][href]{  }

    也可选择属性值为某特定值的元素：

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

   此时属性值需完全匹配，若选择属性值中的部分属性(部分字符串)则需使用波浪号：

p[class~="important"] {color: red;}

   子串匹配属性

   特定属性选择

*[lang|="en"] {color: red;}//<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">选择 lang 属性等于 en 或以 en- 开头的所有元素</span>

5.伪选择器

（1）ele:first-child

        意为选择作为某个元素第一个孩子的ele元素，选取的是ele，而非ele的孩子       

p:first-child {font-weight: bold;} //<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">将作为某元素第一个子元素的所有 p 元素设置为粗体</span>

6. 伪元素

ele:first-line   //块元素
ele:first-letter  //块元素
ele:before
ele:after

样式

7.背景属性

   所有background属性不可继承；

   背景图片默认是从左上角开始重复铺满整个背景；

   可用background-position改变背景图片的位置，位置顺序是先水平方向后垂直方向

   设置背景相对于可视区固定，背景会随文档滚动

  background-attachment:fixed

文本属性

8. 缩进：text-indent

   首行缩进，若为负值，为防止超出父框，可为父框设定padding值

   具有继承性，子元素会自动继承父元素的该属性

9.水平对齐

   text-align，只会对齐文本内容而不是元素（<CENTER>对齐文本以及整个元素）

   justify：两端对齐

10.word-spacing

    letter-spacing

11.text-transform：value   处理字符大小写转换

12.text-decoration

13.white-spacing：处理空白符和换行

14.文本方向：direction

15.字体大小

（1）em：以当父元素的font大小为基准(其实是当前元素继承了父元素的大小)。

   浏览器默认的字体大小为16px，用户可通过UI控件来改变默认字体的大小，实现缩放，如果设置为px这样的精确值，则无法改变字体大小。

   通常可把初始化正文文本的font为：body{font-size:62.6%}.这样刚好为16x62.5%=10px，那么1em=10px，方便计算和设置em值。或者使用px/16=em来转换

   现在chrome和Firefox、IE8以上都支持页面缩放，所以减少了em的依赖，但仍有应用的场合，例如首行缩进2em，还有其他需要依赖字体大小设定宽度、高度的地方。

（2）结合使用%和em

     对body元素以百分比设置默认的字体大小：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

对所有浏览器都有效。不太明白？？？

16.链接

     为链接设置样式时的顺序规则：

     a:hover 必须位于 a:link 和 a:visited 之后

    a:active 必须位于 a:hover 之后

17.列表

（1） list-style-position:outside  为默认值，列表标记在文本框外部；

                              inner   列表标记在文本框内部   

（2）list-style-image:url('  ')    将图片作为列表标记

18.表格

    border-collapse:collapse  将表格表框折叠为单一边框

    text-align: 设置水平对齐方式

    vertical-align 设置垂直对齐方式

19.outline 轮廓

    ouline是位于border外边缘的线，可起到突出元素的作用

盒子模型

20.width、height都是指内容区，增加内外边距、边框不会改变内容区的大小，但会增加元素总的大小。但在IE5.X和IE 6中width是内容区+内外边距+边框

    背景应用于内容、内边距和边框区域

    内边距、边框和外边距默认为0

21. 设置边距为百分比是相对于父元素的width和height的

22.width:auto：

     内容区的大小为父元素内容区宽度-（该元素margin+padding+border），即元素内容区的宽度会自动变化适应，除非非内容区的距离之和已经超出父元素内容区宽度，通常子元素不会超出父元素。

    width:100%：

     内容区宽度=父元素内容区宽度，margin、padding等要额外添加上去，可能会造成元素超出父框

23.外边距合并

     当两个垂直方向的外边距相遇时会合并为一个，取外边距大的那个；

     若一个元素在另一个元素内部，外边距也会发生合并

     若一个空元素，其上下外边距也会合并为一个

定位和浮动

24.当把一些文本放在块级框的开头，即便没有将这些文字明确放入<p>中，它们也会被当成段落对待。这些框被称为无名块框

25.设置line-height可改变行内框的高度

26.定位

（1）绝对定位

  脱离文档流，无论什么元素此时都变为块元素；

  后面的元素当其不存在，后自动往前填补其原来的位置，文本不会环绕（不要和浮动搞混）

  z-index增大

27.浮动

    浮动的元素像左或右浮动直到它的外边缘碰到包含框或另一个浮动元素；

    从文档流中脱离，此时注意可能造成其父元素没有包含任何内容，像一个压得很薄的盒子：

              可在父元素末添加一个空元素，为该空元素设置浮动清理；

              或者将父元素也设置为浮动，此时父元素后面的元素应进行浮动清理。

    若父框不足以放置水平排列的多个浮动元素，则浮动块向下移动直到有足够的空间；若浮动元素高度不同则向下移动时可能被其他浮动元素卡住；

    不管元素是什么，浮动后都会变为一个块级元素

    浮动元素只会对之后的元素有影响，不会对其之前的元素造成影响；

    浮动框旁边的行框会缩短以便给浮动元素留下足够的空间

布局

28.水平对齐

（1）使用margin对齐： 给定宽度，再将左右外边距设置为auto，即均等地分配两侧的外边距，结果就是水平居中。若宽度为100%则没有效果

（2）使用绝对定位使元素按某种方式对齐

（3）使用浮动

29.尺寸

   设置元素的最大高度，当元素内容放不下时，溢出的内容会被别的元素遮挡;

   em是相对尺寸大小，相对于当前对象内文本的尺寸大小，如果当前文本没有明确规定大小，由于继承了父元素的字体大小，就相当于是相对于父元素的字体大小。其实应该统一理解为相对于当前字体的大小。

导航栏

30. 垂直导航栏

      将<a>样式设置为：display:block则可为其设置宽度高度，并且点击整个区域都有效而非点击文本时才有效；请始终规定垂直导航栏中<a>的宽度否则在IE6中可能会出错

31. 水平导航栏

      方式一：将li设置为inline元素

      方式二：将li设为float，ul设置样式overflow:hidden;使得浮动的li仍被包含在ul框中

其他

1.overflow:内容溢出框时的处理

2.vertical-align:指定行内元素的基线和该元素所在行的基线的垂直对齐方式

3.visibility:设置元素可见不可见。其中设置为hidden则元素不可见，但其位置被保留；若在表格中设置为collapse，则可删除某行或某列，若为最后一行（列）则其表现为有空      白位置，若是中间的则会被后面的表格内容顶替；若不是在表格中使用该属性值，则表现和hidden相同

3.<a href=""> 若href为空字符串，则点击后会刷新页面，若为#表示当前页面不会刷新

4.text-align:center可使文本、图片等行内元素居中显示

5.透明度：

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

6.在 IE 中，必须添加 <!DOCTYPE>，这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。

7.CSS2媒介类型：用于不同媒体设备的样式显示

 例如 @media print {p{font-size:10px;}}  设置打印字体