html-day06

html-day06

1、定位
定位:
1、普通流定位
普通流,又称为文档流
块级元素:从上到下一个一个的排列
行内元素:一行内从左到右的排列
2、浮动定位
1、什么是浮动定位
将元素排除在普通流之外,即脱离文档流
浮动元素不会占据页面空间
浮动元素会放置在"包含框"的左边或右边
浮动元素依旧位于包含框之内
浮动元素可以向左或向右浮动,直到碰见包含框的边缘或另一个已浮动的元素框为止
2、特点
1、浮动元素边缘不会超过其父元素的边缘
2、浮动元素不会重叠
3、浮动只能左右浮动,不会上下浮动
注意:非块级元素浮动的话,那么将会变成块级元素,允许修改 width 和 height
3、处理问题
1、让块级元素在同一行内显示
2、修改行内元素的 width 和 height
4、浮动属性
属性:float
取值:
none
left
right
清除浮动所带来的影响:
属性:clear
取值:left
right
both
5、子级元素的浮动,为父层元素所带来的影响
如果一个元素的所有子级内容都是浮动的,那么它的高度会变成 0
解决方案
1、设置父容器高度
2、设置父元素的 overflow:hidden;
3、在父元素中,增加一个空元素,添加clear:both;

2、显示方式
1、display
none:生成元素没有框,不占据页面空间,隐藏
block:按块级显示
inline:按行内方式显示
inline-block:行内块,所有的元素在一行内显示,允许修改width 和 height

使用场合:
1、控制元素的显示与隐藏
隐藏:display:none;
显示:
块级 :display:block
行内 :display:inline
2、将行内元素变成块级 或 行内块
目的:修改行内元素的宽和高
2、显示效果
1、visibility
可见性
取值:
visible :默认值,可见的
hidden :元素不可见,占据页面空间
collapse :用在表格上

问题:visibility:hidden 与 display:none的区别
2、opacity
透明度
取值:0 - 1
opacity:0.5;
3、vertical-align
垂直方向对齐
td
img

取值:
baseline : 默认,基线对齐
top : 顶部对齐
bottom :底部对齐
middle :居中对齐
放在img 上,控制的是 img 左右两端文本的垂直对齐方式
4、光标
改变鼠标的显示效果
属性:cursor
取值:
default
pointer :小手
crosshair :+
text : I
wait : 等待
help : ?

上一篇:PHP之CI框架架设错误--Only variable references should be returned by reference


下一篇:总是弹出visual studio 实时调试器 三种解决办法