92. Responsive and Fixed Navigation Menu - Responsive Web Design

Moon月亮猪

于 2019-10-12 12:44:14 发布

阅读量101

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_35977399/article/details/102518117

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话：
position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），
只要设置了position：absolute、 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素

以span为例子，如何让元素变为inline-block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <span style="height:100px;width:200px;background:yellowgreen">normal span, width and height doesn't work.</span>
    <br>
    <br>
    <span style="height:100px;width:200px;background:pink;position:absolute">span with position:absolute, width and
        height work.</span>
    <br>
    <br>
    <br>
    <br>
    <br>
    <span style="height:100px;width:200px;background:orange;float:left">span with float:left, width and height
        work.</span>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="display: flex">
        <span style="height:100px;width:200px;background:gold;">span's father with display:flex, width and height
            work.</span>
    </div>
    <br>
    <span style="height:100px;width:200px;background:deeppink;position:fixed">span with position:fixed, width and height
        work.</span>
</body>
</html>

2. Fixed未解之谜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100%;
            position: fixed;
            height:80px;
            background: yellowgreen;
        }

        p{
            margin:30px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
        literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
        College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
        going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
        comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
        The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
        
        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections
        1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
        form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
        <p style="color:red">去掉段落，box1没有top margin， 加上段落后，就会出现top margin，margin来自于p的margin Why</p>
        <p>生成绝对定位的元素，相对于浏览器窗口进行定位。这不对啊</p>
</body>
</html>

3. background-size 详述