1、浮动
1、清除浮动
元素一旦浮动起来之后,后面的元素要上前占位,有可能被浮动元素压在底下。如果元素不想被压在底下的话,则可以通过清除浮动影响的方式来解决问题。
1、语法
属性:clear
取值:
1、none
默认值,不做任何清除浮动的操作
2、left
清除当前元素前面元素左浮动所带来的影响,即不会被前面元素左浮动而压在底下
3、right
清除当前元素前面元素右浮动所带来的影响,即不会被前面元素右浮动而压在底下
4、both
清除当前元素前面元素任何一种浮动方式所带来的影响
2、浮动元素对父元素高度的影响
由于浮动元素会脱离文档流,所以是不占据页面空间的,那么也就不占父元素的空间。那么父元素的高度是以未浮动的子元素的高度为准的。
解决父元素的高度:
1、为父元素设置高度
弊端:不一定每次都清楚的知道父元素的高度
2、设置父元素也浮动
弊端:会对父元素后面的元素产生位置的影响
3、设置父元素的 overflow 为 hidden 或 auto
弊端:如果有溢出要显示的元素,也一同被隐藏了
4、在父元素中追加空块级元素,并设置其clear属性为both
2、其他定位
1、相关属性
1、定位方式
属性:position
取值:
1、static - 静态的,默认值
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
注意:将元素的position设置为relative/absolute/fixed任意一种的话,那么该元素就称为"已定位元素"
2、偏移属性(共4个)
作用:配合着已定位元素实现位置的移动
属性:top / right / bottom /left
取值:以 px 为单位的数值
top:以元素的上边为基准边移动元素
right:以元素的右边为基准边移动元素
bottom:以元素的下边为基准边移动元素
left:以元素的左边为基准边移动元素
2、定位方式 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
2、场合
元素位置微调时使用相对定位
3、语法
属性:position
取值:relative
配合着 偏移属性 实现位置的移动
练习:
创建一个网页 03-position-relative.html
创建一个ul以及四个li
每个li 100*30,背景颜色,左浮动,10px右外边距
1、使用相对定位
当鼠标悬停在li上时,li向左上偏移10px
2、使用margin 完成上述操作
3、定位方式 - 绝对定位(难点)
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流-不占页面空间
2、绝对定位的元素会相对于离它最近的,已定位的,祖先元素去实现位置的初始化
3、如果元素没有已定位的祖先元素,那么元素将相对于body去实现位置的初始化
2、语法
属性:position
取值:absolute
配合着 偏移属性 实现位置的定位
3、注意
绝对定位的元素会变为块级元素
(任何元素变成绝对定位的话,就可以直接修改尺寸)
4、堆叠顺序
1、什么是堆叠顺序
已定位元素们堆叠在一起的排列顺序
2、语法
属性:z-index
取值:无单位的数字,数字越大元素越靠上,默认值为 0
3、注意
1、如果堆叠顺序相同的话,则后来者居上
2、只有已定位的元素才能使用z-index
relative/absolute/fixed
3、父子元素之间,永远都是子压在父上,是不受堆叠顺序影响的
5、定位方式 - 固定定位
1、什么是固定定位
让元素固定在浏览器窗口的某个位置处,不会随着滚动条的滚动而发生位置的改变
2、语法
属性:position
取值:fixed
配合着 偏移属性 实现元素位置的固定
3、注意
1、固定定位的元素永远都是相对于body实现位置初始化的
2、固定定位元素会变成块级元素
3、显示
1、显示方式
1、什么是显示方式
决定了元素是以什么样的方式显示在网页中(块级/行内/行内块)
2、语法
属性:display
取值:
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2、block
将元素变为块级元素
3、inline
将元素变为行内元素
4、inline-block
将元素变为行内块元素
特点:
1、多个元素能够在一行内显示 - 行内
2、允许修改尺寸 - 块级
2、显示效果
1、可见性属性
属性:visibility
取值:
1、visible
默认值,可见的
2、hidden
隐藏的,未脱离文档流,所以还占据着页面空间
面试:
visibility:hidden和display:none的区别
visibility:hidden 未脱离文档流
display:none 脱离文档流,不占空间
2、透明度属性
属性:opacity
取值:0(完全透明) ~ 1(完全不透明)
测试:
网页中创建两个h1标记,
第一个h1,使用rgba设置红色背景,0.5透明度
第二个h1,设置红色背景,并设置元素的透明度为 0.5
3、垂直方向对齐方式
属性:vertical-align
取值:top / middle / bottom / baseline
1、放在td中
相当于是valign的作用
取值:top / middle / bottom,middle是默认值
2、图片 和 行内块元素中
设置元素两端的文本相对于元素的垂直对齐方式
取值:top / middle / bottom / baseline,baseline是默认值
3、光标
作用:改变鼠标悬停在元素上时鼠标的样子
属性:cursor
取值:
1、default
2、pointer - 小手
3、text - I
4、crosshair - +
5、wait - 等待
6、help - 帮助
#main{
cursor:pointer;
}
1、清除浮动
元素一旦浮动起来之后,后面的元素要上前占位,有可能被浮动元素压在底下。如果元素不想被压在底下的话,则可以通过清除浮动影响的方式来解决问题。
1、语法
属性:clear
取值:
1、none
默认值,不做任何清除浮动的操作
2、left
清除当前元素前面元素左浮动所带来的影响,即不会被前面元素左浮动而压在底下
3、right
清除当前元素前面元素右浮动所带来的影响,即不会被前面元素右浮动而压在底下
4、both
清除当前元素前面元素任何一种浮动方式所带来的影响
2、浮动元素对父元素高度的影响
由于浮动元素会脱离文档流,所以是不占据页面空间的,那么也就不占父元素的空间。那么父元素的高度是以未浮动的子元素的高度为准的。
解决父元素的高度:
1、为父元素设置高度
弊端:不一定每次都清楚的知道父元素的高度
2、设置父元素也浮动
弊端:会对父元素后面的元素产生位置的影响
3、设置父元素的 overflow 为 hidden 或 auto
弊端:如果有溢出要显示的元素,也一同被隐藏了
4、在父元素中追加空块级元素,并设置其clear属性为both
2、其他定位
1、相关属性
1、定位方式
属性:position
取值:
1、static - 静态的,默认值
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
注意:将元素的position设置为relative/absolute/fixed任意一种的话,那么该元素就称为"已定位元素"
2、偏移属性(共4个)
作用:配合着已定位元素实现位置的移动
属性:top / right / bottom /left
取值:以 px 为单位的数值
top:以元素的上边为基准边移动元素
right:以元素的右边为基准边移动元素
bottom:以元素的下边为基准边移动元素
left:以元素的左边为基准边移动元素
2、定位方式 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
2、场合
元素位置微调时使用相对定位
3、语法
属性:position
取值:relative
配合着 偏移属性 实现位置的移动
练习:
创建一个网页 03-position-relative.html
创建一个ul以及四个li
每个li 100*30,背景颜色,左浮动,10px右外边距
1、使用相对定位
当鼠标悬停在li上时,li向左上偏移10px
2、使用margin 完成上述操作
3、定位方式 - 绝对定位(难点)
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流-不占页面空间
2、绝对定位的元素会相对于离它最近的,已定位的,祖先元素去实现位置的初始化
3、如果元素没有已定位的祖先元素,那么元素将相对于body去实现位置的初始化
2、语法
属性:position
取值:absolute
配合着 偏移属性 实现位置的定位
3、注意
绝对定位的元素会变为块级元素
(任何元素变成绝对定位的话,就可以直接修改尺寸)
4、堆叠顺序
1、什么是堆叠顺序
已定位元素们堆叠在一起的排列顺序
2、语法
属性:z-index
取值:无单位的数字,数字越大元素越靠上,默认值为 0
3、注意
1、如果堆叠顺序相同的话,则后来者居上
2、只有已定位的元素才能使用z-index
relative/absolute/fixed
3、父子元素之间,永远都是子压在父上,是不受堆叠顺序影响的
5、定位方式 - 固定定位
1、什么是固定定位
让元素固定在浏览器窗口的某个位置处,不会随着滚动条的滚动而发生位置的改变
2、语法
属性:position
取值:fixed
配合着 偏移属性 实现元素位置的固定
3、注意
1、固定定位的元素永远都是相对于body实现位置初始化的
2、固定定位元素会变成块级元素
3、显示
1、显示方式
1、什么是显示方式
决定了元素是以什么样的方式显示在网页中(块级/行内/行内块)
2、语法
属性:display
取值:
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2、block
将元素变为块级元素
3、inline
将元素变为行内元素
4、inline-block
将元素变为行内块元素
特点:
1、多个元素能够在一行内显示 - 行内
2、允许修改尺寸 - 块级
2、显示效果
1、可见性属性
属性:visibility
取值:
1、visible
默认值,可见的
2、hidden
隐藏的,未脱离文档流,所以还占据着页面空间
面试:
visibility:hidden和display:none的区别
visibility:hidden 未脱离文档流
display:none 脱离文档流,不占空间
2、透明度属性
属性:opacity
取值:0(完全透明) ~ 1(完全不透明)
测试:
网页中创建两个h1标记,
第一个h1,使用rgba设置红色背景,0.5透明度
第二个h1,设置红色背景,并设置元素的透明度为 0.5
3、垂直方向对齐方式
属性:vertical-align
取值:top / middle / bottom / baseline
1、放在td中
相当于是valign的作用
取值:top / middle / bottom,middle是默认值
2、图片 和 行内块元素中
设置元素两端的文本相对于元素的垂直对齐方式
取值:top / middle / bottom / baseline,baseline是默认值
3、光标
作用:改变鼠标悬停在元素上时鼠标的样子
属性:cursor
取值:
1、default
2、pointer - 小手
3、text - I
4、crosshair - +
5、wait - 等待
6、help - 帮助
#main{
cursor:pointer;
}