1.《CSS世界》学习笔记--关于width和height易忽略

2018-02-08 本文已影响0人阿古瓜

一.width和height对于百分比单位的特殊规定。

对于width属性，父元素width为auto,其百分比值也是支持的；但是对于height属性，其父元素为height为auto，只要子元素在文档流中，其百分比值完全被忽略了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>height的auto无效情形</title>
    <style type="text/css">
        div {
            width: 100%;   /*这是多余的*/
            height: 100%;  /*这是无效的*/
            background:  url(bg.png);
        }
    </style>
</head>
<body>
    <div>我要满屏显示背景图</div>
</body>
</html>

/*其body的height值默认为auto,其body的父级html的height值也为auto，
故有设置  html,body { height: 100%;} 方才有效！*/

注意： height:100%无效的原因就是：规范中规定了如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。则 'auto' * 100% = NAN, 算不了嘛！
但是width的解释却是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的。
对于“未定义行为”，浏览器根据自己的理解去发挥，据测试，布局效果在各个浏览器下都是一致的。这时的width值，于是就按照包含块真实的计算值作为百分比基数去计算了。--《CSS世界》

二.让元素支持height:100%效果

/*方法1.设定显式的高度值 。height: 200px; 或者可以生效的百分比高度*/
html, body {
      height: 100%;
}

/*方法2.使用绝对定位*/
div {
    height: 100%;
    position: absolute;
}

注意：绝对定位元素的百分比计算和绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，非绝对定位元素则是相对于content box计算的。--《CSS世界》

三.min-width/max-width和min-height/max-height的认识

1.虽然MDN和W3C维基文档上都显示min-width/min-height的初始值为0，但在浏览器中实测却是auto的效果

属性	初始值	备注
width	auto
height	auto
max-width	none
max-height	none
min-width	auto	实测
min-height	auto	实测

给min-height 设置值为auto或是不写，无动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>height的auto无效情形</title>
    <style type="text/css">
        div {
            /*min-height: auto;*/
            transition: min-height 3s;
            background-color: #ffc;
        }
        div:hover {
            min-height: 300px;
        }
    </style>
</head>
<body>
    <div>我要慢慢长大，不要一下子长大！</div>
</body>
</html>

设置min-height的值为0，后有动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>height的auto无效情形</title>
    <style type="text/css">
        div {
            min-height: 0;
            transition: min-height 3s;
            background-color: #ffc;
        }
        div:hover {
            min-height: 300px;
        }
    </style>
</head>
<body>
    <div>我要慢慢长大，不要一下子长大！</div>
</body>
</html>

2.超越!important,超越最大

超越!important指的是max-width会覆盖width，而且是超级覆盖，比!important的权重还要高。

<img src="1.png"  style="width=480px!important;">
img { max-width: 200px}

/*图片最后呈现的宽度是200px*/

超越最大指的是min-width覆盖max-width，此规则发生在两者冲突的时候

div {
    min-width: 1500px;
    max-width: 1200px;
}
/*最小宽度比最大宽度设置得要大，此时遵循“超越最大”规则，min-width胜出，元素表现为到少1500px宽*/

四.原理应用：任意高度元素的展开收起动画技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意高度元素的展开收起动画</title>
    <style type="text/css">
        p {
            max-height: 0;
            transition: max-height 0.5s;
            border: 2px solid red;
            overflow: hidden;

        }
        p.active{
            max-height: 600px;  /*max-height只要比height计算值大即可实现一个高度不定的任意元素的展开动画效果的实现了 */

        }
    </style>
</head>
<body>
    <h3>这是一则最新html大会的消息...</h3>
    <p>HTML 5开始大热标志性的事件是苹果前CEO Steve Jobs 公开炮轰Adobe Flash，并指出Flash在移动终端的不利因素，而且HTML 5将获得胜利。顿时IT界、数字营销界、数字媒体界等相关领域的人开始一窝蜂地议论、追捧、打击，HTML5成了当仁不让的明星(就在不久前Adobe宣布停止对Mobile端Flash的开发与更新)。但是很多人都在问：HTML 5是什么?如何鉴定HTML 5产品?</p>

    <script type="text/javascript">
        var oTitle = document.querySelector('h3'),
            oContent = document.querySelector('p');

        if( oTitle && oContent ) {
            oTitle.onmouseover = function () {
                oContent.setAttribute('class', 'active');
            };
            oTitle.onmouseout =  function () {
                oContent.setAttribute('class', '');
            }

        }
    </script>
</body>
</html>

下一节