CSS(3)

最新推荐文章于 2023-08-22 16:39:13 发布
最新推荐文章于 2023-08-22 16:39:13 发布
阅读量922 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： HTML/CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/john_boom/article/details/77839856

浮动

浮动是css里面布局用的最多的属性。

    .box1{
        float: left;
        width: 300px;
        height: 400px;
        background-color: yellowgreen;
    }
    .box2{
        float: left;
        width: 400px;
        height: 400px;
        background-color: skyblue;
    }

效果如下：

这里写图片描述

两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。
浮动想学好，一定要知道三个性质。

浮动的元素脱标

证明1：

这里写图片描述

证明2：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}

浮动的元素互相贴靠

如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，自己去贴左墙。
这里写图片描述这里写图片描述这里写图片描述

右浮动： float:right;
这里写图片描述

浮动的元素有“字围”效果

HTML：

    <div>
        <img src="images/1.jpg" alt="" />
    </div>
    <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

让div浮动，p不浮动：
这里写图片描述
div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。

关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

浮动的性质：脱标、贴边、字围、收缩。
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
比如：

<style type="text/css">
    div{
        float: left;
        background-color: gold;
    }
</style>

这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度：
这里写图片描述
整个网页，就是通过浮动，来实现并排的。

浮动的清除

来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{
            float: left;
            width: 90px;
            height: 40px;
            background-color: gold;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div>
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。
这里写图片描述

第二个div中的li，去贴第一个div中最后一个li的边了。
原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。

清除浮动方法1：给浮动的元素的祖先元素加高度。

如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
这里写图片描述

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        div{
            height: 50px;
            border: 1px solid #000;
        }
        li{
            float: left;
            width: 90px;
            height: 40px;
            margin-right: 10px;
            background-color: gold;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div>
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

清除浮动方法2：clear:both;

网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。
脑弄大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            background-color: orange;
        }
        .box2{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

clear:both;

clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题，margin失效了。

清除浮动方法3：隔墙法

这里写图片描述

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            background-color: gold;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .cl{
            clear: both;
        }
        .h8{
            height: 8px;
            _font-size:0;
        }
        .h10{
            height: 10px;
            _font-size:0;
        }
        .h12{
            height: 12px;
            _font-size:0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div class="cl h8"></div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>
.cl{
    clear: both;
}
.h8{
    height: 8px;
    _font-size:0;
}

这里写图片描述
近些年，有演化出了“内墙法”：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            background-color: gold;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .cl{
            clear: both;
        }
        .h16{
            height: 16px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>

        <div class="cl h16"></div>
    </div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

这里写图片描述

内墙法的本质：给没有高的父亲撑出高度来。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: blue;
        }
        p{
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <div class="cl"></div>
    </div>
</body>
</html>

1）内墙法的用途：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 10px solid black;
        }
        .p1{
            float: left;
            width: 100px;
            height: 180px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 100px;
            height: 530px;
            background-color: yellow;
        }
        .p3{
            float: left;
            width: 100px;
            height: 190px;
            background-color: blue;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
        <div class="cl"></div>
    </div>
</body>
</html>

这里写图片描述
2）内墙法的用途

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 900px;
            margin: 0 auto;
            background-color: yellow;
        }
        .content .ad{
            float: left;
            width: 100px;
            height: 300px;
            background-color: blue;
        }
        .content .news{
            float: left;
            width: 600px;

        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="ad"></div>
        <div class="news">

             容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>

        <div class="cl"></div>
    </div>
</body>
</html>

这里写图片描述

清除浮动方法4：overflow:hidden;

overflow就是“溢出”的意思， hidden就是“隐藏”的意思。

overflow:hidden;

表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
内容太多，溢出了盒子：
这里写图片描述
overflow:hidden; 溢出盒子边框的内容，隐藏了。
这里写图片描述

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            overflow: hidden;
            border: 10px solid black;
        }
        .p1{
            float: left;
            width: 100px;
            height: 150px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 100px;
            height: 380px;
            background-color: yellow;
        }
        .p3{
            float: left;
            width: 100px;
            height: 120px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
    </div>
</body>
</html>

这里写图片描述这里写图片描述

清除浮动总结与案例

总结一下：

1） 加高法：

浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

1   <div>   → 设置height
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div>   → 设置height
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>
2) clear:both;法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div>   → clear:both;
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

3）隔墙法：

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
墙用自己的身体当做了间隙。

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div class="cl h10"></div>
8   
9   <div>
10      <p></p>
11      <p></p>
12      <p></p>
13  </div>

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。
内墙法：

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5       <div class="cl h10"></div>
6   </div>
7   
8   <div>
9       <p></p>
10      <p></p>
11      <p></p>
12  </div>

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

4）overflow:hidden;

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。

清除浮动的案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .news{
            width: 400px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px;
            overflow: hidden;
        }
        .news ul{
            list-style: none;
        }
        .news ul li{
            overflow: hidden;
            _zoom:1;
            border-bottom: 1px dashed gray;
        }
        .news ul li span.title{
            float: left;
        }
        .news ul li span.date{
            float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <ul>
            <li>
                <span class="title">哈哈哈哈哈哈哈哈</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">嘻嘻嘻嘻嘻</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">呜呜呜呜呜呜呜</span>
                <span class="date">2015年10月24日</span>
            </li>
        </ul>
    </div>
</body>
</html>

浏览器兼容问题

上述知识点遇见的浏览器兼容问题

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

height: 4px;
_font-size: 0px;

我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
比如：
_background-color: green;

这里写图片描述

解决微型盒子，正确写法：

height: 10px;
_font-size:0;

第二，IE6不支持用overflow:hidden;来清除浮动的
解决办法，以毒攻毒。追加一条

_zoom:1;

完整写法：

overflow: hidden;
_zoom:1;

实际上，_zoom:1;能够触发浏览器hasLayout机制。这个机制，不要深究了，因为就IE6有。我们只需要让IE6好用，具体的实现机制，有兴趣的同学，自行百度。

强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

我们刚才学习了两个IE6的兼容问题，这两个IE6的兼容问题，都是通过多写一条hack来解决的。
这个我们称为伴生属性。

height:6px;
_font-size:0;
overflow:hidden;
_zoom:1;

margin

margin的塌陷现象

标准文档流中，竖直方向的margin不叠加，以较大的为准。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .p1{
            width: 300px;
            height: 200px;
            background-color: orange;
            margin-bottom: 30px;
        }
        .p2{
            width: 300px;
            height: 200px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <p class="p1"></p>
    <p class="p2"></p>
</body>
</html>

这里写图片描述

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            border: 10px solid red;
            overflow: hidden;
        }
        .p1{
            width: 200px;
            height: 100px;
            background-color: orange;
            margin-bottom: 40px;
            float: left;
        }
        .p2{
            width: 200px;
            height: 100px;
            background-color: orange;
            margin-top: 30px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1"></p>
        <p class="p2"></p>
    </div>
</body>
</html>

这里写图片描述

盒子居中 margin:0 auto;

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：
margin-left: auto;
margin-right: auto;

简写为
margin:0 auto;

注意：

1） 使用margin:0 auto;的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用 text-align:center;

margin:0 auto;   → 让这个div自己在大容器中居中。
text-align: center;  → 让这个div内部的文本居中。

text-align还有

text-align:left;     没啥用，因为默认居左
text-align:right;    文本居右

善于使用父亲的padding，而不是儿子的margin

如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了

这个p有一个margin-top踹父亲，试图将自己下移

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 250px;

            background-color: orange;
        }
        p{
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 250px;
            padding-top: 50px;
            background-color: orange;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

这里写图片描述
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

关于margin的IE6兼容问题

IE6双倍margin bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

1       <ul>
2           <li></li>
3           <li></li>
4           <li></li>
5       </ul>

这里写图片描述
解决方案：
1）使浮动的方向和margin的方向，相反。
所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
float: left;
margin-right: 40px;

2）使用hack（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin
<li class="no1"></li>

ul li.no1{
_margin-left:20px;3 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 1px solid #000;
            height: 100px;
            list-style: none;
        }
        ul li{
            float: left;
            width: 120px;
            height: 40px;
            margin-left: 40px;
            background-color: orange;
        }
        ul li.no1{
            margin-left:20px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="no1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
IE6的3px bug

这里写图片描述

解决办法：
不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。

IE6，只作了解，供面试准备。

Fireworks和精确盒子还原

fireworks是Adobe公司的一个设计软件。

Fireworks的默认文件格式是png。

新建ctrl+N。

分辨率是72像素/英寸

标尺的快捷键，是ctrl+alt+r。

css中，任何文本都有行高。行高就是line-height
属性。顾名思义，就是行的高度。

首行空两个汉字的格，单位比较奇怪，叫做em，em就是汉字的一个宽度。text-indent:2em;

indent就是“缩进”的意思。

CSS 3D效果
weixin_68485297的博客
04-11 7727
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
CSS3详解
CHAINQWE的博客
11-11 3111
CSS3详解1 CSS3表格2 CSS的定义2.1 CSS快速入门1.2 CSS的三种导入方式2 选择器2.1 基本选择器2.1.1 标签选择器2.1.2 类选择器 class2.1.3 id选择器2.2 层次选择器2.2.1 后代选择器2.2.2 子选择器2.2.3 子选择器2.2.4 通用兄弟选择器2.3 1 CSS3表格 编译归类style风格cssindex索引csslink连接cssimport进口cssimage形象css.class调用class选择器选择器#id调用id选择器选择器body
div中的p元素看起来不在div中的原因
Japathy
10-05 3405
童鞋们，有没有在写html时发现明明p元素就在div中，可显示的时候却在div外面？如下图1： 图1html代码部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type=...
CSS3 -- @keyframes动画
qq_51248309的博客
05-04 7060
一篇文章教会你css3中的动画
css3大绝技之animation动画
热门推荐
wj624的博客
04-27 1万+
✨✨✨css3大绝技之animation动画 动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 制作动画分为两步: 1．先定义动画 2．再使用(调用)动画 ✨✨🎈 动画的基本使用 ✨🎈🎈 用keyframes定义动画（类似定义类选择器） 语法格式： @keyformes 动画名称 { 0% { width:100px; } 100% { width:200px;
css3 实现网格背景
Devio_001的博客
04-23 4397
最初方案是，使用图片平铺实现，纯css3怎么实现，如下： HTML: <div class="div"></div> css: .div { width: 600px; height: 300px; background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.15) 10%, rgba(0, 0...
css3实现动画无限循环
最新发布
wuzhangting的博客
08-22 9026
你可以根据需要调整关键帧的百分比和对应的样式，以创建不同效果的动画。要在CSS3中实现动画的无限循环，你可以使用。属性将该动画应用到一个元素上。即动画的时长为2秒，并且使用。关键字来表示动画应该无限循环。在上面的示例中，我们首先使用。
css3中var函数
longtengg1的博客
04-08 7339
1、css3中的var()函数 var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。 var函数有两个参数 var(custom-property-name, value) custom-property-name 必需。自定义属性的名称（即变量），必需以 – 开头。 value 可选。备用值，在属性不存在的时候使用。 例： :root { --theme-bg: rgb(28, 172, 198); } .box{ color: var(--theme-b
CSS3过渡动画
DGL_CSDN的博客
08-31 4484
1 过渡 1.1 基本形式 transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。 之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。 过渡：从开始状态到结束状态的中间过程可以查看 格式： transition:过渡的属性 完成时间(s) 运动曲线 延迟时间 transition:all 3s(1s=1000ms) linear 0s;
css3 animation实现元素沿着圆环路径移动动画
qq_45560350的博客
07-16 2938
https://www.cnblogs.com/a-cat/p/9019184.html
css3实现椭圆轨迹旋转的示例代码
01-19
最开始用css3D旋转写，只能实现如下效果 没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊 没法用3d实现只能转向2d了，只要实现按椭圆旋转就ok了 X轴Y轴在一个矩形内...
css3实现多个元素依次显示效果
01-19
在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。具体的动画，在keyframes中定义，在animation中使用。例如可以定义一个从上飞入的动画效果。 @keyframes topIn { from { ...
CSS3参考手册(css3语法使用查询手册)CHM版.rar
07-04
CSS3参考手册(css3语法使用查询手册)CHM版，可快速索引和搜索CSS3各种属性值以及具体的用法，说详细介绍有CSS3选择器的各方面知识，这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
纯CSS3模拟维基百科档案纸张卷角效果
05-12
摘要:脚本资源,CSS特效,Css3,卷边　纯CSS3 模拟维基百科档案纸质卷边、卷角效果，pure CSS3 article style，把鼠标移到纸张的右上角，会看到纸张的边角卷了起来，看上去很不错的卷边效果，基于CSS3技术，下载源码...
css3 svg爱心点赞动画特效特效代码
03-20
css3 svg爱心点赞动画特效是一款css3基于svg绘制爱心放大缩小点赞动画，点击爱心雨点散开渲染动画特效。
开通www 国际域名个人网站操作介绍
John_boom的博客
09-09 8386
域名的购买域名提供商，简称ISP。国内比较有名的ISP 有：新网、万网、美橙互联。 新网：http://www.xinnet.com/ 万网：http://www.net.cn/ 美橙互联：http://www.cndns.com/ 在这些网站上进行域名的购买，都是大同小异的，以新网为例做介绍详细步骤：①登陆新网的首页，点击右上角的“免费注册”链接。②然后我们选择“个人”选项，进行会
CSS实战（制作京东简易首页）
John_boom的博客
09-17 4169
项目文件夹 （站点）我们的网页都应该放到一个文件夹内。 站点-本地站点规划好页面项目文件夹 1 .首页 index.html 2 .样式 css文件夹 css文件 相同样式 （全局样式 公共样式） Base.css（基本样式） global.css (全局样式) 3.图片 images 文件 4.特效 js文件夹
HTML+CSS+JS知识点汇总
John_boom的博客
10-14 3201
HTML(1)- -毕向东老师对Html的简介 CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 html&css等等练习表（W3Cscholl） 练习表- -JS开发小游戏项目:老虎机游戏 js练习表回顾 HTML(2)- -传智前端课程系列笔记 HTML(3)- -传智前端课程系列笔记 HTML(4)- -传智前端课程系列笔记 CSS(1)- -传智前端课程系列笔记
CSS网站练习
John_boom的博客
09-08 2355
跟着做之前的博雅互动的网站阶段一<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head
快速掌握CSS3 Grid布局
"10分钟理解CSS3 Grid布局" 在前端开发中，CSS3 Grid布局是一个极其重要的工具，它提供了一种强大的二维布局机制，能够帮助开发者更高效地创建响应式和自适应的网页设计。本篇文章将简明扼要地介绍CSS3 Grid布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值