9.22课堂记录

一，块元素

块级元素代码！

#d1,#d2
｛
height:100px;
100px;
border:solid 2px #FF0000;
display:inline;
｝

<div="d1"></div>
<div="d2"></div>

块元素特点：

1 ，默认显示在父标签（body）的左上角

2 , 块级元素默认占满一行（占满整个文档流）

常见的块级元素：

p标签  h1~~h6  ul li   oi li  hr  table

二  行内元素

常见的行内元素

a  span  img  input

行内元素代码！

#sp1,#sp2
{
    height:100px;
    width:100px;
    border:solid 2px #FF0000;
　　 display:block;
 }

<span="sp1">你好</span>
<span="sp2">你好2</span>

行内元素特点：

1，大小受到文字区域影响 不受 heigh width 影响

2，不占一行

span 只对单个文字

3 行内元素变块级元素

display: block

行变块

display:inline

块变行

display:inline-block;

既有块级元素特点有有行内元素特点

（高度 宽度回收到影响

不会单独站一行

）

浮动：float 上下左右

#d1,#d2
｛
height:100px;
100px;
border:solid 2px #FF0000;
float:left<!--左浮动-->
<!--float:right 右浮动-->

<!--float:top 上浮动-->

<!--float:bottom 下浮动-->

}
#d3
{

height:100px;
100px;
border:solid 2px #FF0000;

}

<div = "d1">呵呵</div>
<div = "d2">哈哈</div>

<div = "d3">哈哈</div>

d3高度宽度没有作用 因为受上面浮动影响 要用 clear:both;清除两边浮动

三，盒子模型

内间距 padding

<div="d1">你好<div>

#d1
{
height:100px;
width:100px;
border:solid 2px #FF0000;
padding:10px;

    }

paddding:10px

paddding:10px  20px  

padding:10px0  20px  30px  上  左右  下

padding:10px 20px 30px 40px  上 右 下 左

外间距 margin

<div="d1">明天</div>

<div="d2">后天</div>

#d1,#d2
{
height:100px;
width:100px;
border:solid 2px #FF0000;
}
#d2
{
margin-top:10px;
}

行内元素可不可以用 padding  margin

<span="d1"></span>

#d1
{
border:solid 2px #FF0000;
padding:10px;
}

行内元素在padding 有效果

#d1
{
border:solid 2px #FF0000;
margin:left;
}

<span="d1"></span>

margin在行内元素  只有左右

*｛

padding:0px;

margin:0px;

｝

 所有内外间距都等0

四，相对定位 和绝对定位

绝对定位：

1，脱离文档流 不会沾满一行 不受浮动影响

2，当设置了绝对定位元素方位就会受到left right top  bottom的影响

相对定位: position:relative;

1  设置相对定位 没有脱离文档流

2 设置相对定位  方位相对与元素父标签的

（由于标签并没有脱离文档流 所以他四周是占这位置）

固定元素 position：fixed