专栏首页李才哥css应知应会 第四集
原创

css应知应会 第四集

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我碰到的那些面试题js及es6(1)

    es6是一个新的标准,它包含了许多新的语言特性和库,是JS最实质性的一次升级。比如箭头函数、字符串模板、generators(生成器)、async/await、...

    李才哥
  • HTML和CSS

    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

    李才哥
  • JavaScript秘密笔记 第四集

    何时: 后续循环依然希望执行时 其实,颠倒判断条件,就可避免使用continue

    李才哥
  • python笔记

    在python中列表用[]来表示,逗号分隔元素, 例如cars = [1,2,3]

    blankmiss
  • JQuery笔记

    菜鸟雷
  • web前端页面布局学习

    学习链接https://www.bilibili.com/video/av75501761?p=2

    逆回十六夜
  • 再谈Heap(堆)的妙用

    好久没更新了,今天我又来了。一直看我文章的朋友可能会发现,我之前多次提到堆这个数据结构,它可以帮助我们快速地在一堆数据中,找到符合某个条件的最大或者最小的元素。...

    写代码的阿宗
  • CSS——定位

    Html5知典
  • JDK1.9-数据结构

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java

扫码关注云+社区

领取腾讯云代金券