1.标签表现形式:display
1.1 块标记(block):p,div,table
特点:
a.独占一行
b.可以设置宽度和高度
c.可以通过margin:auto左右居中
d.快标签默认的宽度是100%,高度是0,除非通过height,可以通过内部的内容撑开
1.2 行内标记(inline):span a
特点:
a.在一行中,不会自动换行
b.无法设置宽度和高度
c.设置文本居中 text-align对自己是没有作用,需要依赖于父类块标签
d:可以设置左右的外边距,无法设置上下的
e:上下的内边距有效果,但是整个文字内容不会超出父类的块标记
左右的内边距是有效果的
f:通过设置line-height=父块标签的高度,达到上下居中的效果
1.3 行内块标记(inline-block):img
特点
a:width和height可以设置?
b:不能独占一行?行内的元素默认排在一行
c:居中和行内标签一样
d:外边距和块标签一致
e:内边距和块标签也一直
1.4 三种标签的切换
可以通过过display属性进行切换,达到一些行内元素变成块元素的特点
display: none;//隐藏
display: block;//块元素
display: inline;//行内标签/内联标签
display: inline-block;//行内块标签
2.浮动: float
每一个元素都有自己对应的文档流(产权)
默认元素的float:none,可以设置左右浮动
1.浮动是不会覆盖文字:文字环绕的效果
2.一旦元素设置浮动以后,会丢失文档流(产权)
3.浮动不能不超超过前面没有设置浮动的盒子
4.浮动的元素不会覆盖在其前面设置浮动元素的上面,最多和他一样高
3.定位 - postion
3.1 偏移量FF
偏移的属性:上(top)下(bottom)左(left)右(right)
3.2 相对定位
position: relative;
a.偏移量的目标:目前的自己
b.相对定位不会丢失文档流
c.相对定位如果出现重叠现象,会覆盖在其他元素上面
3.3 绝对定位
position: absolute;
a.偏移量的目标:相对于他的包含块进行偏移的,并且包含块必须要设置position属性,
如果父标签没有设置,就一直往上找到,直到找到一个设置position的属性祖先标签
假设都没有设置,最终就会以浏览器作为偏移目标
b.绝对定位会丢失文档流
c.如果出现重叠现象,元素的层级会提高,覆盖在其他元素上面
3.4 固定定位
position: fixed;
a.偏移量的目标:浏览器
b.也会丢失文档流