1、浮动定位
1、定位
简单点说,定位就是改变元素在页面上的默认位置
2、定位的分类
按照定位的效果,可以分成以下几类:
1、普通流定位(默认方式)
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、定位方式-普通流定位
普通流定位,又称为“文档流定位”,页面中所有元素默认定位方式
所有元素默认都是在其父元素的左上方开始出现,
页面中所有的块级元素,按照从上到下的方式排列,每个元素独占一行
页面中所有的行内元素,按照从左到右的方式排列,
多个元素在一行内显示,显示不下自动换行
问题:多个块级元素想在一行内显示???<核心>-浮动定位
4、定位方式-浮动定位
1、浮动定位的概述 & 特点
如果将元素的定位方式设置为浮动定位的话,那么元素将具备以下特征
1、元素会排除在文档流之外即脱离文档流,所有脱离文档流即不占据页面空间(但是可以显示在页面中)。
其他剩余元素要上前补位。
2、浮动元素会停靠在父元素的左边或者右边,或者其他已浮动元素的边缘上
3、浮动只在当前行浮动
4、浮动元素依然位于父元素包含框之内
5、浮动元素处理的问题-能够让多个块级元素在一行显示
2、语法
属性:float
取值:
1、none
默认值,即无浮动效果
2、left
左浮动,停靠在父元素的左边,或挨着左侧已有的浮动元素
3、right
右浮动,停靠在父元素的右边,或挨着右侧易用的浮动元素
3、浮动引发的特殊效果
1、当父元素的宽度显示不下所有的已浮动子元素,
那么最后一个将换行,但,有可能被卡
2、元素一旦浮动起来之后,宽度将变成自适应(由内容来决定宽度)
3、元素一旦浮动起来之后,那么将变成块级元素,尤其对行内元素影响最大
块级元素:能修改尺寸
行内元素:不能修改尺寸
4、文本,行内元素,行内块元素是采用环绕的方式排列的,是不会被浮动元素压在底下的,
元素浮动起来之后,会对后续的元素带来位置的影响。如果后续元素不想受到任何影响的话,
可以通过清除浮动的方式来解决。清除浮动后,元素不会上前占位。
属性:clear
取值:
1、none
默认值,不做任何清除操作
2、left
清除当前元素前一个元素左浮动带来的影响
3、right
清除当前元素前一个元素右浮动带来的影响
4、both
由于浮动元素会脱离文档流,所以会导致元素不会占据父元素的控件,
会对父元素的高度带来一定的影响。父元素高度是以没有浮动子元素的高度
为准。(如果全是浮动子元素,那么父元素的高度为0)
解决方案:
1、直接设置父元素高度
弊端:必须知道父元素的高度是多少
2、设置父元素也浮动
弊端:不是任何时候父元素都需要浮动,元素浮动后会影响后续元素的位置
3、为父元素设置overflow属性
取值为:hidden 或者 auto
弊端:如果内容中有东西要溢出显示(如弹出框)
那么也会一同被隐藏
4、父元素中,追加块级空子元素(必须是块级),并设置其clear属性为both
5、... ...
2、显示
1、显示方式
显示方式决定了元素在页面中默认的定位方式
属性:display
取值:
1、none
让生成的元素不显示,并且脱离文档流
2、block
让元素表现的和块级元素一样
3、inline
让元素表现的和行内元素一样
4、inline-block
让元素表现的和行内块一样
多个行内块在一行内显示,并且允许修改尺寸
(radio,checkbox除外)
2、显示效果
1、visibility
作用:可见性
属性:visibility
取值:
1、visible
默认值,可见的
2、hidden
隐藏的,依然占据页面空间
3、collapse
用在表格中,删除一行或一列时,不影响表格整体布局
visibility:hidden 与 display:none的区别
display:none;脱离文档流,所以不占页面空间
visibility:hidden;没有脱离文档流,所以占页面空间,不显示内容而已
2、opacity
作用:指定元素的透明度
属性:opacity
取值:0(完全透明)-1(完全不透明)之间的数字
3、vertical-align
作用:垂直居中对齐,不是所有的元素能使用,控制的是当前元素两边的文本或行内元素
相对于当前元素的垂直对齐方式
注意:用在 td 或 行内块元素 或 img中
取值:
1、top:顶部对齐
2、middle:中间对齐
3、bottom:底部对齐
4、baseline:基线对齐
基线对齐:
1、行内块元素的基线
基线是在最后一行文本的底端
2、图像
作用:改变鼠标的显示状态
属性:cursor
取值:
1、default
默认
2、pointer
小手状态,与a标记移入时一样
3、crosshair
+
4、text
I
5、wait
等待
6、help
帮助
3、列表
1、列表项标识
属性:list-style-type
取值:
1、none
无标记
2、disc
3、square
4、circle
... ...
2、列表项图像
属性:list-style-image
取值:url();
3、列表项位置
默认位置:标识默认列表项内容区域之外
属性:list-style-position
取值:
1、outside
默认值
2、inside
将标识放置于列表项区域之内
4、列表属性
属性:list-style
取值:type url() position;
常用方式:list-style:none;
4、定位
1、定位属性
1、定位方式
属性:position
取值:
1、static:静态定位,默认定位
2、relative:相对定位
3、absolute:绝对定位
4、fixed:固定定位
注意:将position设置为
relative/absolute/fixed 任意一种定位方式的话,那么该元素就被称为“已定位元素”
2、偏移属性
属性:
1、top:以元素顶端作为基准点,上下移动元素
2、bottom:以元素底端作为基准点,上下移动元素
3、left:以元素左边作为基准点,左右移动元素
4、right:以元素右边作为基准点,左右移动元素
3、堆叠顺序
作用:堆叠效果中,显示调整堆叠顺序
属性:z-index
取值:没有单位的数字
2、相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
实现元素位置的微调
2、语法
属性&值:
position:relative
配合偏移属性实现位置的微调
1、什么是绝对定位
1、绝对定位的元素会脱离文档流,不占据页面空间
2、会相对于它 最近的 已定位的 祖先元素去实现位置的初始化
3、如果当前元素没有 已定位的祖先元素,
那么就会相对于最初的包含框实现位置初始化,比如body或html
4、绝对定位的元素会变成块级元素
2、语法
属性 & 值:
position:absolute;
配合着 偏移属性 实现元素的定位(位置移动)
3、使用场合
1、弹出菜单一律采用绝对定位的方式
4、堆叠顺序
1、什么是堆叠顺序
产生堆叠效果之间的元素的排列顺序
2、语法
属性:z-index
取值:没有单位的数值
3、注意问题
1、必须是已定位元素才能使用z-index
2、默认顺序是 后来者居上
3、父子关系之间无法用z-index调整堆叠顺序,永远都是 子压在父上
1、定位
简单点说,定位就是改变元素在页面上的默认位置
2、定位的分类
按照定位的效果,可以分成以下几类:
1、普通流定位(默认方式)
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、定位方式-普通流定位
普通流定位,又称为“文档流定位”,页面中所有元素默认定位方式
所有元素默认都是在其父元素的左上方开始出现,
页面中所有的块级元素,按照从上到下的方式排列,每个元素独占一行
页面中所有的行内元素,按照从左到右的方式排列,
多个元素在一行内显示,显示不下自动换行
问题:多个块级元素想在一行内显示???<核心>-浮动定位
4、定位方式-浮动定位
1、浮动定位的概述 & 特点
如果将元素的定位方式设置为浮动定位的话,那么元素将具备以下特征
1、元素会排除在文档流之外即脱离文档流,所有脱离文档流即不占据页面空间(但是可以显示在页面中)。
其他剩余元素要上前补位。
2、浮动元素会停靠在父元素的左边或者右边,或者其他已浮动元素的边缘上
3、浮动只在当前行浮动
4、浮动元素依然位于父元素包含框之内
5、浮动元素处理的问题-能够让多个块级元素在一行显示
2、语法
属性:float
取值:
1、none
默认值,即无浮动效果
2、left
左浮动,停靠在父元素的左边,或挨着左侧已有的浮动元素
3、right
右浮动,停靠在父元素的右边,或挨着右侧易用的浮动元素
3、浮动引发的特殊效果
1、当父元素的宽度显示不下所有的已浮动子元素,
那么最后一个将换行,但,有可能被卡
2、元素一旦浮动起来之后,宽度将变成自适应(由内容来决定宽度)
3、元素一旦浮动起来之后,那么将变成块级元素,尤其对行内元素影响最大
块级元素:能修改尺寸
行内元素:不能修改尺寸
4、文本,行内元素,行内块元素是采用环绕的方式排列的,是不会被浮动元素压在底下的,
而会巧妙的避开浮动元素
向右浮动效果:
向左浮动效果:
元素浮动起来之后,会对后续的元素带来位置的影响。如果后续元素不想受到任何影响的话,
可以通过清除浮动的方式来解决。清除浮动后,元素不会上前占位。
属性:clear
取值:
1、none
默认值,不做任何清除操作
2、left
清除当前元素前一个元素左浮动带来的影响
3、right
清除当前元素前一个元素右浮动带来的影响
4、both
清除当前元素前一个元素左或右浮动带来的影响
5、浮动元素对父元素高度的影响由于浮动元素会脱离文档流,所以会导致元素不会占据父元素的控件,
会对父元素的高度带来一定的影响。父元素高度是以没有浮动子元素的高度
为准。(如果全是浮动子元素,那么父元素的高度为0)
解决方案:
1、直接设置父元素高度
弊端:必须知道父元素的高度是多少
2、设置父元素也浮动
弊端:不是任何时候父元素都需要浮动,元素浮动后会影响后续元素的位置
3、为父元素设置overflow属性
取值为:hidden 或者 auto
弊端:如果内容中有东西要溢出显示(如弹出框)
那么也会一同被隐藏
4、父元素中,追加块级空子元素(必须是块级),并设置其clear属性为both
5、... ...
2、显示
1、显示方式
显示方式决定了元素在页面中默认的定位方式
属性:display
取值:
1、none
让生成的元素不显示,并且脱离文档流
2、block
让元素表现的和块级元素一样
3、inline
让元素表现的和行内元素一样
4、inline-block
让元素表现的和行内块一样
多个行内块在一行内显示,并且允许修改尺寸
(radio,checkbox除外)
2、显示效果
1、visibility
作用:可见性
属性:visibility
取值:
1、visible
默认值,可见的
2、hidden
隐藏的,依然占据页面空间
3、collapse
用在表格中,删除一行或一列时,不影响表格整体布局
visibility:hidden 与 display:none的区别
display:none;脱离文档流,所以不占页面空间
visibility:hidden;没有脱离文档流,所以占页面空间,不显示内容而已
2、opacity
作用:指定元素的透明度
属性:opacity
取值:0(完全透明)-1(完全不透明)之间的数字
3、vertical-align
作用:垂直居中对齐,不是所有的元素能使用,控制的是当前元素两边的文本或行内元素
相对于当前元素的垂直对齐方式
注意:用在 td 或 行内块元素 或 img中
取值:
1、top:顶部对齐
2、middle:中间对齐
3、bottom:底部对齐
4、baseline:基线对齐
基线对齐:
1、行内块元素的基线
基线是在最后一行文本的底端
2、图像
基线是在图像底部再向下3px处
顶部对齐、中间对齐、底部对齐、基线对齐示意图:
3、光标作用:改变鼠标的显示状态
属性:cursor
取值:
1、default
默认
2、pointer
小手状态,与a标记移入时一样
3、crosshair
+
4、text
I
5、wait
等待
6、help
帮助
3、列表
1、列表项标识
属性:list-style-type
取值:
1、none
无标记
2、disc
3、square
4、circle
... ...
2、列表项图像
属性:list-style-image
取值:url();
3、列表项位置
默认位置:标识默认列表项内容区域之外
属性:list-style-position
取值:
1、outside
默认值
2、inside
将标识放置于列表项区域之内
4、列表属性
属性:list-style
取值:type url() position;
常用方式:list-style:none;
4、定位
1、定位属性
1、定位方式
属性:position
取值:
1、static:静态定位,默认定位
2、relative:相对定位
3、absolute:绝对定位
4、fixed:固定定位
注意:将position设置为
relative/absolute/fixed 任意一种定位方式的话,那么该元素就被称为“已定位元素”
2、偏移属性
属性:
1、top:以元素顶端作为基准点,上下移动元素
2、bottom:以元素底端作为基准点,上下移动元素
3、left:以元素左边作为基准点,左右移动元素
4、right:以元素右边作为基准点,左右移动元素
3、堆叠顺序
作用:堆叠效果中,显示调整堆叠顺序
属性:z-index
取值:没有单位的数字
2、相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
实现元素位置的微调
2、语法
属性&值:
position:relative
配合偏移属性实现位置的微调
top/bottom/left/right
偏移属性示意图:
1、什么是绝对定位
1、绝对定位的元素会脱离文档流,不占据页面空间
2、会相对于它 最近的 已定位的 祖先元素去实现位置的初始化
3、如果当前元素没有 已定位的祖先元素,
那么就会相对于最初的包含框实现位置初始化,比如body或html
4、绝对定位的元素会变成块级元素
2、语法
属性 & 值:
position:absolute;
配合着 偏移属性 实现元素的定位(位置移动)
3、使用场合
1、弹出菜单一律采用绝对定位的方式
4、堆叠顺序
1、什么是堆叠顺序
产生堆叠效果之间的元素的排列顺序
2、语法
属性:z-index
取值:没有单位的数值
3、注意问题
1、必须是已定位元素才能使用z-index
2、默认顺序是 后来者居上
3、父子关系之间无法用z-index调整堆叠顺序,永远都是 子压在父上