前端之css

一、引入方式

1. 行内样式

<p style="color: blue;">这是一个p标签！</p>

2. 内嵌方式

 <style>
     p {
         color: red;
     }
 </style>

3.外联样式表-链接式

`link`标签

<link rel="stylesheet" href="index.css">

外联样式表-@import url()方式导入式链式表里导入链式表

    <style>
        @import url('test.css');
    </style>

    
    <style>
        @import 'test.css';
    </style>

注意：@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

二、选择器

1. 基本选择器

标签选择器

通过标签名来选择元素

p {
  color: red;
}

ID选择器

1. 在写页面的时候少使用id，id一般和js搭配使用

2. 同一个标签可以携带多个id，但不要这样用

#i1 {
  color: red;
}

类选择器

类选择器一般和css样式搭配使用。
同一个标签可以携带多个类。
后面的样式可以覆盖前面的。
一定要有 “公共类”的概念。

总结

不要试图用一个类将我们的页面写完，一个标签要携带多个类，共同设置样式。
每个类要尽可能的小，有公共的概念，能够让更多的标签使用。
尽可能用class，除非一些特殊情况可以用id。id一般是用在js上，js通过id获取标签。

.c1 {
  color: red;
}

通用选择器

使用*选择所有元素，性能差。

* {
  color: black;
}

2. 高级选择器

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式，在css中使用频繁。

div p {
  color: red;
}

.container div p {
    color:green;
}

从div的所有后代中找p标签，设置字体颜色为红色。

子代选择器

div>p {
  color: red;
}

从div的直接子元素中找到p标签，设置字体颜色为红色。

交集选择器

设置一个标签和一个类的共有属性。

h3{
    width:300px;
    color:red;
}
.active {
    font-size:30px;
}
h3.active {
    background-color:yellow;
}

把h3和active的背景颜色设置成黄色

并集选择器（组合选择器）

设置多个标签中的统一样式

a,h4 {
    color:#666;
    font-size:20px;
    text-decoration:none;
}

毗邻选择器

div+p {
  color: red;
}

找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。

弟弟选择器

div~p {
  color: red;
}

找到所有div标签后面同级的p标签，设置字体颜色为红色。

3. 属性选择器（在表单控件中会频繁使用）

找到所有title属性等于hello的元素：

[title="hello"] {
  color: red;
}

找到所有title属性以hello开头的元素：

[title^="hello"] {
  color: red;
}

找到所有title属性以hello结尾的元素：

[title$="hello"] {
  color: red;
}

找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {
  color: red;
}

表单常用

input[type="text"] {
  backgroundcolor: red;
}

4. 伪类选择器（用在a标签上）

没有访问的超链接a标签样式：

a:link {
  color: blue;
}

访问过的超链接a标签样式：

a:visited {
  color: gray;
}

鼠标悬浮在元素上应用样式：

a:hover {
  background-color: #eee; 
}

鼠标点击瞬间的样式：

a:active {
  color: green;
}

input输入框获取焦点时样式：

input:focus {
  outline: none;
  background-color: #eee;
}

hover配合和后代选择器结合使用可以在鼠标悬浮的时候显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            list-style: none;

        }

        ul li{
            position: relative;
        }
        ul li img{
            display: none;
            position: absolute;
            top: -16px;
            left: 36px;
        }
        ul li:hover img{
            display: block;
        }
    </style>

</head>
<body>

    <ul>
        <li>
             alex
            <img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" >
        </li>


    </ul>

</body>
</html>

nth-child用法

    <style>
        div ul li:first-child {
            font-size: 50px;
            color: red;
        }
        div ul li:last-child{
            font-size:30px;
            color:green;
        }

        div ul li:nth-child(2){
            font-size:40px;
            color:yellow;
        }

        /*选中所有，0的时候表示没有选中*/

        div ul li:nth-child(n){
            font-size: 60px;
            color:bisque;
        }

        /*选中偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }

        /*选中奇数*/
        div ul li:nth-child(2n-1){
        font-size: 70px;
        color: sienna;
        }


        /*隔n换1，下列是隔3换1*/
        div ul li:nth-child(4n+1){
            font-size: 50px;
            color: gold;
        }
    </style>

