9.22课堂记录
一,块元素
块级元素代码!
#d1,#d2
{
height:100px;
width: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;
width:100px;
border:solid 2px #FF0000;
float:left<!--左浮动-->
<!--float:right 右浮动-->
<!--float:top 上浮动-->
<!--float:bottom 下浮动-->
}
#d3
{
height:100px; width: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