1、浮动
1、浮动引发的特殊效果
1、元素一旦浮动起来之后,都将变为块级元素
2、元素一旦浮动起来之后,宽度在不设定的情况下,将以内容为准
3、当父元素中显示不下所有的已浮动子元素的话,那么最后一个将换行,依次类推。但有可能会被卡住
4、文本,图像,行内元素和行内块元素时采用环绕的方式来排列的,是不会被其它的浮动元素压在底下的
2、清除浮动
元素一旦浮动起来之后,就会对后续元素的位置带来一定的影响(后续元素要上前占位,有可能会被压住)。如果后续元素不想被前面元素影响的话,可以通过 清除浮动 的方式来清除影响
清除影响:不上前占位
属性:clea
取值:
1、none
默认值,不做任何清除操作
2、left
清除前面元素左浮动所带来的影响
3、right
清除前面元素右浮动所带来的影响
4、both
清除前面元素任何一种浮动效果所带来的影响
3、浮动元素对父元素的高度影响
父元素的高度是以未浮动的子元素为准的
1、直接设置父元素的高度
弊端:必须要知道父元素的高度是多少
2、设置父元素也跟着浮动
弊端:不是再任何时候父元素都要跟着浮动,而且会对后续元素会带来位置的影响
3、为父元素设置overflow属性,取值为 auto 或 hidden
弊端:有要溢出显示的内容,也一同被隐藏了
4、在父元素的最后位置处,增加一个空子元素,并设置其 clear:both 即可
5、... ...
2、显示
1、显示方式
1、什么是显示方式
显示方式决定了元素在页面中的显示位置效果
2、语法
属性:display
取值:
1、none
让生成的元素不显示 - 隐藏
特点:让元素脱离文档流 - 不占据页面空间
2、block
让生成的元素表现的和块级元素一样
特点:
1、正常显示
2、独占一行
3、允许设置尺寸
4、允许正常处理 margin 和 padding
3、inline
让生成的元素表现的和行内元素一致
特点:
1、正常显示
2、多个元素在一行内排列
3、不能处理尺寸
4、不能正常处理 垂直方向的 margin 和 padding
4、inline-block
让生成的元素表现的和行内块元素一直
1、多个元素能够在一行内显示
2、允许设置元素的尺寸属性
5、table
让生成的元素表现的和table元素一样
1、宽度默认以内容为准
2、每个table独占一行
2、显示效果
1、可见性属性
属性:visibility
取值:
1、visible :可见的
2、hidden :隐藏的
3、collapse :用在表格时,当删除表格中的一行或一列的话不影响表格的整体布局
面试:
解释 display:none 与 visibility:hidden 的区别
display:none 会脱离文档流,所以它不会占据页面空间
2、透明度
作用:设置元素的不透明级别
属性:opacity
取值:0.0(完全透明) ~ 1.0(完全不透明)
注意:opacity 和 rgba()的区别
opacity : 让整个元素的所有内容全部都透明
rgba() : 只让颜色变的透明
3、垂直方向对齐效果
属性:vertical-align
使用场合:
1、td 中使用
取值:top / middle(默认值) / bottom
2、img 和 行内块元素(display:inline-block)
指定文本 相对于 图片 或 行内块元素垂直对齐方式
取值:top / middle / bottom / baseline(默认值)
baseline :
行内块:最后一行文本的下方
3、光标
作用:指定鼠标悬停在元素上时,鼠标的显示状态
属性:curso
取值:
1、default :默认值
2、pointer :小手
3、crosshair :+
4、text :I
5、wait :等待
6、help :帮助
3、列表
1、列表项标识
属性:list-style-type
取值:
1、none
无列表项标识显示
2、disc
3、circle
4、square
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、偏移属性
top : 以元素的上边为基准边,去移动元素
right:以元素的右边为基准边,去移动元素
bottom:以元素的下边为基准边,去移动元素
left:以元素的左边为基准边,去移动元素
2、定位 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
经常会应用于元素的位置微调
注意:元素原本所占据的空间依然会被保留
2、语法
属性:position
取值:relative
配合 偏移属性 实现位置的微调
3、定位 - 绝对定位
1、什么是绝对定位 & 特点
将元素设置为绝对定位的话将具备以下特征
1、绝对定位的元素会脱离文档流-不占据页面空间
2、绝对定位的元素会相对于离他最近的,已定位的,祖先元素 去实现位置的初始化
3、如果元素没有最近的祖先元素的话,那么就相对于最初的包含框(body)去实现位置的初始化
<body>
<div id="red">
<div id="green">
<div id="blue"></div>
</div>
</div>
</body>
2、语法
属性:position
取值: absolute
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。