<div class="box">
    <ul>
        <li class="item1">
            1
            <a href="#">张三</a>
        </li>
        <li class="item2">
            2
            <a href="#">李四</a>
        </li>
        <li>
            3
            <a href="#">王五</a>
        </li>

        <li>
            4
            <a href="#">赵起</a>
        </li>

        <li>
            5
            <a href="#">郑六</a>
        </li>

    </ul>
</div>

五. 伪元素选择器

first-letter

用于为文本的首字母设置特殊样式。

p:first-letter {
  font-size: 48px;
}

before

用于在元素的内容前面插入新内容，一定要结合content使用

p:before {
  content: "*";
  color: red;
}

在所有p标签的内容前面加上一个红色的

after

用于在元素的内容后面插入新内容，一定要结合content使用，使用非常频繁，通常与布局有很大关联（清除浮动）

p:after {
  content: "?";
  color: red;
}

在所有p标签的内容后面加上一个蓝色的`?`

三、css的特性

1. 继承性

继承就是给父级设置一些属性，子级继承了父级的该属性
可以被继承的属性：color、font-*、text-*、line-*
盒子、定位的元素不能被继承（浮动、绝对定位、相对定位）

2. 层叠性（权重）

定义：权重大的标签覆盖掉权重小的标签

权重比较

内联样式的权重为1000 style
id选择器的权重为100
类、伪类选择器的权重为10
元素、伪元素选择器的权重为1
权重计算永不进位

权重相同处理

如果权重一样，则以后面的为准

被继承的权重为0

先看有标签没有被选中

如果都被选中了而且权重一样，那么以后面的为准
如果一个被选中，一个没被选中，以被选中的为准
如果都没被选中（都是继承的），谁离标签近就选择谁

    <style>
        /* 没有选中p */
        #box1 #box2 .wrap3 {
            color: red;
        }

        /* 选中p了 */
        #box2 p {
            color:green;
        }
        
        /* 权重都是0，但是.wrap3离p近，所以是红色 */
        .wrap1 .wrap3 {
            color:red;
        }
        #box1 #box2 {
            color:green;
        }
    </style>

<div id="box1" class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>猜猜我是什么颜色</p>
        </div>
    </div>
</div>

!important属性介绍

设置权重为无限大，尽量不用，因为会造成页面混乱。

不影响继承来的权重，只影响选中的元素。

    <style>
        p {
            color:red !important;;
            font-size: 30px;
        }
        .sep1{
            color:yellow ;
            font-size: 40px;
        }
        .sep2 {
            color:green;
            font-size: 30px;
        }
        ul{
             color:green;
        }
        /* 不影响继承来的元素 */
        .list{
            color:purple !important;
        }
    </style>
    
    
<div>
    <p class="spe1 spe2">我是什么颜色</p>  <!-- 红 -->
    <p class="sep2 sep1">我是什么颜色</p>  <!-- 红 -->
</div>

<div class="list"> <!-- 绿 -->
    <ul>
        <li>
            我是一个li标签
        </li>
    </ul>
</div>

四、盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

1. 盒模型的5个重要

概要

width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离

padding

padding就是内边距，区域有背景颜色并和内容区域颜色一样
background-color将填充所有的border以内区域
当padding使用四个值得时候，它的方向是上右下左
当padding使用三个值的时候，它的方向是上左右下
当padding使用两个值得时候，它的方向是上下左右

清除某些标签默认的padding

通常我们做网站的时候，要清除默认的padding和margin。所以我们要使用并集选择器来选中页面中应有的标签

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

border

边框三要素：粗细线性颜色

颜色默认是黑色

如果不写线性样式，默认是上下左右各3px的宽度

用border做三角形

调整方向可以调整三角的方向

 <style>
        div {
            width:0;
            height:0;
            border-bottom:20px solid red;
            border-left:20px solid transparent;
            border-right:20px solid transparent;
        }

 </style>
