十.浮动
元素一旦浮动,会脱离文档流
脱离文档流的元素会发生4件事
- 不占页面空间
- 后续元素上前补位
- 如果脱离文档流的元素,未定义宽度,元素脱离文档流后,宽度是靠内容撑开
- 元素一旦脱离文档流,会变成块级元素
十一.其它样式属性
- 显示方式
- 什么是显示方式
决定了元素在网页中的表现形式(块级,行内,行内块,table…) - 语法
display:
取值:
block;
:让元素按照块级元素的规则去显示
inline;
:让元素按照行内元素的规则去显示
inline-block;
:让元素按照行内块级元素的规则去显示
table;
:让元素按照table元素的规则去显示
none;
:隐藏,脱离文档流的隐藏(常用)
- 什么是显示方式
- 显示效果
visibility:
取值:
visible;
: 默认值,可见的
hidden;
:隐藏(时不脱离文档流的隐藏,占空间)
考试题,和面试常问:visibility:hidden;
和display:none;
的区别:
答:visibility:hidden;
的隐藏,是不脱离文档流的隐藏,占空间;display:none;
是脱离文档流的隐藏,不占空间。 - 透明度
opacity: 0~1;
:0全透明,1不透明
之前学过:rgba(r,g,b,alpha)
问题,rgba(r,g,b,alpha)
和opacity
的区别
rgba()
只会改变当前元素颜色的透明度
opacity
只要是跟当前元素相关元素的颜色,都会改变,即包括后代元素的所有颜色 - 垂直对齐方式
vertical-align:
使用场合:- 表格中使用td tr table
取值:top/middle/bottom/baseline(默认值) - 给img或者行内块定义
ertical-align
改变的是元素前后的文本/行内元素,与本元素的垂直对齐方式
img—>top/middle/bottom / baseline(默认值) 通常,会把默认的baseline修改成其他值(因为baseline太丑)
行内块—>没有baseline 的取值 只有top/middle(默认值)/bottom
- 表格中使用td tr table
- 光标的设置
cursor:
取值:- default (部分元素的默认值),箭头
- pointer 手指头
- crosshair 十字
- wait 等待
- help 帮助
- text 文本
- 列表的样式
- 设置列表项的样式
list-style-type: disc(默认)/circle/square/none(最常用);
- 把列表项设置成图片(图片需要小)
list-style-image: url(sinablog.png);
- 列表项的位置(ul自带上下外边距16px。左内边距40px)
list-style-position:
取值:
outside;
:(默认)在li外,在ul的左内边距中
inside;
:在li内部 - 简写方式
list-style:type image position;
项目中最常用的写法list-style:none;
给ul去点
项目,经常使用ul>li替代div布局
- 设置列表项的样式
十二.定位
默认文档流定位,浮动都已经掌握
定位的分类:①相对定位;②绝对定位;③固定定位
- 公共语法
position
取值:
static
:默认值,静态(默认文档流)
relative
:相对定位
absolute
:绝对定位
fixed
:固定定位
注意:当一个元素被position
修饰,并且取值为relative,absolute,fixed
其中一种时:- 这个元素被称为已定位元素
- 这个元素解锁了5个偏移属性
top:元素到顶端的距离
right:
bottom:
left: 元素到左边的距离
z-index
:堆叠顺序 - 当同时定义top/bottom,以top为准
同时定义left/right,以left为准
- 相对定位
position:relative;
:配合偏移属性使用- 相对定位不脱离文档流
- 相对定位的参照物,是相对自己原来的位置做偏移
- 如果相对定位元素,不写偏移属性,效果和没写定位一样
- 使用相对定位的场合
- 元素位置的微调,类似于
margin
(但不会把其他元素挤走,而是堆叠) - 相对定位,一般作为绝对定位元素的祖先级定位元素使用!!!!
- 元素位置的微调,类似于
- 绝对定位
position:absolute;
- 绝对定位脱离文档流
- 相对谁偏移
- 如果该元素,没有已定位的祖先级元素,相对body左上角做偏移
- 如果组先级元素有定位,则相对于最近的,已定位的,祖先级元素做偏移
- 祖先级元素,要做已定位元素,用什么定位好:
项目中,经常设置祖先级已定位元素为relative
- 固定定位
position:fixed;
永远以body左上角偏移
脱离文档流 - 堆叠顺序
- 默认的堆叠顺序,后写的定位元素,堆叠顺序高(堆叠顺序以html编写顺序为准),默认的堆叠顺序的
z-index
永远大于0,小于1 - 手动设置堆叠顺序
z-index:取值无单位数字
float
的浮动二楼,和定位的堆叠,不是一个体系,不能比较(float相当于(其实不能比较)定位的z-index
默认值0)- 只有已定位元素才支持
z-index
- 堆叠顺序,对父子级关系无效,儿子永远在爹上面显示
- 默认的堆叠顺序,后写的定位元素,堆叠顺序高(堆叠顺序以html编写顺序为准),默认的堆叠顺序的