浮动定位、显示、光标、列表项标识

Luckies
220 阅读5分钟

1. 定位 - 浮动

1.1. 定位

指的是元素在页面中出现的位置

1.2. 定位的分类
  • 按照定位的效果可以分成以下几类:
    1. 普通流定位( 默认定位 )
    2. 浮动定位
    3. 相对定位
    4. 绝对定位
    5. 固定定位
1.3. 定位之普通流定位

  • 普通流定位又称文档流定位, 页面元素的默认定位方式

  • 每个元素都是从其父元素左上角开始排列的

  • 每个元素在页面中都会占据一定的空间

  • 行内元素或者行内块元素会横排一行内显示, 显示不下自动换行

  • 块级元素, 每行只能显示一个

  • 问题: 多个块级元素, 如何能在一行内显示 ?

1.4. 定位 - 浮动定位
1.4.1. 什么是浮动定位 & 特征
  • 如果将元素定位方式设置为浮动定位, 那么将具备以下几个特点:
    1. 浮动定位元素会脱离文档流, 不占据页面空间, 后面的未浮动元素会上前补位
    2. 浮动元素会停靠在父元素的左边或右边, 或其他平级的已浮动元素的边缘上
    3. 浮动只能在当前行内浮动
    4. 浮动元素支持margin, 但不支持auto
  • 浮动解决的问题 -- 块级元素一行显示的问题
  • 浮动元素仍在父元素范围里边
1.4.2. 语法规范
  • 属性: float
  • 取值: 1. none 默认值 无任何浮动 2. left: 左浮动, 让元素停靠在父元素的左边 或者 挨着左侧已有的浮动元素 3. right: 右浮动, 让元素停靠在父元素的右边 或者 挨着右侧已有的浮动元素
1.4.3. 浮动引发的特殊效果
  1. 如果父元素中显示不下所有的已浮动子元素, 将换行显示
  2. 元素一旦浮动起来之后, 那么宽度将由内容来决定( 非手动指定情况下 )
  3. 元素一旦浮动起来之后, 那么将变成块级元素
    • 对行内元素影响最大:
      • 行内元素: 默认是不能修改尺寸
      • 变成块级后: 允许修改尺寸
  4. 文本 / 行内元素 / 行内块元素在页面中是采用环绕的方式来排列的, 他们是不会被浮动元素压在底下, 而是会巧妙的避开浮动元素
1.4.4. 清除浮动

清除 当前元素 前面的元素浮动 所带来的影响

  • 属性: clear
  • 取值: 1. none: 默认值 不做任何清除动作 2. left: 清除当前元素 前面的元素 左浮动带来的影响 3. right: 清除当前元素 前面的元素 右浮动带来的影响 4. both: 清除当前元素 前面的元素 任何一种浮动所带来的影响
1.4.5. 浮动元素对父元素高度的影响

所有子元素浮动 父元素的高度会消失

  • 解决方案: 1. 直接设置父元素的高度 弊端: 要知道父元素的高度是多少

    1. 设置父元素也浮动 弊端: 对后续元素的位置有影响

    2. 设置父元素 overflow 属性为 hidden 或 auto 弊端: 如果有内容要溢出显示 EX: 弹出菜单, 也一同被隐藏

    3. 在父元素中, ( 在浮动元素原位置下 )追加空块级元素, 并设置其 clear为 both 弊端: 在网页中多个元素

    4. 解决方案4的简便写法, CSS3 高级解决

      父元素:after{
  content: ''; display: block; clear: both;
}

2. 显示

2.1. 显示方式
  • 属性: display
  • 取值: 1. none: 让元素没有, 即隐藏页面元素并且脱离文档流( 不占据页面空间 ) 2. block: 让元素表现与块级元素一样 3. inline: 让元素表现和行内元素一样, 一行内显示多个, 不允许修改尺寸 4. inline-block: 让元素表现与行内块元素一样
    • 特点: 1. 多个元素能够在一行内显示 2. 允许修改元素尺寸
    1. table: 让元素表现与table表现一样
2.2. 显示效果
2.2.1. 可见性
  • 属性: visibility
  • 取值: 1. visible: 可见的, 默认值 2. hidden: 隐藏 并没有脱离文档流, 仍占据空间 3. collapse: 用在表格上, 动态删除表格一行或一列时, 不影响表格的整体布局
  • 常见面试题: visibility: hidden; 和 display: none; 的区别
    • display: none; : 能够隐藏元素, 但是会让元素脱离文档流
    • visibility: hidden;: 只是单纯的隐藏元素, 并没有脱离文档流
2.2.1. 透明度
  • 属性: opacity
  • 取值: 0.0( 完全透明 ) - 1.0( 完全不透明 )
  • background-color: rgba(255, 0, 0, 0.5);: 红色半透明 -> ( a: 透明度 )

注意: opacity 使元素的背景色, 字体色全都改变了

2.2.3. vertical-align
  • 作用: 设置垂直对齐方式
  • 使用场合: 1. table / td: 控制其内容的垂直对齐方式 2. 行内块元素 / img: 控制 元素 两端文本 相对于元素的垂直对齐方式
  • 属性: vertical-align
  • 取值: 1. top 2. middle 3. bottom 4. baseline: 基线对齐
    1. 对于行内块元素: 最后一行文本的下方
    2. 对于图片: 位于图片下方 3px 位置处
3. 光标
  • 属性: cursor
  • 取值: 1. default: 默认 2. pointer: 点击小手 3. crosshair: 光标( + 符号 ) 4. text: I 型号 5. wait: 等待 -> 圆圈 6. help: 帮助 -> 大多是情况下为: 问号

3. 列表项

3.1. 列表项标识
  • 属性: list-style-type
  • 取值: 1. none: 不显示列表项标识 2. disc: 实心圆 3. circle: 空心圆 4. square: 方块 5. ..........
3.2. 列表项图像

由图像充当列表项标识

  • 属性: list-style-image
  • 取值: url()
3.3. 列表项位置

列表项标识在内容区域内还是区域外

  • 属性: list-style-position
  • 取值: 1. outside: 默认 li 之外 2. inside: 将标识放置在 li 之内
3.4. 列表属性
  • 属性: list-style
  • 取值: type url position;
  • 最常用的方式: list-style: none;

纵向排列或横向排列的地方最好用列表做布局

avatar
文章
阅读
粉丝