<div></div>

简单认识一下margin的坑

塌陷现象：垂直方向的浏览器自带的8px会塌陷到margin里，所以要设置margin:0

2. 盒模型的计算

如果一个盒子设置了padding，border，width，height（先不考虑margin），那么：

盒子的真实宽度=width+2padding+2border

盒子的真实高度=height+2padding+2border

如果想保证盒子的真实宽度，加width应该减padding，反之亦然。

五、标准文档流

1、什么是标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

2、标准文档流下的微观现象

空白折叠现象。空格再多，也都会被浏览器当成一个空格。
高矮不齐，底边对齐。文字或图片高度不一样，都以底部对齐。
自动换行，一行写不满，换行写。

3、行内元素和块状元素的转换

/* 转换为块级元素 */
display:block;

/* 转换为行内元素 */
display:inline;

/* 转化为行内块元素 */
display:inline-block;

/* 隐藏元素 */
display:none;   /* 不占当前位置 */
visibility: hidden; /* 占据当前位置 */

六、布局属性

1. 浮动介绍

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

浮动可以让两个元素并排，并且两个元素都可以设置宽度和高度。

2. 浮动的四个特性

浮动的元素脱标

定义：脱离的标准文档流。

盒子a浮动了就会脱离标准流，可以想象它漂浮到了原位置的上空，下面的盒子b就会上去占据a的位置，同时盒子a的区域在盒子b上面会覆盖盒子b的区域。

所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高。

浮动元素互相贴靠

给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

![img](http://img.smyhvae.com/20170730_1910.gif)

3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号。

如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

不过3号自己去贴墙的时候，注意：

![img](http://img.smyhvae.com/20170730%20_1928.gif)

上图显示，3号贴左墙的时候，并不会往1号里面挤。

同样，float还有一个属性值是right，这个和属性值left是对称的。

浮动元素字围效果

<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        float: left;
    }
    p{
        background-color: #666;
    }
</style>
<div>
   <img src="./images/企业1.png" alt="">    
</div>
<p>
   123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
</p>

所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

需要强调一点：永远不是一个盒子单独浮动，浮动都是一起浮动，要浮动，大家都浮动（div里的元素都浮动），如果div里的元素没有浮动，那就不是这个效果了，那将会是脱标的效果。

浮动元素紧凑（收缩）效果

收缩：一个浮动元素。如果没有设置宽度，那么就自动收缩为文字的宽度（这点跟行内元素很像）。

3. 清除浮动的方法

给父盒子设置高度

它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

clear-both（内墙法）

浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

缺点：要多加一个div，造成结构冗余。

伪元素清除法(常用)

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '';
    clear: both;
    display: block;
}

新浪首页推荐伪元素清除法的写法

content: ".";
display: block;  
height: 0;    /*不让content里的内容占据高度*/
clear: both;  
visibility: hidden

overflow:hidden(常用)

overflow属性规定当内容溢出元素框时发生的事情。

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

逐渐演变成overflow：hidden清除法。

Margin垂直方向塌陷问题

当给两个标准流下兄弟盒子，设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。
浮动的盒子垂直方向上不塌陷。
水平方向上没有这个问题，

4.margin相关知识

margin：0 auto;

需要知道的：

当一个div元素设置margin：0 auto时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离。
auto：给左右两边尽可能大的距离。
居中的是盒子，而不是文本

局限

必须设置宽度，而且要有明确的width。
只有标准流下的盒子才能使用margin:0 auto; （浮动、固定定位、绝对定位都不能用）

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

上例子

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;

            margin-top: 30px;
        }
    </style>

<div class="father">
    <div class="xiongda"></div>
</div>

直接从顶部掉了30px，因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。

那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

.father{
    width: 300px;
    height: 270px;
    padding-top:30px;
    background-color: blue;
}

5. 多行文本垂直居中

举例：一个行高30px，一共4个行高，那就是120px，总高度是200px，如果让整个行高垂直居中在当前的盒子中，那么设置padding-top为(200-120)/2=40px，同时height减去40px，此时就能居中。

