CSS - 页面布局相关属性
display position float
CSS
发布日期:   2018-01-12
文章字数:   1.7k
阅读时长:   6 分
阅读次数:  

设置元素的显示形式

display属性

display属性可以改变元素的显示形式

常用属性值:

  1. none 隐藏元素
  2. block 将元素显示为块级元素
  3. inline 将元素显示为行内级元素
  4. inline-block 将元素显示为行内块级元素(能自定义宽高、内外边距, 并跟其他行内/行内块级元素在同一行显示)

注意点: display 属性是强制改变元素的显示形式, 你也可以通过list-item、table等属性值将其他元素改成 列表元素 和 表格元素, 但 强烈反对此做法( 标签语义化 )

overflow属性

overflow 属性设置内容(content)溢出盒子模型(边框)时的行为表现

语法: overflow : val

取值:

  1. visible 默认值, 不作任何处理, 内容完整显示
  2. hidden 修剪内容, 溢出部分不可见
  3. scroll 修剪内容, 溢出部分通过滚动条显示
  4. auto 如果内容被修剪, 溢出部分通过滚动条显示

注意点:

  1. 可按方向细分, overflow-x 和 overflow-y
  2. 滚动条所占空间属于 width 和 height

resize属性

resize 属性设置用户是否能调整元素大小

语法: resize : none(默认)|horizontal(可调宽度)|vertical(可调高度)|both(自由调整)

注意点: 当 overflow 不为默认值 visible 时, resize 属性才生效

visibility属性

visibility 属性设置元素是否可见

语法: visibility : visible(默认可见)|hidden(隐藏)

注意点: 在表格元素中设置 visibility : collapse 表示删除一行或者一列, 但不影响表格布局

opacity属性

opacity 属性设置元素的透明度

语法: opacity : val

注意点:

  1. val 取值 0.0(完全透明) 到 1.0(完全不透明), 默认值为1
  2. 兼容性: IE8之前, 使用 filter : Alpha(opacity = val) 代替, val 取值 0 - 100

让元素隐藏(不可见)的三种方式对比

让元素隐藏(不可见)可通过以下三种方式实现

  1. display : none
  2. visibility : hidden
  3. opacity : 0

区别:

  1. diaplay : none 是真正意义上的隐藏, 不占空间, 通过此方式控制显示隐藏会影响标准流布局, 而 visibility : hidden 和 opacity : 0 2中方式则仍会占原空间大小(不会影响标准流布局)
  2. opacity : 0 改变的仅是元素的透明度, 仍可被用户选中, 而display : none 和 visibility : hidden 2中方式则不可被选中

标准流(normal flow)

标准流指的是文本从左到右, 从上到下排列显示, 这也是传统HTML文档的文本布局

在标准流中, 块级元素独占一行, 垂直排列, 行内级/行内块级元素在水平方向一个接着一个排列, 不会出现层叠现象

标准流中盒模型的上下外边距传递和折叠问题

上下外边距的传递

  1. 块级元素上顶线与块级父元素上顶线重合, margin-top传递到父元素
  2. 块级元素下底线与块级父元素下底线框重合, 父元素height: auto, margin-bottom传递到父元素

解决方案:

  1. 设置 display : inline-block, 改变元素的显示形式
  2. 通过给父元素设置上下内边距(padding)代替子元素的上下外边距(margin)
  3. 给父元素设置边框(border)

上下外边距的折叠

  1. 垂直方向中, 两个相邻块级元素的 margin-top 和 margin-bottom 会合并, 取两者中的较大值
  2. 无内容的块级元素, 上下外边距折叠(不生效)

解决方案:

  1. 设置 display : inline-block, 改变元素的显示形式
  2. 只设一个外边距(治标不治本), 且对第二种情况不生效
  3. 设置上下内边距(padding)代替上下外边距(margin)

定位和浮动

在工作中, 我们经常需要让元素层叠(即脱离标准流), 在CSS中我们可以通过 position(定位) 或者 float(浮动) 属性实现

position属性

  1. 静态定位(默认)

    语法: position : static

    注意点: 标准流布局, 元素只能通过 margin(外边距) 和 padding (内边距) 调整位置

  2. 相对定位

    语法: position : relative

    注意点:

    1. 标准流布局, 元素仍占着原本的位置空间
    2. 参照对象是元素原本的位置
    3. 可通过top、right、bottom、left以及内外边距进行调整
    4. 不会影响其他兄弟元素的布局, 可实现层叠效果

  3. 绝对定位

    语法: position : absolute

    注意点:

    1. 脱离标准流, 不占原来位置
    2. 参照对象是最邻近的定位祖先元素, 如果没有, 则参照视口( viewport )
    3. 可通过top、right、bottom、left以及内外边距进行调整

  4. 固定定位

    语法: position : fixed

    注意点:

    1. 脱离标准流, 不占原来位置
    2. 参照对象是视口( viewport )
    3. 可通过top、right、bottom、left以及内外边距进行调整
    4. 画布( document )滚动时, 元素固定不动

    四种定位对比

  5. z-index属性

    z-index 属性指定元素的层叠顺序

    语法: z-index : number

    注意点:

    1. 只对定位元素生效, 而静态定位元素一般在最底层

    2. 值越高, 越靠近顶层, 可设负值, 表示被静态定位元素覆盖

    3. 两个定位元素的层叠顺序比较

      a) 设置了相同z-index且祖先元素没有设置, 后面的覆盖前面的

      b) 祖先元素设置了z-index, 子元素在比较时, 先比较最外层祖先元素的z-index属性, 然后逐层比较, 较大值覆盖较低值

float属性

语法: float : none(默认)|left(向左浮动)|right(向右浮动)

注意点:

  1. 脱离标准流
  2. 向左或向右移动, 直到自己边界紧贴包含块(一般是父元素)或者其他浮动元素的边界
  3. 浮动元素不会跟行内级/行内块级元素层叠
  4. 浮动元素之间互不层叠
  5. 定位元素一般层叠在浮动元素上
  6. 行内级/行内块级元素浮动后, 元素顶部与该行顶部对齐
  7. 之后浮动的元素顶部不会超过之前所有浮动元素的顶部
  8. 绝对定位元素会忽视float属性

浮动导致的父元素高度坍塌问题

由于元素浮动后, 不再向父元素报备高度, 因此当所有子元素都浮动后会导致父元素高度坍塌

解决办法:

  1. 快速解决, 给父元素设置 overflow : hidden, 改变父元素对内容溢出的默认行为(不推荐), 一般开发测试阶段使用

  2. 清浮动, 给对应父元素加clear-fix类名

    .clear-fix::after{
    content : "";
    display : block;
    clear : both;
    height : 0; /* 兼容旧浏览器 */
    visibility : hidden; /* 兼容旧浏览器 */
}
.clear-fix {
    *zoom : 1; /* 兼容IE6~7浏览器 */
}

   转载规则


《CSS - 页面布局相关属性》 由 Tenderness 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录