div+css知识点

前端书写规范：

1、所有书写均在英文半角状态下的小写；

2、id，class必须以字母开头；

3、所有标签必须闭合；

4、html标签用tab键缩进；

5、属性值必须带引号；

6、<!-- html注释 -->

7、/* css注释 */

8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；

9、p,dt,h标签 里面不能嵌套块属性标签；

10、a标签不能嵌套a；

11、内联元素不能嵌套块；

div的display默认是block;

a的display默认是 inline-block

margin 外边距

外边距复合

margin:top right bottom left;

margin 外边距

外边距的问题：

1、上下外边距会叠压；

padding:内边距

padding:top right bottom left;

注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。

font-size 文字大小（一般均为偶数）

font-family 字体（中文默认宋体）

color 文字颜色（英文、rgb、十六位进制色彩值）

line-height 行高

text-align 文本对齐方式

text-indent 首行缩进（em缩进字符）

font-weight 文字着重

font-style 文字倾斜

text-decoration 文本修饰

letter-spacing 字母间距

word-spacing 单词间距（以空格为解析单位）

font：font-style | font-weight | font-size/line-height | font-family；

<div>块</div>

link 未访问（默认）

hover 鼠标悬停（鼠标划过）

active 链接激活（鼠标按下）

visited 访问过后（点击过后）

IE6不支持a以外其它任何标签的伪类；

IE6以上的浏览器支持所有标签的hover伪类；

a标签（链接，下载，锚点）

<img src="1.png" alt="美女"/><!-- 单标签 -->

<a href="#">a标签（链接，下载，锚点）</a>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<p>段落</p>

<strong>强调（页面展示为粗体）</strong>

<em>强调（页面展示为斜体）</em>

<span>区分样式</span>

<ol><!-- 有序列表 -->

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

<ul><!-- 无序列表 -->

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>

<dl><!-- 定义列表 -->

<dt>定义列表标题</dt>

<dd>定义列表项</dd>

<dd>定义列表项</dd>

<dd>定义列表项</dd>

</dl>

<base target="_blank"></base>链接在新的页面打开

<a href="css2—常见标签（上）.ppt">a标签（下载）</a>

id 选择符#

群组选择符#box2,#box1,#box3{width:100px; height:100px; background:blue;}

class(类) 选择符[可以重复使用的id]

类型 选择符p{width:100px; height:100px; background:blue;}

包含 选择符div span p{width:100px; height:100px; background:blue;}

通配符*{width:100px; height:100px; background:blue;}

同级样式默认后者覆盖前者；

样式优先级

类型(1) < class(10) < id(100) < style行间样式(1000) < js

测试：

A、#header #div1 .box1 div .section p .link{………………}

B、#some .base #font #call a{………………}

答案:B

内联，内嵌，行内属性标签：

1、 默认同行可以继续跟同类型标签；内联，内嵌，行内属性标签：

默认同行可以继续跟同类型标签；

内联元素，默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。

块属性标签：

1、 默认独占一行显示；

块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />

/* 默认样式重置 (css reset) */

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}//去掉下划线

img{border:none;}去掉边框

内联，内嵌，行内属性标签：

1、默认同行可以继续跟同类型标签；

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin和padding

5、代码换行被解析

块属性标签：

1、默认独占一行显示；

2、没有宽度时，默认撑满一排

3、支持所有css命令

display:block; 显示为块

display:inline; 显示为内嵌

inline-block一行内的块

span{display:block;}

div{display:inline;}

inline-block

特性：

1、块在一行显示；

2、行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

cursor 指针样式 （规定要显示的光标的类型）

cursor：pointer | text | move ……

cursor:url(hand.cur),pointer;

浮动：

float浮动：

1、块在一排显示

2、内联支持宽高

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半层

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素

clear:both; 在左右两侧均不允许浮动元素。

inline-block

1.使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析了

4.不设置宽度的时候宽度由内容撑开

5.在IE6,7下不支持块标签

浮动:

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

浮动: left/right/none

元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流

5.提升层级半层

clear left/right/both/none 元素的某个方向不能有浮动元素

** 文档流是文档中可显示对象在排列时所占用的位置

清浮动

1.给父级也加浮动

2.给父级加display:inline-block

3.在浮动元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;}

4.在浮动元素下加<br clear="all"/>

5. 给浮动元素的父级加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮动元素的父级有宽度就不用清浮动

haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

overflow 溢出

auto 溢出显示滚动条

scroll 默认就显示滚动条

hidden 溢出隐藏

IE6下的双边距BUG

在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍

解决办法: display:inline;

IE6，7下li的间隙

在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

解决办法: 1.给li加浮动

.给li加vertical-align:top;

vertical-align: top;

用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 

它的值比较多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit 

比如说top就是垂直对齐文本的顶部 。 

IE6下的最小高度问题

overflow: hidden;

定位

position:relative;  相对定位

a、不影响元素本身的特性；

b、不使元素脱离文档流；

c、如果没有定位偏移量，对元素本身没有任何影响；

定位元素位置控制top/right/bottom/left  定位元素偏移量。

position:absolute;  绝对定位

a、使元素完全脱离文档流；

b、使内嵌支持宽高；

c、块属性标签内容撑开宽度；

d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

e、相对定位一般都是配合绝对定位元素使用；

position:fixed； 固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；

问题：IE6不支持固定定位；

定位元素 默认后者层级高于前者

z-index:[number]；  定位层级

标准   不透明度  opacity:0~1;

IE私有  filter:alpha(opacity=0~100);

ie6 下父级的overflow:hidden;是包不住子级的相对定位的

在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

定位的兼容问题、清浮动方法

position:relative;

        在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

position:absolute;

        在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

css精灵

元素的宽度由内容撑开

display:inline;   

display:inline-block;

float

position:absolute

position:fixed

CSS精灵 优点：

利用CSS 精灵能很好地减少了网页的http请求次数，从而大大的提高了页面的性能，这也是CSS 精灵最大的优点；减少图片大小

CSS精灵 缺点： 

降低开发效率；

维护难度加大；