zoukankan      html  css  js  c++  java
  • 谈BFC和haslayout

    今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们。

    CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种。避开这个不说,我们说布局。

    布局经常用到的有浮动、定位,当然也需要知道盒子模型,这里的盒子模型不是说就是内边距、外边距、边框等,他们只是其中的一种。

    盒子模型总共有5个:1) BFC;2) haslayout;3) 元素盒 ;4) EM盒 ;5) 行盒

    BFC

    含义:顾名思义就是Block Formatting Context。

    怎么触发形成

    • float 不能设置为 none。
    • overflow 不能设置为 visible。
    • display 的值为(table-cell、table-caption、inline-block)。
    • position 不能设置为 relative 和 static。 

    haslayout

    含义:“Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。微软开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 hasLayout,这种渲染特性生效时也就是将 hasLayout 设成了 true 之时

    由来:不同于标准属性,也不像某些浏览器的私有 CSS 属性,layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西,元素要么本身自动拥有 layout,要么借助一些 CSS 声明悄悄地获得 layout。

    下列元素应该是默认具有 layout 的:

    • <html>, <body>
    • <table>, <tr>, <th>, <td>
    • <img>
    • <hr>
    • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
    • <iframe>, <embed>, <object>, <applet>
    • <marquee>

    作用

    清除浮动;

    不和浮动元素重叠(效果同BFC);

    水平两栏自适应排版;

    .second-item { overflow: hidden; *zoom: 1;//IE6 }
  • 相关阅读:
    JS使用readAsDataURL读取图像文件
    python20个骚操作
    HTML标签的for属性
    进程、线程、协程理解
    mysql 深度解析auto-increment自增列"Duliplicate key"问题
    2020年MySQL数据库面试题总结(50道题含答案解析)
    如何用Redis统计独立用户访问量
    Redis中的布隆过滤器及其应用
    redis系列教程以及面试题
    大厂面试爱问的「调度算法」,20 张图一举拿下
  • 原文地址:https://www.cnblogs.com/a-moemiss/p/4309968.html
Copyright © 2011-2022 走看看