zoukankan      html  css  js  c++  java
  • css中block与inline的区别

    1. Block和inline元素对比
    所有的HTML元素都属于block和inline之一。
    block元素的特点是:
    总是在新行上开始;
    高度,行高以及顶和底边距都可控制;
    宽度缺省是它的容器的100%,除非设定一个宽度
    <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

    相反地,inline元素的特点是:
    和其他元素都在一行上;
    高,行高及顶和底边距不可改变;
    宽度就是它的文字或图片的宽度,不可改变。
    <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

    用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?
    让一个inline元素从新行开始;
    让块元素和其他元素保持在一行上;
    控制inline元素的宽度(对导航条特别有用);
    控制inline元素的高度;
    无须设定宽度即可为一个块元素设定与文字同宽的背景色。

    2. 再来一个box黑客方法
    之所以有这么多box黑客方法,是因为IE在6之前对box的理解跟别人都不一样,它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致,可以用CSS的方法:

    padding: 2em;
    border: 1em solid green;
    20em;
    width/**/:/**/ 14em;

    第一个宽度所有浏览器都认得,但IE5.x不认得第2行的宽度设置,只因为那一行上有空白的注释符号(多么蠢的语法分析!),所以IE5.x就用20减掉一些空白,而其他浏览器会用14这个宽度,因为它是第2行,会覆盖掉第1行。

    22. 页面的最小宽度

    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:

    <body>
    <div class="container“>

    然后CSS这样设计:

    #container
    {
    min- 600px;
    expression(document.body.clientWidth < 600? "600px": "auto" );
    }

    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

    同样的办法也可以为IE实现最大宽度:

    #container
    {
    min- 600px;
    max- 1200px;
    expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
    }
  • 相关阅读:
    GhostBSD 3.0RC3,基于GNOME的FreeBSD
    Nagios 3.4.3 发布,企业级监控系统
    Jolokia 1.0.6 发布, JMX远程访问方法
    微软希望开发人员不要使 WebKit 成为新版 IE6
    Kwort Linux 3.5 正式版发布
    EJDB 1.0.24 发布,嵌入式 JSON 数据库引擎
    Pale Moon 15.3 Firefox“苍月”优化版发布
    Galera Load Balancer 0.8.1 发布
    SmartSVN V7.5 正式发布
    PostgresQL建立索引如何避免写数据锁定
  • 原文地址:https://www.cnblogs.com/zwl12549/p/719715.html
Copyright © 2011-2022 走看看