五、定位

定位有三种：

1.相对定位 2.绝对定位 3.固定定位

1. 相对定位

相对定位:相对于自己原来的位置定位

现象和使用

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子没什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性

不脱标，不脱离标准流（浮动脱离标准流）。
形影分离，形就是位移后的元素，影是之前的位置。
老家留坑，以前的位置还占据空间。

由于这三个特性，相对定位在页面中没有什么太大的作用，影响我们页面的布局。

注意：不要用相对定位来做压盖效果

用途

微调元素位置
做绝对定位的参考

2. 绝对定位

特性：

脱标
做遮盖效果，提成了层级。
设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)

单独一个绝对定位的盒子

当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。浏览器的第一屏(就是没有移动滚动条的时候)的可视区域的下边缘。

以父辈盒子作为参考点

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
不仅仅是父相子绝。父绝子绝，父固子绝,都是以父辈元素为参考点

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding，只是父辈的盒子会增加padding值，但是绝地定位的盒子不会移动。

绝对定位盒子居中

记住下面的公式

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 100%;
        height: 69px;
        background: #000;
    }
    .box .c{
        width: 960px;
        height: 69px;
        background-color: pink;
       /* margin: 0 auto;*/
    position: absolute;
        left: 50%;
        margin-left: -480px;
        /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
    }
</style>

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

3. 固定定位

固定当前的元素不会随着页面滚动而滚动。

特性

脱标
遮盖，提升层级
固定不变

参考点

设置固定定位，用top描述。那么是以浏览器的左上角为参考点。如果用bottom描述，那么是以浏览器的左下角为参考点。

作用

返回顶部栏
固定导航栏
小广告

案例：固定导航航如何不遮盖住图片

给body一个padding-top的值，值和导航栏的高度一样，这样上面会空出相应的空白，然后再给导航栏的css加上top:0，left：0,把导航栏定位到空白处。

4. z-index

特性

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0。
如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。*
从父现象：父亲怂了，儿子再牛逼也没用。也就是父元素的z-index值比别的父元素的值小的话，那么子元素的z-index值比别的子元素的z-index值大多少都没有用，都会被覆盖掉。

用途

在网页中增加一小块内容又不想让它覆盖住之前的图片的内容的时候，可以把之前内容的z-index设置的高些。

六、其他

a标签补充

a标签不继承父元素的color

美化a标签

a标签要设置如下，这样点击到宽度内都可以点击，而不止是文字

.nav ul li a{
    width:160px;
    height:40px;
    display:block;
    color:white;
    text-decoration:none;
    font-family:'xxxx';
}

.nav ul li a:hover{
    background-color:red;
    font-size:22px;
}

background

background-position的使用

正值第一个表示往右偏移，第二个表示往下，负值相反。

background-position方向的使用

我们可以使用background综合属性制·作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大。

那么我们可以此属性来制作通天banner。

background-image:red url('./images/banner.jpg')  no-repeat;
background-repeat:no-repeat
background-position:center top;

<!--综合属性 -->
background:red url('./images/banner.jpg') no-repeat center top;

雪碧图技术（精灵图技术）

该方法是将小图标和背景图像合并到一张图片上，然后利用ps、css（background-position）的背景定位来显示需要显示的图片部分

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

CSS雪碧的最大问题是内存使用
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印

background-attachment

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

background-attachment:fixed;

text-indent

首行缩进，单位用em和font-size相对应。

相关阅读:
vuejs2从入门到精通视频教程
 vuejs2项目开发实战视频教程
 vuejs2从入门到精通视频教程
 Bootstrap视频教程
 开通博卡拉
 阿里云Ubuntu 16 FTP安装配置注意事项
 [解决方法] Java-Class.forName() 反射/映射子类并转化为父类/接口
 [HTML/CSS] ul元素居中处理
 [HTML/Javascript] JS判断IE浏览器各版本
 [HTML/JS] JQuery 页面滚动回到顶部
原文地址：https://www.cnblogs.com/lshedward/p/10268126.html