首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css应知应会 第四集

css应知应会 第四集

原创
作者头像
李才哥
修改2020-08-17 10:19:31
1.2K0
修改2020-08-17 10:19:31
举报
文章被收录于专栏:李才哥李才哥

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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档