关于css:CSS基础总结02

54次阅读

共计 35872 个字符，预计需要花费 90 分钟才能阅读完成。

浮动

传网页布局的实质：用 CSS 来摆放盒子，把盒子摆放到相应地位。

CSS 提供了三种传统布局形式（简略说就是盒子如何进行排列）。

  • 一般流（规范流）
  • 浮动
  • 定位

规范流（一般流 / 文档流）

所谓的规范流：就是标签依照规定好的默认形式排列。

  1. 块级元素会独占一行，从上向下顺序排列。
  2. 行内元素会依照程序，从左到右顺序排列，碰到父元素边缘则主动换行。

以上都是规范流布局，咱们后面学习的就是规范流，规范流是最根本的布局形式。

这三种布局形式都是用来摆放盒子的，盒子摆放到适合地位，布局天然就实现了。

留神：理论开发中，一个页面根本都蕴含了这三种布局形式（前面挪动端学习新的布局形式）。

为什么须要浮动？

有很多的布局成果，规范流没有方法实现，此时就能够利用浮动实现布局。因为浮动能够扭转元素标签默认的排列形式。

浮动最典型的利用：能够让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找规范流，多个块级元素横向排列找浮动！

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 多个块级元素横向排列找浮动 </title>
    <style>
        div {
            float: left;
            width: 150px;
            height: 200px;
            background-color: #d87093;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

拓展：浮动的盒子不会产生外边距合并！

什么是浮动？

float 属性用于创立浮动框，将其挪动到一边，直到左边缘或右边缘涉及蕴含块或另一个浮动框的边缘。

语法：

选择器 {float: 属性值;}
属性 形容
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

浮动个性

加了浮动之后的元素，会具备很多个性，须要咱们把握。

  1. 浮动元素会脱离规范流（脱标）
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具备行内块元素的个性

浮动元素会脱离规范流（脱标）

  • 脱离规范一般流的管制（浮）挪动到指定地位（动），（俗称脱标）
  • 浮动的盒子不再保留原先的地位
<!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> 浮动个性 1 </title>
    <style>
        /* 设置了浮动（float）的元素会：1. 脱离规范一般流的管制（浮）挪动到指定地位（动）。2. 浮动的盒子不再保留原先的地位 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="box1"> 浮动的盒子 </div>
    <div class="box2"> 规范流的盒子 </div>
</body>

</html>

浮动的元素会一行内显示并且元素顶部对齐

  • 如果多个盒子都设置了浮动，则它们会依照属性值一行内显示并且顶端对齐排列。
  • 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
<!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> 浮动元素个性 - 浮动元素一行显示 </title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: skyblue;
            height: 249px;
        }

        .four {background-color: skyblue;}
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

</html>

浮动的元素会具备行内块元素的个性

任何元素都能够浮动。不论原先是什么模式的元素，增加浮动之后具备行内块元素类似的个性。

  • 块级盒子：没有设置宽度时默认宽度和父级一样宽，然而增加浮动后，它的大小依据内容来决定
  • 行内盒子：宽度默认和内容一样宽，间接设置高宽有效，然而增加浮动后，它的大小能够间接设置
  • 浮动的盒子两头是没有缝隙的，是紧挨着一起的
  • 即：默认宽度由内容决定，同时反对指定高宽，盒子之间无空隙
<!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> 浮动的元素具备行内块元素特点 </title>
    <style>
        /* 任何元素都能够浮动。不论原先是什么模式的元素，增加浮动之后具备行内块元素类似的个性。*/
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        /* 如果行内元素有了浮动，则不须要转换块级 \ 行内块元素就能够间接给高度和宽度 */
        p {
            float: right;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <span>span1</span>
    <span>span2</span>

    <div>div</div>
    <p>pppppppppppppp</p>
</body>

</html>

留神：之所以顶部没有对齐，起因是 p 标签自带的外边距 > span div 自带的外边距。

搭配规范流父级

为了束缚浮动元素地位，咱们网页布局个别采取的策略是：

先用规范流的父元素排列高低地位，之后外部子元素采取浮动排列左右地位。合乎网页布局第一准侧。

<!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> 浮动元素搭配规范流父盒子 1 </title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: black;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: pink;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"> 左侧 </div>
        <div class="right"> 右侧 </div>
    </div>
</body>

</html>

<!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> 浮动元素搭配规范流父盒子 2 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 勾销 li 前的圆点 */
        li {list-style: none;}

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            /* 让大盒子程度居中 */
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: gray;
            float: left;
            /* 每个小盒子用左边距隔开 */
            margin-right: 14px;
        }

        /* 勾销最初一个小盒子的右外边距 */
        /* 这里必须写 .box .last 要留神权重的问题  20 */
        .box .last {margin-right: 0;}
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

</html>

<!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> 浮动布局练习 3 </title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: gray;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">IT 小马 </div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

常见网页布局

案例：

<!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> 常见网页布局 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {list-style: none;}

        .top {
            height: 50px;
            background-color: #DDDDDD;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: #DDDDDD;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 610px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: #DDDDDD;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .box .last {margin-right: 0;}

        /* 只有是通栏的盒子（和浏览器一样宽）不须要指定宽度 */
        .footer {
            height: 200px;
            background-color: #DDDDDD;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li class="last">8</li>
    </ul>
</div>
<div class="footer">footer</div>
</body>

</html>

浮动布局留神点

（1）浮动和规范流的父盒子搭配

先用规范流的父元素排列高低地位，之后外部子元素采取浮动排列左右地位。

（2）一个元素浮动了，实践上其余的兄弟元素也要浮动

一个盒子外面有多个子盒子，如果其中一个盒子浮动了，那么其余兄弟也应该浮动，以避免引起问题。

浮动的盒子只会影响浮动盒子前面的规范流，不会影响后面的规范流。

<!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> 浮动留神点 </title>
    <style>
        /* 如果一个子元素浮动了，尽量其余盒子也浮动，这样保障这些子元素一行显示 */
        .box {
            width: 900px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: palegreen;
        }

        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao"> 大毛 </div>        <!-- float: left; -->
        <div class="ermao"> 二毛 </div>        <!-- float: left; -->
        <div class="sanmao"> 三毛 </div>    <!-- float: left; -->
    </div>
</body>

</html>

<!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> 浮动留神点 </title>
    <style>
        /* 浮动的盒子只会影响浮动盒子前面的规范流，不会影响后面的规范流。*/
        /* 大毛为规范流，所以大毛会占据其所在的一行，前面的二毛就算浮动也不会跑到大毛上方！*/
        .box {
            width: 900px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        }

        .damao {
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: palegreen;
        }

        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao"> 大毛 </div>        <!-- 规范流 -->
        <div class="ermao"> 二毛 </div>        <!-- float: left; -->
        <div class="sanmao"> 三毛 </div>    <!-- float: left; -->
    </div>
</body>

</html>

<!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> 浮动留神点 </title>
    <style>
        /* 浮动的盒子只会影响浮动盒子前面的规范流，不会影响后面的规范流。*/
        .box {
            width: 900px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }

        .ermao {
            /* float: left; */
            width: 200px;
            height: 220px;
            background-color: palegreen;
        }

        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao"> 大毛 </div>        <!-- float: left; -->
        <div class="ermao"> 二毛 </div>        <!-- 规范流 -->
        <div class="sanmao"> 三毛 </div>    <!-- float: left; -->
    </div>
</body>

</html>

因为大毛是浮动的，所以原来大毛的地位会空进去，此时二毛就会向上补齐空位，因为二毛高度小于大毛，所以二毛被大毛挡住了，又因为二毛是规范流，所以二毛会占据所在的一行，所以前面浮动的三毛就只能在二毛的底部之下，又因为大毛也是浮动的，所以三毛就会紧贴在大毛右侧。

革除浮动

不是所有的父盒子都必须有高度。

现实中的状态，让子盒子撑开父亲。有多少子盒子，父盒子就有多高。

因为父级盒子很多状况下不不便给高度，然而子盒子浮动又不占有地位，最初父级盒子高度为 0 时，就会影响上面的规范流盒子。

  • 因为浮动元素不再占用原文档流的地位，所以它会对前面的元素排版产生影响
  • 此时一但父盒子上面有其余盒子，那么布局就会产生重大凌乱！

革除浮动实质

  • 革除浮动的实质是革除浮动元素造成的影响
  • 如果父盒子自身有高度，则不须要革除浮动
  • 革除浮动之后，父级就会依据浮动的子盒子自动检测高度。父级有了高度，就不会影响上面的规范流了

革除浮动

语法：

选择器 {clear: 属性值;}
属性值 形容
left 不容许左侧有浮动元素（革除左侧浮动的影响）
right 不容许右侧有浮动元素（革除右侧浮动的影响）
both 同时革除左右两侧浮动的影响

咱们理论工作中，简直只用 clear: both;

革除浮动的策略是：闭合浮动。

革除浮动办法

  1. 额定标签法也称为隔墙法，是 W3C 举荐的做法。(理论开发不举荐)
  2. 父级增加 overflow 属性
  3. 父级增加 after 伪元素
  4. 父级增加 双伪元素

额定标签法

额定标签法也称为隔墙法，是 W3C 举荐的做法。

额定标签法会在浮动元素开端增加一个空的标签。例如 <div style="clear: both"></div>，或者其余标签（如 <br> 等）。

  • 长处：通俗易懂，书写不便
  • 毛病：增加许多无意义的标签，结构化较差

留神：要求这个新的空标签必须是 块级元素。

总结：

  • 革除浮动实质是？

革除浮动的实质是革除浮动元素脱离规范流造成的影响。

  • 革除浮动策略是？

闭合浮动。只让浮动在父盒子外部影响，不影响父盒子里面的其余盒子。

  • 额定标签法？

隔墙法，就是在最初一个浮动的子元素前面增加一个额定空标签（块级标签），增加革除浮动款式。

理论工作可能会遇到，然而不罕用。

<!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> 革除浮动之额定标签法 </title>
    <style>
        .box {
            width: 800px;
            border: 3px solid black;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: salmon;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .footer {
            height: 200px;
            background-color: gray;
        }

        .clear {clear: both;}
    </style>
</head>

<body>
    <div class="box">
        <div class="damao"> 大毛 </div>
        <div class="ermao"> 二毛 </div>
        <div class="ermao"> 二毛 </div>
        <div class="ermao"> 二毛 </div>
        <div class="ermao"> 二毛 </div>
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <span class="clear"></span> -->
    </div>
    <div class="footer"></div>

</body>

</html>

父级增加 overflow

能够给父级增加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。

子不教，父之过，留神是给父元素增加代码。

  • 长处：代码简洁
  • 毛病：无奈显示溢出的局部
<!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>overflow 革除浮动 </title>
    <style>
        .box {
            /* 革除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao"> 大毛 </div>
        <div class="ermao"> 二毛 </div>
    </div>
    <div class="footer"></div>

</body>

</html>

:after 伪元素法

:after 形式是额定标签法的升级版，也是给父元素增加代码。

原理：主动在父盒子里的开端增加一个 行内盒子，咱们将它转换为块级盒子，就间接实现了额定标签法。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { 
    /* IE6、7 专有 */
    *zoom: 1;
}

留神：类名不肯定非要是 clearfix，然而还是举荐这么写以进步可读性。

  • 长处：没有减少标签，构造更简略
  • 毛病：须要独自关照低版本浏览器
  • 代表网站：百度、淘宝网、网易等
<!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> 伪元素革除浮动 </title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao"> 大毛 </div>
        <div class="ermao"> 二毛 </div>
    </div>
    <div class="footer"></div>

</body>

</html>

双伪元素革除浮动

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {clear: both;}

.clearfix {
    /* IE6、7 专有 */
    *zoom:1;
}

留神：类名不肯定非要是 clearfix，然而还是举荐这么写以进步可读性。

  • 长处：代码更简洁
  • 毛病：须要独自关照低版本浏览器
  • 代表网站：小米、腾讯等
<!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> 双伪元素革除浮动 </title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {clear: both;}

        .clearfix {*zoom: 1;}

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao"> 大毛 </div>
        <div class="ermao"> 二毛 </div>
    </div>
    <div class="footer"></div>

</body>

</html>

革除浮动总结

为什么须要革除浮动？

  • 父级没高度
  • 子盒子浮动了
  • 影响上面布局了，咱们就应该革除浮动了
革除浮动的形式 长处 毛病
额定标签法（隔墙法） 通俗易懂，书写不便 增加许多无意义的标签，结构化较差
父级 overflow: hidden; 书写简略 溢出暗藏
父级 after 伪元素 构造语义化正确 因为 IE6~7 不反对 :after，兼容性问题
父级双伪元素 构造语义化正确 因为 IE6~7 不反对 :after，兼容性问题

定位

浮动能够让多个块级盒子一行没有缝隙排列显示，常常用于横向排列盒子。

定位则是能够让盒子自在的在某个盒子内挪动地位或者固定屏幕中某个地位，并且能够压住其余盒子。

定位组成

定位：将盒子定在某一个地位，所以定位也是在摆放盒子，依照定位的形式挪动盒子。

定位 = 定位模式 + 边偏移

  • 定位模式用于指定一个元素在文档中的定位形式
  • 边偏移则决定了该元素的最终地位

定位模式

定位模式决定元素的定位形式，它通过 CSS 的 position 属性来设置，其值能够分为四个。

值 语义
static 动态定位
relative 绝对定位
absolute 相对定位
fixed 固定定位

边偏移

边偏移就是定位的盒子挪动的最终地位。有 top、bottom、left 和 right 4 个属性。

留神：能够为负值。

边偏移属性 实例 形容
top top: 80px 顶端偏移量，定义元素绝对于其父元素上边线的间隔
bottom bottom: 80px 底部偏移量，定义元素绝对于其父元素下边线的间隔
left left: 80px 左侧偏移量，定义元素绝对于其父元素右边线的间隔
rigth right: 80px 右侧偏移量，定义元素绝对于其父元素左边线的间隔

动态定位 static（理解）

动态定位是元素的默认定位形式，无定位的意思。

语法：

选择器 {position: static;}
  1. 动态定位依照规范流个性摆放地位，它没有边偏移
  2. 动态定位在布局时很少用到

绝对定位 relative

绝对定位是元素在挪动地位的时候 绝对于它原来的地位 来说的定位（自恋型）。

语法：

选择器 {position: relative;}

绝对定位的特点：（务必记住）

  1. 它是绝对于本人原来的地位来挪动的（挪动地位的时候参照点是本人原来的地位点）
  2. 原来在 规范流的地位持续占有，前面的盒子依然以规范流的形式看待它

因而，绝对定位并没有脱标。它最典型的利用是给相对定位当爹的。

<!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> 绝对定位 </title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>

</body>

</html>

相对定位 absolute

相对定位是元素在挪动地位的时候 绝对于它先人元素 来说的定位（拼爹型）。

语法：

选择器 {position: absolute;}

相对定位的特点：（务必记住）

  1. 如果没有先人元素或者先人元素没有定位，则以浏览器为准定位（Document 文档）
  2. 如果先人元素有定位（绝对、相对、固定定位），则以 最近一级的有定位先人元素为参考点 挪动地位
  3. 相对定位 不再占有原先的地位 （脱标），并且 脱标的水平大于浮动（会压住浮动）

所以相对定位是 脱离规范流 的。

<!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> 相对定位 - 无父亲或者父亲无定位 </title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            /* top: 10px;
            left: 10px; */
            /* top: 100px;
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>
<!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> 相对定位 - 父级有定位 - 一级父亲 </title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        
        .son {
            position: absolute;
            /* top: 10px;
            left: 10px; */
            /* top: 100px;
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>
<!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> 相对定位 - 父级有定位 - 多级父亲 </title>
    <style>
        /* 以最近一级的有定位先人元素为参考点挪动地位 */
        /* 即：谁带有定位并且离我最近，我就以谁为准！*/
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>
子绝父相

子级是相对定位的话，父级要用绝对定位。绝对定位常常用来作为相对定位的父级。

  1. 子级相对定位，不会占有地位，能够放到父盒子外面的任何一个中央，不会影响其余的兄弟盒子
  2. 父盒子须要加定位限度子盒子在父盒子内显示
  3. 父盒子布局时，须要占有地位，因而父亲只能是绝对定位

重点：竖向上布局找规范流，横向上布局找浮动，空间上布局找定位！

固定定位 fixed

固定定位是元素固定于浏览器可视区的地位。

次要应用场景：能够在浏览器页面滚动时元素的地位不会扭转。

语法：

选择器 {position: fixed;}

固定定位的特点（务必记住）：

  1. 以浏览器的可视窗口为参照点挪动元素
  • 跟父元素没有任何关系
  • 不随滚动条滚动
  1. 固定定位不再占有原先的地位
  • 固定定位也是 脱标 的，其实固定定位也能够看做是一种 非凡的相对定位。
<style>
    .dj {
        position: fixed;
        top: 100px;
        left: 200px;
    }
</style>
固定定位小技巧：固定在版心右侧地位

小算法：

  1. 让固定定位的盒子 left: 50%，走到浏览器可视区（也能够看做版心）一半的地位
  2. 让固定定位的盒子 margin-left: 版心宽度的一半间隔，多走版心宽度的一半地位

就能够让固定定位的盒子贴着版心右侧对齐了。

<!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> 固定定位小技巧 - 固定到版心右侧 </title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用 margin 走版心盒子宽度的一半间隔（为了好看多加了 5px）*/
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w"> 版心盒子 800 像素 </div>

</body>

</html>

粘性定位 sticky

粘性定位能够被认为是绝对定位和固定定位的混合。

语法：

选择器 {position: sticky; top: 10px;}

粘性定位的特点：

  1. 以浏览器的 可视窗口为参照点 挪动元素（固定定位特点）
  2. 粘性定位 占有原先的地位（绝对定位特点）
  3. 必须增加 top、left、right、bottom 其中一个才无效

跟页面滚动搭配应用。兼容性较差，IE 不反对。

将来开发的趋势，但目前并不罕用（目前用 javascript 来实现粘性定位成果）。

<!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> 粘性定位 </title>
    <style>
        body {height: 3000px;}

        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav"> 我是导航栏 </div>
</body>

</html>

定位的总结

定位模式 是否脱标 挪动地位 是否罕用
static 动态定位 否 不能应用边偏移 很少
relative 绝对定位 否（占有地位） 绝对于本身地位挪动 罕用
absolute 相对定位 是（不占有地位） 带有定位的父级 罕用
fixed 固定定位 是（不占有地位） 浏览器可视区 罕用
sticky 粘性定位 否（占有地位） 浏览器可视区 以后阶段少

绝对定位、固定定位、相对定位 两个大的特点：

  1. 是否占有地位（脱标否）
  2. 以谁为基准点挪动地位。

定位叠放秩序 z-index

在应用定位布局时，可能会呈现盒子重叠的状况。此时，能够应用 z-index 来管制盒子的前后秩序（z 轴）。

语法：

选择器 {z-index: 1;}
  • 数值能够是正整数、负整数或 0，默认是 auto，数值越大，盒子越靠上
  • 如果属性值雷同，则依照书写程序，青出于蓝
  • 数字前面不能加单位
  • 只有定位的盒子才有 z-index 属性

定位的拓展

相对定位的盒子居中

加了相对定位的盒子不能通过 margin: 0 auto 程度居中，然而能够通过以下计算方法实现程度和垂直居中。

  1. left: 50%;：让盒子的左侧挪动到父级元素的程度核心地位。
  2. margin-left: -0.5widthpx;：让盒子向左挪动本身宽度的一半。
<!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> 相对定位程度垂直居中 </title>
    <style>
        .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 本人盒子宽度的一半 */
            margin-left: -100px;
            /* 垂直居中同理 */
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

定位非凡个性

相对定位和固定定位也和浮动相似。

  1. 行内元素增加相对或者固定定位，能够间接设置高度和宽度。
  2. 块级元素增加相对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
<!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> 定位的非凡个性 </title>
    <style>
        span {
            position: absolute;
            top: 100px;
            width: 200px;
            height: 150px;
            background-color: pink;
        }

        div {
            position: absolute;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <span>123</span>

    <div>abcd</div>
</body>

</html>

脱标的盒子不会触发外边距塌陷

浮动元素、相对定位（固定定位）元素的都不会触发外边距合并的问题。

相对定位（固定定位）会齐全压住盒子

浮动元素不同，只会压住它上面规范流的盒子，然而不会压住上面规范流盒子外面的文字（图片）。

然而相对定位（固定定位）会压住上面规范流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目标最后是为了做文字盘绕成果的。文字会围绕浮动元素。

<!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> 浮动产生原来的目标是做文字盘绕成果 </title>
    <style>
        img {float: left;}
    </style>
</head>

<body>
    1993 年，在古装片《战神传说》中表演一个文治超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高超的千门高手钱文迪；此外，他还主演了爱情片《山高水长》，在片中塑造了一个风流不羁的江湖浪子形象。1994 年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995 年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片取得第 15 届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。1996 年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程薄情一片的丁力。1997 年，负责剧情片《香港制作》的制作人；同年，主演爱情片《天若有情之战火才子》，在片中饰演家世煊赫的空军少尉刘天伟；12 月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明老练、嫉恶如仇的调查局机动组组长方国辉。1998 年，主演动作片《龙在江湖》<img src="images/img.jpg" alt="">，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠 1999》；此外，他还负责剧情片《去年烟花特地多》的制作人。1993 年，在古装片《战神传说》中表演一个文治超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高超的千门高手钱文迪；此外，他还主演了爱情片《山高水长》，在片中塑造了一个风流不羁的江湖浪子形象。1994 年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995 年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片取得第 15 届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。1996 年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程薄情一片的丁力。1997 年，负责剧情片《香港制作》的制作人；同年，主演爱情片《天若有情之战火才子》，在片中饰演家世煊赫的空军少尉刘天伟；12 月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明老练、嫉恶如仇的调查局机动组组长方国辉。1998 年，主演动作片《龙在江湖》，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠 1999》；此外，他还负责剧情片《去年烟花特地多》的制作人。</body>

</html>

<!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> 定位会齐全压住规范流盒子内容 </title>
    <style>
        .box {
            /* 1. 浮动的元素不会压住上面规范流的文字 */
            /* float: left; */
            /* 2. 相对定位（固定定位）会压住上面规范流所有的内容。*/
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p> 阁下何不同风起，扶摇直上九万里 </p>
</body>

</html>

元素的显示与暗藏

display 属性

display 属性用于设置一个元素应如何显示。

  • display: none：暗藏对象
  • display：block：除了转换为块级元素之外，同时还有显示元素的意思

display 暗藏元素后，不再占有原来的地位（脱标）。

前面利用及其宽泛，搭配 JS 能够做很多的网页特效。

<!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> 显示暗藏元素之 display</title>
    <style>
        .peppa {
            display: none;
            /* display: block; */
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="peppa"> 佩奇 </div>        <!-- 佩奇被暗藏 -->
    <div class="george"> 乔治 </div>
</body>

</html>

visibility 可见性

visibility 属性用于指定一个元素应可见还是暗藏。

  • visibility：visible：元素可视
  • visibility：hidden：元素暗藏

visibility 暗藏元素后，持续占有原来的地位。

如果暗藏元素想要原来地位，就用 visibility：hidden。

如果暗藏元素不想要原来地位，就用 display：none（用途更多，重点）。

<!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> 显示暗藏元素之 display</title>
    <style>
        .baba {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .mama {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="baba"> 猪爸爸 </div>
    <div class="mama"> 猪妈妈 </div>
</body>

</html>

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会产生什么。

属性值 形容
visible 不剪切内容也不增加滚动条（默认形式）
hidden 不显示超过对象尺寸的内容，超出的局部暗藏掉（并非删除）
scroll 不论超出的内容否，总是显示滚动条
auto 超出主动显示滚动条，不超出不显示滚动条

个别状况下，咱们都不想让溢出的内容显示进去，因为溢出的局部会影响布局。

然而如果有定位的盒子，请慎用 overflow: hidden 因为它会暗藏多余的局部（例如：学成在线 hot new 模块，右上角有成心超出的局部，此时就不能应用 overflow: hidden）。

<!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> 显示暗藏元素之 overflow</title>
    <style>
        .peppa {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的局部显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peppa">
        小猪佩奇》，又译作《粉红猪小妹》（台湾译为粉红猪），原名为《Peppa
        Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、戴维斯（Davis）创作、导演和制作的一部英国学前电视动画片，也是历年来最具后劲的学前儿童品牌。故事围绕小猪佩奇与家人的欢快经验，风趣而乏味，藉此鼓吹传统家庭观点与情谊，激励小朋友们体验生活。</div>

</body>

</html>

案例：土豆网鼠标通过显示遮罩

<!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> 仿土豆网显示暗藏遮罩案例 </title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 暗藏遮罩层 */
            display: none;
            /* 增加定位使其可能浮与其余盒子上方 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当咱们鼠标通过了 土豆这个盒子，就让外面遮罩层显示进去 */
        .tudou:hover .mask {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

精灵图

为了无效地缩小服务器接管和发送申请的次数，进步页面的加载速度，呈现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

外围原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只须要一次申请就能够了。

精灵技术目标：为了无效地缩小服务器接管和发送申请的次数，进步页面的加载速度。

精灵图（sprites）的应用

应用精灵图外围：

  1. 精灵技术次要针对于背景图片应用。就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
  3. 挪动背景图片地位以管制显示区域，此时能够应用 background-position
  4. 挪动的间隔就是这个指标图片的 x 和 y 坐标。留神网页中的坐标有所不同
  5. 因为个别状况下都是将精灵图往上往左挪动，所以两个坐标数值根本是负值
  6. 应用精灵图的时候须要精确测量，每个小背景图片的大小和地位

应用精灵图外围总结：

  1. 精灵图次要针对于小的背景图片应用
  2. 次要借助于背景地位来实现 background-position
  3. 个别状况下精灵图都是负值（千万留神网页中的坐标：x 轴左边走是正值，右边走是负值，y 轴同理）

【王者光荣案例】

<!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> 精灵图应用 </title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background: url(images/sprites.png) no-repeat -182px 0;

        }

        .box2 {
            width: 27px;
            height: 25px;
            /* background-color: pink; */
            background: url(images/sprites.png) no-repeat -155px -106px;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

【拼单词案例】

<!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> 利用精灵图拼出本人名字 </title>
    <style>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }

        .p {
            width: 100px;
            height: 112px;
            /* background-color: pink; */
            background-position: -493px -276px;
        }

        .i {
            width: 60px;
            height: 108px;
            /* background-color: pink; */
            background-position: -327px -142px;
        }

        .n {
            width: 115px;
            height: 112px;
            /* background-color: pink; */
            background-position: -255px -275px;
        }

        .k {
            width: 105px;
            height: 114px;
            /* background-color: pink; */
            background-position: -495px -142px;
        }
    </style>
</head>

<body>
    <span class="p">p</span>
    <span class="i">i</span>
    <span class="n">n</span>
    <span class="k">k</span>
</body>

</html>

PS 切片工具的应用

字体图标

字体图标的产生

字体图标应用场景：次要用于显示网页中通用、罕用的一些小图标。

精灵图是有诸多长处的，然而毛病很显著。

  1. 图片文件还是比拟大的
  2. 图片自身放大和放大会失真
  3. 一旦图片制作结束想要更换非常复杂

此时，有一种技术的呈现很好的解决了以上问题，就是字体图标 iconfont。

字体图标能够为前端工程师提供一种不便高效的图标应用形式，展现的是图标，但实质却属于字体。

字体图标的长处

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染进去，缩小了服务器申请
  • 灵活性：实质其实是文字，能够很随便的扭转色彩、产生暗影、通明成果、旋转等
  • 兼容性：简直反对所有的浏览器，请放心使用

留神：字体图标不能代替精灵技术，只是对工作中图标局部技术的晋升和优化。

总结：

  1. 如果遇到一些构造和款式比较简单的小图标，就用字体图标
  2. 如果遇到一些构造和款式简单一点的小图片，就用精灵图

字体图标是一些网页常见的小图标，咱们间接网上下载即可。因而应用能够分为：

  1. 字体图标的下载
  2. 字体图标的引入（引入到咱们 html 页面中）
  3. 字体图标的追加（在原有的根底上增加新的小图标）

字体图标的下载

举荐下载网站：

  • icomoon 字库 https://icomoon.io/

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它容许用户抉择所须要的图标，使它们成一字型。该字库内容品种繁多，十分全面，惟一的遗憾是国外服务器，关上网速较慢。

  • 阿里 iconfont 字库 https://www.iconfont.cn/

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，蕴含了淘宝图标库和阿里妈妈图标库。能够应用 AI 制作图标上传生成。重点是，收费！

以下内容以 icomoon 字库 为例。

字体图标的引入

下载结束之后，留神原先的文件不要删，前面会用！

  1. 把下载包外面的 fonts 文件夹放入页面根目录下

不同浏览器所反对的字体格局是不一样的，字体图标之所以兼容，就是因为蕴含了支流浏览器反对的字体文件。

  • TureType (.ttf) 格局 .ttf 字体是 Windows 和 Mac 的最常见的字体，反对这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
  • Web Open Font Format (.woff) 格局 woff 字体，反对这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
  • Embedded Open Type (.eot) 格局 .eot 字体是 IE 专用字体，反对这种字体的浏览器有 IE4+；
  • SVG (.svg) 格局 .svg 字体是基于 SVG 字体渲染的一种格局，反对这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
  1. 在 CSS 款式中全局申明字体：简略了解把这些字体文件通过 css 引入到咱们页面中

肯定留神字体文件门路的问题。

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
  1. html 标签内增加小图标

复制小图标对应的字符（一个小方框）到 html 中，个别倡议放在 <span></span> 标签里。

  1. 给标签定义字体
span {font-family: "icomoon";}

留神：务必保障这个字体和下面 @font-face 外面的字体保持一致（默认为：icomoon）。

字体图标的追加

如果工作中，原来的字体图标不够用了，咱们便须要增加新的字体图标到原来的字体文件中。

抉择 Import Icons 按钮，把原压缩包外面的 selection.json 从新上传，而后选中本人想要新的图标，从新下载压缩包，并替换原来的文件即可。

字体图标加载的原理

服务器只需承受一次浏览器申请便能够将 fonts 文件一次性返回，如此而来网页中所有用到 fonts 字体图标的局部便一次性加载好了，大大加重了服务器压力。

<!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> 字体图标的应用 </title>
  <style>
    /* 字体申明 */
    @font-face {
        font-family: 'icomoon';
          src: url('fonts/icomoon.eot?p4ssmb');
          src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('fonts/icomoon.woff?p4ssmb') format('woff'),
        url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
          font-display: block;
    }

    span {
      font-family: 'icomoon';
      font-size: 100px;
      color: salmon;
    }
  </style>
</head>

<body>
  <span></span>
  <span></span>
</body>

</html>

CSS 三角

对一个没有大小的盒子设置边框，那么只有边框足够粗，就能够出现三角成果。

如果只须要一个三角，那么对其余三个边框设置通明色即可。

通常 CSS 三角要配合定位来布局。

<!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>CSS 三角制作 </title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 30px solid hotpink;
            border-right: 30px solid black;
            border-bottom: 30px solid skyblue;
            border-left: 30px solid gray;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: black;
            margin: 50px;
        }

        .jd {
            /* 子绝父相 */
            position: relative;
            width: 120px;
            height: 249px;
            background-color: black;
        }

        .jd span {
            /* 子绝父相 */
            position: absolute;
            right: 15px;
            top: -20px;
            width: 0;
            height: 0;
            /* 上面两行为了关照兼容性 */
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: black;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>

</html>

<!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>CSS 三角强化的奇妙使用 </title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 右边和下边的边框宽度设置为 0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            /* 1. 只保留左边的边框有色彩 */
            border-color: transparent red transparent transparent;
            /* 2. 款式都是 solid */
            border-style: solid;
            /* 3. 上边框宽度要大，左边框 宽度稍小，其余的边框该为 0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="price">
            <span class="miaosha">
                ¥1650
                <i></i>
            </span>
    <span class="origin">¥5650</span>
</div>
</body>
</html>

用户界面款式

所谓的界面款式，就是更改一些用户操作款式，以进步更好的用户体验。

  • 更改用户的鼠标款式
  • 表单轮廓
  • 避免表单域拖拽

鼠标款式 cursor

li {cursor: pointer;}

设置或检索在对象上挪动的鼠标指针采纳何种零碎预约义的光标形态。

属性值 形容
default 默认箭头
pointer 小手
move 十字挪动
text 文本竖杠
not-allowed 禁止 
<!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> 用户界面款式 - 鼠标款式 </title>
</head>

<body>
    <ul>
        <li style="cursor: default;"> 我是默认的小白鼠标款式 </li>
        <li style="cursor: pointer;"> 我是鼠标小手款式 </li>
        <li style="cursor: move;"> 我是鼠标挪动款式 </li>
        <li style="cursor: text;"> 我是鼠标文本款式 </li>
        <li style="cursor: not-allowed;"> 我是鼠标禁止款式 </li>
    </ul>
</body>

</html>

轮廓线 outline

给表单增加 outline: 0; 或者 outline: none; 款式之后，就能够去掉默认的边框。

input {outline: none;}

避免拖拽文本域 resize

理论开发中，咱们文本域右下角是不容许拖拽的。（会毁坏布局！）

textarea {resize: none;}

元素的垂直对齐 vertical-align

CSS 的 vertical-align 属性应用场景：常常用于设置图片或者表单（行内块元素）与文字垂直对齐。

官网解释：用于设置一个元素的垂直对齐形式，然而它只针对于行内元素或者行内块元素无效。

语法：

vertical-align: baseline | top | middle | bottom
值 形容
baseline 默认。元素搁置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素搁置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时能够给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就能够让文字和图片垂直居中对齐了。

<!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> 利用 vertical-align 实现图片文字垂直居中对齐 </title>
    <style>
        img {
            /* vertical-align: bottom; */
            /* 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }

        textarea {vertical-align: middle;}
    </style>
</head>

<body>
    <img src="images/ldh.jpg" alt=""> pink 老师是刘德华

    <br>
    <textarea name=""id="" cols="30" rows="10"></textarea> 请您留言
</body>

</html>

重点：

咱们晓得，当对盒子设置 line-height: 盒子高度; 时，盒子内的 文字 会垂直居中，其实不只是文字能够垂直居中，盒子内的图片同样也能垂直居中，只不过图片默认是基于基线对齐的，所以要真正实现 垂直居中 须要在图片加上：vertical-align: middle;

图片底部默认空白缝隙问题

图片底侧会有一个空白缝隙，起因是行内块元素会和文字的基线对齐。

次要解决办法有两种：

  1. 给图片增加 vertical-align: middle | top | bottom 等（举荐）
  2. 把图片转换为块级元素 display: block;

溢出的文字省略号显示

单行文本溢出省略号显示

三个必要条件：

/* 1. 先强制一行内显示文本 */ 
white-space: nowrap;     /*（默认 normal 主动换行）*/ 
/* 2. 超出的局部暗藏 */ 
overflow: hidden; 
/* 3. 文字用省略号代替超出的局部 */ 
text-overflow: ellipsis;

案例:

<!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> 单行文本溢出显示省略号 </title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开主动换行 */
            /* white-space: normal; */
            /* 1. 这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2. 溢出的局部暗藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

</html>

多行文本溢出省略号显示

多行文本溢出显示省略号，有较大兼容性问题，适宜于 webkit 浏览器或挪动端（挪动端大部分是 webkit 内核）。

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限度在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列形式 */
-webkit-box-orient: vertical;
<!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> 单行文本溢出显示省略号 </title>
    <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限度在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列形式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字, 啥也不说，此处省略一万字此处省略一万字
    </div>
</body>

</html>

布局技巧

margin 负值

<!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>margin 负值的奇妙使用 </title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标通过增加绝对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2. 如果 li 都有定位，则利用 z-index 进步层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

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

</html>

文字围绕浮动元素

<!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> 文字围绕浮动元素的妙用 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: #d4d4d4;
            margin: 0 auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }

        .pic img {width: 100%;}
    </style>
</head>
<body>
<div class="box">
    <div class="pic">
        <img src="images/img.png" alt="">
    </div>
    <p>【集锦】热身赛 - 巴西 0 - 1 秘鲁 内马尔替补两人血染赛场 </p>
</div>
</body>
</html>

行内块的奇妙使用

页码在页面两头显示：

  1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center;
  2. 利用行内块元素两头有缝隙，并且给父级增加 text-align: center; 行内块元素会程度会居中
<!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> 行内块的奇妙使用 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {text-align: center;}

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {width: 85px;}

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;

        }
    </style>
</head>
<body>
<div class="box">
    <a href="#" class="prev">&lt;&lt; 上一页 </a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">&gt;&gt; 下一页 </a>
    到第
    <input type="text">
    页
    <button> 确定 </button>
</div>
</body>
</html>

CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了打消不同浏览器对 HTML 文本出现的差别，关照浏览器的兼容，咱们须要对 CSS 初始化。

简略了解：CSS 初始化是指重设浏览器的款式。(也称为 CSS reset）

每个网页都必须首先进行 CSS 初始化。

这里咱们以 京东 CSS 初始化代码为例。

Unicode 编码字体：

把中文字体的名称用相应的 Unicode 编码来代替，这样就能够无效的防止浏览器解释 CSS 代码时候呈现乱码的问题。

比方：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

/* 把咱们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和 i 斜体的文字不歪斜 */
em,
i {font-style: normal}

/* 去掉 li 的小圆点 */
li {list-style: none}

img {
    /* border 0 关照低版本浏览器，如果图片里面蕴含了链接会有边框的问题 */
    border: 0;
    /* 勾销图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当咱们鼠标通过 button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {color: #c81623}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思，这样浏览器兼容性比拟好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形，让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {display: none}

/* 革除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {*zoom: 1}

参考

黑马程序员 pink 老师前端入门教程

HTML CSS

正文完
css
发表至： css
2022-08-05
 0
关于css:CSS篇displaynone和visibilityhidden和opacity0的区别
关于css:深究移动端适配那些坑小数像素图片模糊
关于css:test
关于css:html-元素垂直水平居中