div+css学习笔记（十天学会div+css）

1.CSS伪类可以改变链接的样式

2.在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

3.以下元素支持accesskey 属性：<a>, <area>, <button>,<input>, <label>, <legend> 以及<textarea>。

4,。可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

5.浮动元素会生成一个块级框，而不论它本身是何种元素；

且要指明一个宽度，否则它会尽可能地窄；

另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

6.用标签重定义方式，这样可以很简单地把全局的样式给统一起来

body,ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding:0px; font-size: 12px; font-weight: normal; }

ul{ list-style: none; }

img{ border-style: none; }

这样就很简单把常用标签的默认样式给清除掉了，如果需要边距的话再重新定义，也避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题

20:402014/9/26

7.目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现，我们定义一个类.current （自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。

21:122014/9/26

8.position:relative；这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

21:302014/9/26

9.position:absolute;表示绝对定位，位置将依据浏览器左上角开始计算。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

21:332014/9/26

10.当浮动后设置左侧外边距时，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式，display:inline.   17:192014/9/27

11.绝对定位的元素在相对定位的元素里面。14:50 2014/9/28

12.想要把一个盒子A放在另一个盒子B里，并且可以随意地移动，那么B要设为相对定位,A就要设为绝对定位，且A要配合left、top等来设置位置.  14:56 2014/9/28

15.文字垂直居中显示： 在div中定义一个行高与其高度相同即可。如：

16: 网页居中显示：需要设置两个地方，一个是body，一个是外边框div:

17. 图片垂直居中显示：在<img>标签中加入align＝"absmidle＂ 即可

18.清楚浮动：clear：both；

19：三列栏的写法，左右是窄栏，中间是主要内容

#main{

width:800px;

margin:0auto;

}

.left{

width:200px;

float:left;

}

.right{

width:200px;

float:right;

}

.center{

margin:020px;

width:auto;

} 

.clear{

clear:both;

}

 HTML：

<!--注意：center这个DIV的位置-->

<divid="main">

     <divclass="left"></div>

     <divclass="right"></div>

     <divclass="center"></div>

     <divclass="clear"></div>

</div>

20. 设置<ul>表列缩进值：

 默认情况下，<ul>列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。ul{margin-left:-24px;}

21. textarea在FireFox中不能自动换行的处理：

    有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-all;word-warp:warp;也没有效果，怎么回事呢？

    主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。

解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。

22. 水平导航条的制作示例：

    HTML代码如下：

<ul>

    <li><ahref="#">Home</a></li>

    <li><ahref="#">About</a></li>

    <li><ahref="#">News</a></li>

    <li><ahref="#">Products</a></li>

    <li><ahref="#">Services</a></li>

    <li><ahref="#">Clients</a></li>

    <li><a href="#">CaseStudies</a></li>

</ul>

    CSS中，首先清除ul的list-style、margin和padding：

ul {

margin: 0;

padding: 0;

list-style: none;

width: 720px;

float: left;

background: #FAA819url(images/mainNavBg.gif) repeat-x;

}

 然后，可以将li的display属性设置为inline或者设置float为left，display 在li可能会出现bug，所以我一般用floatleft的方法：

ul li {

float: left;

}

ul a {

display: block;

float: left;　

padding: 0 2em;

line-height: 2.1em;

background:url(images/divider.gif) repeat-y left top;

text-decoration: none;

color: #fff;

}

 

ul .first a {

background: none;

}

 

ul a:hover {

color: #333;

}

11月30号后

23.一行的元素要是想一行对齐<span></span><div></div>可以把span设为inline-block，或者试试定义height和line-height一样高

24.使用通用选择器*{margin:0;padding:0;}时会影响option，

25.width和height是指内容区域的宽高，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。外边距可以是负值

26.IE6的width和height是指内容、内边距和边框的和，css3中引入了一个新的属性：box-sizing，它具有“content-box”和“border-box”两个值。注意：应尽量回避这个问题，也就是不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

27.外边距叠加

28.关于行内框：在一行中水平排列，可以使用水平内边距、边框、和外边框调整它们的水平间距。但是垂直内边距、边框和外边距不影响行内框的高度。在行内框上显示地设置高度和宽度也不会影响。修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或外边距。

由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是设置行高可以增加这个框的高度。

display:inline-block,让元素像行内元素一样水平依次排列。但是框的内容仍然符合块级框的行为。

29.将一些文本添加到一个块级元素的开头时，即使没有把这些文本定义为块级元素，它也会被当成块级元素对待：

<div>

  sometext

  <p>somemore text</p>

</div>

这种框成为匿名框

30.相对定位和绝对定位

绝对定位与文档流无关

尺寸的任何改变都会导致绝对定位的框产生重叠

31.IE6不支持固定定位

 

相对定位和绝对定位都会覆盖其他元素，用z-index来控制框的叠放顺序。

 

32.浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。

清理元素

33.overflow 、css生成内容或js对浮动元素进行清理：

 

 

34.背景图像

h1{

padding-left:30px;

background-image:url(bullet.gif);

background-repeat:no-repeat;

background-position:left center;

}

使用百分比定位图像时是将图像上距离左上角的20%的点点位到父元素上距离左上角的20%的位置

h1{

padding-left:30px;

background-image:url(bullet.gif);

background-repeat:no-repeat;

background-position:0 50%;

}

35.圆角边框

<div class=”box”>

<h2>标题</h2>

<p>内容</p>

</div>

.box{

width:418px;

background:#effce7url(/img/bottom.gif) no-repeat left bottom;

padding-bottom: 1px;

}

.box h2{

background:url(/img/top.gif)no-repeat left top;

margin-top:0;

padding:20px 20px 0 20px;

}

.box p{

padding:0 20px;

}