CSS其他

CSS精灵

精灵图（雪碧图、css sprites）:

是一种网页图片的应用处理方式，允许将一个页面中很多零星的小图片包含到一张大图中去，当访问页面的时候，就不会一张张的去请求显示图片

对于当前的网络来说，小于200k的文件加载速度是一样的

通过background-position属性将图片定位到需要的位置即可
优点：

减少图片大小

减少服务器请求次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            width: 101px;
            overflow: hidden;
            border: 1px solid #3c3c3c;
            margin: 100px auto 0;
        }
        .box{
            overflow: hidden;
            width: 102px;
            margin-top: -1px;
        }
        .box li{
            width: 50px;
            height: 80px;
            border-right: 1px solid #3c3c3c;
            border-top: 1px solid #3c3c3c;
            float: left;
        }
        .box li i{
            width: 45px;
            height: 40px;
            display: block;
            margin: 10px auto 0;
            background: url("../images/jd_2.png") 0 0 no-repeat;
        }
        .box li:nth-child(1) i{
            background-position: -1px -3px;
        }
        .box li:nth-child(2) i{
            background-position: -70px -5px;
        }
        .box li:nth-child(3) i{
            background-position: -2px -73px;
        }
        .box li:nth-child(4) i{
            background-position: -70px -73px;
        }

        .box li p{
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="outer">


    <ul class="box">
        <li>
            <i></i>
            <p>加油卡</p>
        </li>
        <li>
            <i></i>
            <p>白条</p>
        </li>
        <li>
            <i></i>
            <p>机票</p>
        </li>
        <li>
            <i></i>
            <p>电影票</p>
        </li>
    </ul>
</div>
</body>
</html>

a标签的4个伪类

四个伪类

link：当有链接属性时

visited:当连接被访问过以后

hover：当连接被鼠标悬浮的时候

active:当连接在激活状态的时候
位置不能互换

这4个选择器优先级是一样的。

顺序改变就可能后边覆盖前边的

比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active
记忆：爱恨法则 love-hate
hover适用于多数其他元素，并且伪元素也可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的4个伪类</title>
    <style>
        a{
            color: pink;
        }
        .a1:link{
            color: yellow;
        }
        .a2:visited{
            color: blueviolet;
        }
        .a3:hover{
            color:red;
        }
        .a4:active{
            color: #2ba5eb;
        }

    </style>
</head>
<body>

<a href="###" class="a1">link 当有链接属性时</a>
<a href="####" class="a2">visited 当连接被访问过之后</a>
<a href="####" class="a3">hover 当连接被鼠标悬浮的时候</a>
<a href="####" class="a4">active:当连接在激活状态的时候</a>


<a href="##" class="a1 a2 a3 a4">同时设置4个伪类</a>

</body>
</html>

a标签伪类的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover的下拉效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer{
            width: 300px;
            border: 1px solid #ffa000;
            position: relative;
        }
        .outer p{
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: #ccc;
        }
        .outer .con{
            position: absolute;
            width: 400px;
            left: 0;
            top:50px;
            background-color: #2ba5eb;

            display: none;
        }
        .con li{
            line-height: 30px;
        }

        .outer:hover>.con{
            display: block;
        }
        .outer:hover>p{
            background-color: red;
        }
        .outer .con li:hover{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>我是一个标题</p>
        <ul class="con">
            <li>新闻</li>
            <li>娱乐</li>
            <li>我的</li>
            <li>天气</li>
            <li>真好</li>
        </ul>
    </div>
</body>
</html>

![image-20200622233133205](/Users/lipeihua/Library/Application Support/typora-user-images/image-20200622233133205.png)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover的下拉效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer_fathor{
            /*overflow: hidden;*/
        }
        .outer{
            width: 300px;
            border: 1px solid #ffa000;
            position: relative;
            float: left;
        }
        .outer p{
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: #ccc;
        }
        .outer .con{
            position: absolute;
            width: 400px;
            left: 0;
            top:50px;
            background-color: #2ba5eb;

            display: none;
        }
        .con li{
            line-height: 30px;
        }

        .outer:hover>.con{
            display: block;
        }
        .outer:hover>p{
            background-color: red;
        }
        .outer .con li:hover{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul class="outer_fathor">
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
        <li class="outer">
            <p>我是一个标题</p>
            <ul class="con">
                <li>新闻</li>
                <li>娱乐</li>
                <li>我的</li>
                <li>天气</li>
                <li>真好</li>
            </ul>
        </li>
    </ul>

</body>
</html>

伪元素

常用伪元素

伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等

after:

在当前元素的最后边插入一个伪元素

before：

在当前元素的最前边插入一个伪元素

伪元素必须拥有content属性，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        .box{
            width: 200px;
            height: 50px;
            background-color: red;
            position: relative;
        }
        .box:after{
            content:"没有我你是不行的";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box:before{
            content:"hahahah";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 300px;
            top: 80px;
        }
    </style>
</head>
<body>

    <div class="box">我是一个box</div>
</body>
</html>

其他伪元素

first-letter伪元素：

把一个块级元素的第一个文字选中，可以单独进行控制
first-line伪元素

把一个块级元素的第一行选中，单独进行控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他伪元素</title>
    <style>
        p{
            width: 300px;
            line-height: 1.6;
            background-color: red;
        }
        p:first-letter{
            font-size: 30px;
            color: #fff;
        }
        p:first-line{
            font-size: 24px;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好</p>
</body>
</html>

样式重置

什么是样式重置（css reset）

将html的默认样式全部去掉，需要的时候我们自行添加。

统一页面风格
为什么是使用样式重置：

多数元素拥有自己的默认样式，并且我们很多都不需要

默认样式在不同浏览器中呈现的也不一定相同，就会导致浏览器展示页面不相同的现象

整个页面中固定的风格代码，可以在样式重置中直接书写，不用每一个都设置
为什么不使用

样式重置简单，不够完整一些demo可以使用，真正项目不推荐使用，请使用css reset

*通配符匹配所有的标签，影响很大效率很低
normalize.css是什么

normalize觉得，存在即合理。保留了应该存在的默认样式，并且把每一个默认样式在浏览器中中统一了

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 16px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }


/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

最小/最大宽度/高度

使用 min-height 来设置最小高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最小高度</title>
    <style>
        .outer{
            width: 200px;
            border: 1px solid #000;
        }
        header,footer{
            text-align: center;
            height:40px;
            line-height: 40px;
        }
        .con{
            border: 1px solid red;
            line-height: 1.7;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header>
            头部
        </header>
        <div class="con">
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
            文章1 <br>
        </div>
        <footer>
            底部
        </footer>
    </div>
</body>
</html>

min-width设置最小宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最小宽度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head_out{
            width: 100%;
            border-bottom: 4px solid #5ab3f4;
            min-width: 1000px;
        }
        .head{
            width: 1000px;
            margin:0 auto;
            height: 100px;
            background-color: #ffa000;
        }
    </style>
</head>
<body>
<!--
    案例中，当浏览器缩小窗口，生成横向滚动条的时候，
    head_out  width：100%的宽度  是屏幕的宽度，当滑动横向滚动条的时候，这个元素的宽度没有达到主要内容1000px的要求
    所以可以给head_out设置最小宽度  min-width
-->
    <div class="head_out">
        <div class="head"></div>
    </div>
</body>
</html>

最大宽度和最大高度

宽度：width min-width max-width

高度：height min-height max-height

当3个冲突后怎么办：

当min-width和max-width 冲突的时候，min-width是优先的
当width和 min或max冲突以后，min或者max直接无视width的存在（无论是否添加！important）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 100px;
            background-color: red;
            min-width: 800px;
            max-width: 700px;
            width: 400px !important;
        }
    </style>
</head>
<body>

<div class="box">

</div>
</body>
</html>

css hack

由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器
比如：

after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout

*代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom：1；

那么这个代码只有ie 6 7 认识
为什么使用css hack

第一种理解：让我们css 的代码兼容不同的浏览器

第二种理解：我们可以为不同的浏览器定制不同的样式

css hack有3种表现方式：

1、css属性前缀法 2、选择器前缀法 3、IE条件注释法

IE条件注释法

主要针对IE的版本

    gt ：大于
    lt：小于
    gte：大于等于
    lte：小于等于
    ！：非当前
    目前条件注释只支持到ie9及以下  其他浏览器不支持条件注释

css属性前缀法

*color：ie 5,6,7
+color：ie 5,6,7
#color：ie 5,6,7
-color：ie 5、6
color\0:ie 9 10 11
color\9:ie 6 7 8 9 10
color\9\0:ie 8 9 10

选择器前缀法

将前缀写在选择器前边，控制选择器是否针对当前浏览器有效
*html  ie 5 6
*+html ie7
:root  ie9 10 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css hack</title>
    <style>
        .clearFix{
            *zoom:1;
            color\0\9:yellow;
        }
        *html .clearFix{
            width: 1000px;
        }
        .clearFix:after{
            content: "\200B";
            height: 0;
            display: block;
            clear: both;
        }
    </style>
    <!--[if IE]>
        <style>
            .clearFix{
                background-color: pink;
                width: 100px;
                height: 100px;
            }
        </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style>
        .clearFix{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
    <![endif]-->
</head>
<body>
<div class="clearFix">
    今天天气真好
</div>
</body>
</html>

BFC(块级格式化上下文)

它是页面 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 的创建

以下元素会创建 BFC：

根元素（html）
浮动元素（float 不为 none）
绝对固定定位元素（position 为 absolute 或 fixed）
表格的标题和单元格（display 为 table-caption，table-cell）
匿名表格单元格元素（display 为 table 或 inline-table）
行内块元素（display 为 inline-block）
overflow 的值不为 visible 的元素

BFC 的范围

A block formatting context contains everything inside of the element creating it, that is not also inside a descendant element that creates a new block formatting context.

直译过来就是, BFC包含创建它的元素的所有子元素, 但不包括创建了新BFC的子元素的内部元素
简单来说，子元素如果又创建了一个新的 BFC，那么它里面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离的思想
也就是所说，一个元素不能同时存在于两个 BFC 中。

BFC 的特性

BFC 除了会创建一个隔离的空间外，还具有以下特性：

BFC 内部的块级盒会在垂直方向上一个接一个排列

同一BFC下的相邻块级元素可能发生外边距折叠，创建新的BFC可以避免外边距折叠

<style>
    .top {
      height: 50px;
      margin: 10px 0;
      background: yellow;
    }

    .outer {
      background: gray;
      height: 50px;
      /* 创建新的 BFC 就可以避免这两个相邻块级盒间的外边距折叠，尝试去掉注释后看效果 */
      /* overflow: auto; */
    }

    .inner {
      height: 20px;
      margin: 10px 0; /* 这里设置了inner box的 margin，很明显没有生效 */
      background: green;
    }
</style>
<div class="top">TOP</div>
<div class="outer">
  <div class="inner">INNER</div>
</div>

每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此

<style>
    .box {
      background: gray;
    }

    .left {
      /* 即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触 */
      /* 在这个例子中，黄框向左浮动，脱离了普通流，此时绿框被定位到包含块的左上角 */
      float: left;
      width: 100px;
      height: 80px;
      background: yellow;
      opacity: .5;
    }

    .right {
      width: 200px;
      height: 50px;
      background: green;
      opacity: .5;
    }
</style>
<div class='box'>
  <div class="left"></div>
  <div class="right"></div>
</div>

浮动盒的区域不会和BFC重叠

<style>
    .wrapper {
      height: 100px;
      background: gray;
    }

    .float {
      float: left;
      width: 80px;
      height: 100px;
      background: green;
      opacity: .6;
    }

    .bfc {
      width: 200px;
      height: 50px;
      background: yellow;
      /* 如果不创建 BFC，浮动盒的区域会和黄框重叠 */
      /* 尝试去掉 overflow 注释，使黄框创建 BFC，观察 BFC 区域和浮动盒的重叠情况 */
      overflow: hidden; 
    }
</style>
<div class="wrapper">
  <div class="float"></div>
  <div class="bfc">
  </div>
</div>

计算BFC的高度时，浮动元素也会参与计算

<style>
    .bfc {
      /* 计算 BFC 高度时，包含 BFC 内所有元素，即使是浮动元素也会参与计算 */
      /* 这一特性可以用来解决浮动元素导致的高度塌陷 */
      /* 如果父元素没有创建 BFC，在计算高度时，浮动元素不会参与计算，此时就会出现高度塌陷 */
      overflow: auto;
      background: gray;
    }

    .float {
      float: left;
      width: 100px;
      height: 80px;
      background: green;
    }

    .inner {
      height: 50px;
      background: yellow;
    }

</style>
<div class="bfc">
  <div class="float"></div>
  <div class="inner"></div>
</div>

BFC 的应用

自适应多栏布局

中间栏创建 BFC，左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会自适应

<style>
    .wrapper div {
      height: 200px;
    }

    .left {
      float: left;
      width: 200px;
      background: gray;
    }

    .right {
      float: right;
      width: 200px;
      background: gray;
    }

    .main {
      /* 中间栏创建 BFC */
      /* 由于 盒子的 margin box 的左边和包含块 border box 的左边相接触 */
      /* 同时 BFC 区域不会和浮动盒重叠，所以宽度会自适应 */
      overflow: auto;
      background: cyan;
    }
</style>
<div class="wrapper">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
</div>

防止外边距折叠

创建新的 BFC ，让相邻的块级盒位于不同 BFC 下可以防止外边距折叠
清除浮动

BFC 内部的浮动元素也会参与高度计算，可以清除 BFC 内部的浮动

IFC的规则

在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
这些盒之间的水平margin，border和padding都有效
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

空元素和替换元素

空元素：

在html中，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素
通常在空元素上使用闭合标签是无效的

<input type="text"></input> ：闭合标签无效

br、hr、img、input、link、meta、source

替换元素

浏览器根据元素的标签和属性，来决定元素具体显示的内容
img、input、textarea、select、video、iframe是替换元素
audio、canvas标签在某些时候也是替换元素

calc方法

calc()

我们可以把它当做一个函数，其实他是calculate（计算）缩写。

是css3提供的一个新功能，主要用来计算长度

我们可以用它来给padding margin width height font-size等等计算大小值值是一个动态的
注意

使用+ - * /进行运算

可以使用百分比 px em rem等单位

可以单位混合计算

在使用的时候，尽量在 + - * / 前后添加一个空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calc方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: calc(100% - 200px);
            height: calc(100px / 2 + 100px);
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--书写一个效果，让div永远距离两边都是100px
    计算div的宽度-->
    <div class="box"></div>
</body>
</html>

posted @ 2023-01-10 22:36 z_bky 阅读(26) 评论(0) 收藏举报

刷新页面返回顶部

z-bky