首页 › CSS论坛 › Css学习

香菲儿 發表於 2021-8-13 09:06:00

Css学习

<h2 id="什么是css">什么是CSS</h2>
<hr>
<ul>
<li>
<h4 id="怎么学习">怎么学习</h4>
<ol>
<li>css是什么</li>
<li>css怎么用</li>
<li><strong>Css选择器（重点+难点）</strong></li>
<li>美化网页（文字，阴影，超链接，列表，渐变）</li>
<li>盒子模型</li>
<li>浮动</li>
<li>定位</li>
<li><strong>网页动画（特效）</strong></li>
</ol>
</li>
</ul>
<hr>
<ol>
<li>
<h4 id="什么是css-1">什么是Css</h4>
<ul>
<li>层叠样式表</li>
<li>CSS：表现（美化网页）</li>
<li>字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动</li>
</ul>
</li>
<li>
<h4 id="快速入门">快速入门</h4>
<ul>
<li>内联样式规范，<code>&lt;style&gt;</code>可以编写css的代码，每一个声明最好用分号结尾
<ul>
<li>语法：选择器</li>
</ul>
</li>
<li>外联样式：使用link外联<strong>建议使用</strong>
<ul>
<li><code>&lt;link rel="stylesheet" href="css/style.css"&gt;</code></li>
<li>优势：
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分的丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利用SEO，容易被搜索引擎收录！</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h4 id="css的导入方式">CSS的导入方式</h4>
<ul>
<li>
<p>行内样式：<code>&lt;h1 style="color: skyblue"&gt;标题&lt;/h1&gt;</code></p>
</li>
<li>
<p>内部样式style标签：</p>
<pre><code class="language-css">&lt;style&gt;
    h1{
      color: skyblue;
    }
&lt;/style&gt;
</code></pre>
</li>
<li>
<p>外部样式：<code>&lt;link rel="stylesheet" href="css/style.css"&gt;</code>，属于HTML标签</p>
</li>
<li>
<p><strong>优先级：行内样式&gt;内部样式&gt;外部样式，遵循就近原则</strong></p>
</li>
<li>
<p>扩展：CSS2.0用导入式，作用是引入CSS样式</p>
<pre><code class="language-css">&lt;style&gt;
    @import "css/style.css";
&lt;/style&gt;
</code></pre>
</li>
</ul>
</li>
</ol>
<hr>
<ol>
<li>
<h4 id="选择器">选择器</h4>
<blockquote>
<p>作用：选择叶敏上的某一个或者某一些元素</p>
</blockquote>
<ul>
<li>
<h4 id="基本选择器">基本选择器</h4>
<ol>
<li>
<p>标签选择器</p>
<ul>
<li>
<p>标签选择器会选择到页面上所有的此标签</p>
<pre><code class="language-css">    &lt;style&gt;
      h1{
            color: skyblue;
      }
    &lt;/style&gt;
</code></pre>
</li>
</ul>
</li>
<li>
<p>类选择器</p>
<ul>
<li>
<p>选择所有class属性一致的标签，跨标签</p>
</li>
<li>
<p>格式：.class的名称{}</p>
</li>
<li>
<p>好处：可以多个标签归类，是同一个class，可以复用</p>
<pre><code class="language-css">&lt;style&gt;
.a{
    color: skyblue;
}
.b{
    color: greenyellow;
}
.c{
    color: pink;
}
&lt;/style&gt;

&lt;h1 class="a"&gt;1&lt;/h1&gt;
&lt;h1 class="b"&gt;2&lt;/h1&gt;
&lt;h1 class="c"&gt;3&lt;/h1&gt;
</code></pre>
</li>
</ul>
</li>
<li>
<p>id选择器</p>
<ul>
<li>
<p>格式：#ID名称{}</p>
</li>
<li>
<p>id必须保证全局唯一</p>
<pre><code class="language-css">&lt;style&gt;
    #a{
      color: pink;
    }
    #b{
      color: greenyellow;
    }
    #c{
      color: skyblue;
    }
&lt;/style&gt;

&lt;h1 id="a"&gt;1&lt;/h1&gt;
&lt;h1 id="b"&gt;2&lt;/h1&gt;
&lt;h1 id="c"&gt;3&lt;/h1&gt;
</code></pre>
</li>
<li>
<p><strong>优先级:id选择器&gt;类选择器&gt;标签选择器,不遵循就近原则</strong></p>
</li>
</ul>
</li>
</ol>
</li>
<li>
<h4 id="层次选择器">层次选择器</h4>
<ol>
<li>
<p>后代选择器</p>
<ul>
<li>
<p>在某个元素的后面</p>
<pre><code class="language-css">      body p{
      background: skyblue;
      }
</code></pre>
</li>
</ul>
</li>
<li>
<p>子选择器</p>
<ul>
<li>
<p>一代 儿子</p>
<pre><code class="language-css">      body&gt;p{
      background: skyblue;
      }
</code></pre>
</li>
</ul>
</li>
<li>
<p>相邻兄弟选择器</p>
<ul>
<li>
<p>同辈，只有一个，相邻向下</p>
<pre><code class="language-css">      .active + p{
      background: skyblue;
      }
</code></pre>
</li>
</ul>
</li>
<li>
<p>通用选择器</p>
<ul>
<li>
<p>当前选中元素的向下的所有兄弟元素</p>
<pre><code class="language-css">.active~p{
      background: skyblue;
      }
</code></pre>
</li>
</ul>
</li>
</ol>
</li>
<li>
<h4 id="结构伪类选择器">结构伪类选择器</h4>
<ol>
<li>
<p>结构伪类：定位</p>
<pre><code class="language-css">&lt;style&gt;
    /* 1.ul第一个子元素
   2.ul最后一个子元素
   3.第一个p元素
   */
    ul li:first-child{
      background: skyblue;
    }
    ul li:last-child{
      background: pink;
    }
   /* 选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效*/
   p:nth-child(1){
   background: greenyellow;
   }
    /* 选择当前父级元素的p元素的第二个元素*/
   p:nth-last-of-type(2){
   background: yellow;
   }
&lt;/style&gt;
</code></pre>
</li>
</ol>
</li>
<li>
<p>属性选择器</p>
<ol>
<li>
<p>存在ID的元素：属性名=属性值（正则）{}</p>
<ul>
<li>=    绝对等于</li>
<li>*= 包含这个元素</li>
<li>^= 以这个开头</li>
<li>￥=以这个结尾</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;属性选择器&lt;/title&gt;

&lt;style&gt;
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: skyblue;
      text-align: center;
      color: darkgray;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
/*存在id属性的元素a[]{}*/
    a{
      background: pink;
    }
    a{
      background: orange;
    }
/*选择href中以http开头的元素*/
    a{
      background: yellowgreen;
    }
    a{
      background: cornflowerblue;
    }

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class="demo"&gt;
    &lt;a href="https://www.taobao.com" class="links item first" id="first"&gt;1&lt;/a&gt;
    &lt;a href="" class="links item active" target="_blank" title="test"&gt;2&lt;/a&gt;
    &lt;a href="images/1.html" class="links item "&gt;3&lt;/a&gt;
    &lt;a href="images/1.png" class="links item "&gt;4&lt;/a&gt;
    &lt;a href="images/1.jpg" class="links item "&gt;5&lt;/a&gt;
    &lt;a href="abc" class="links item "&gt;6&lt;/a&gt;
    &lt;a href="/a.pdf" class="links item "&gt;7&lt;/a&gt;
    &lt;a href="/abc.pdf" class="links item "&gt;8&lt;/a&gt;
    &lt;a href="abc.doc" class="links item "&gt;9&lt;/a&gt;
    &lt;a href="abcd.doc" class="links item last"&gt;10&lt;/a&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</li>
</ol>
</li>
</ul>
</li>
</ol>
<hr>
<ol>
<li>
<h4 id="美化网页元素">美化网页元素</h4>
<blockquote>
<p>作用：有效的传递页面信息，美化网页，凸显页面的主题，提高用户体验</p>
</blockquote>
<ul>
<li>
<p>span标签</p>
<ol>
<li>重点要突出的字使用span套起来</li>
</ol>
</li>
<li>
<p>字体样式：</p>
<ol>
<li>
<p>font-fiamily：字体</p>
</li>
<li>
<p>font-size：字体大小</p>
</li>
<li>
<p>font-weight：字体粗细</p>
</li>
<li>
<p>color：字体颜色</p>
</li>
<li>
<p>font简写 ：字体风格、字体粗细、大小、样式</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;字体样式&lt;/title&gt;
&lt;style&gt;
    body{
      font-family: "Agency FB",华文楷体;
      font-size: 18px;
      color: skyblue;
    }
    p:nth-of-type(1){
      font-weight: inherit;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;故事介绍&lt;/h1&gt;
&lt;p&gt;《魁拔》前身《灵山王》于2009年公布首段片花，2010年4月，片方宣布将该系列更名为《魁拔》，不久之后公布了系列中第一部动画电影的名称：《魁拔之十万火急》。12月初，片方宣布将开展“全优声”配音演员选拔大赛，为本片遴选配音演员。12月30日下午，片方宣布“全优声大赛”正式启动。同时片方还宣称，将与日本配音演员事务所81 Produce合作制作该片的日语版本。&lt;/p&gt;
&lt;p&gt;2011年4月底，制作方北京青青树与曾成功运作《喜羊羊与灰太狼》的上海炫动签订合同，后者承诺为本片投入1700万的宣传费用。6月29日，片方在北京万国城百老汇电影中心举行首映。7月7日~8日，片方在北京、上海等地举办了数场首映宣传活动，数名日语版配音演员出席活动（其中柿原彻也与山口理惠出席了上海的宣传活动，关俊彦出席了北京的宣传活动）。&lt;/p&gt;
&lt;p&gt;'We get old and get used to each other.&nbsp;We think alike.We read each others minds.&nbsp;We know what the other wants without asking.&nbsp;Sometimes we irritate each other a little bit.&nbsp;Maybe sometimes take each other for granted.&nbsp;But once in awhile, like today, I meditate on it and realise how lucky I am to share my life with the greatest woman I ever met.'
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre>
</li>
</ol>
</li>
<li>
<p>文本样式</p>
<ol>
<li>
<p>颜色</p>
<ul>
<li>RGB： 0~F</li>
<li>RGBA： 0-1</li>
</ul>
</li>
<li>
<p>对齐方式</p>
<ul>
<li><strong>text-align：center；（居中）</strong></li>
</ul>
</li>
<li>
<p>首行缩进</p>
<ul>
<li><strong>text-indent: 2em;</strong></li>
</ul>
</li>
<li>
<p>行高</p>
<ul>
<li><strong>line-height:12px;</strong></li>
<li><strong>行高等于高就是文本垂直居中</strong></li>
</ul>
</li>
<li>
<p>下划线（装饰）等</p>
<ul>
<li>text-decoration:：underline;（上划线）</li>
<li>text-decoration：line-through;(中划线)</li>
<li>text-decoration：overline;(下划线)</li>
<li>veretical-align：middle；（水平居中要有参照物）</li>
<li>text-decoration:none;（超链接去下划线）</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;文本样式&lt;/title&gt;
&lt;style&gt;
      h1{
      color: RGBA(255,158,89,0.2);
      text-align: center;
      }
      p{
      text-indent: 2em;
      line-height: 30px;
      }
      .p1{
      text-decoration: underline;
      }
      .p2 {
      text-decoration: line-through;
      }
      .p3 {
      text-decoration: overline;
      }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;故事介绍&lt;/h1&gt;
&lt;p&gt;《魁拔》前身《灵山王》于2009年公布首段片花，2010年4月，片方宣布将该系列更名为《魁拔》，不久之后公布了系列中第一部动画电影的名称：《魁拔之十万火急》。12月初，片方宣布将开展“全优声”配音演员选拔大赛，为本片遴选配音演员。12月30日下午，片方宣布“全优声大赛”正式启动。同时片方还宣称，将与日本配音演员事务所81 Produce合作制作该片的日语版本。&lt;/p&gt;
&lt;p&gt;2011年4月底，制作方北京青青树与曾成功运作《喜羊羊与灰太狼》的上海炫动签订合同，后者承诺为本片投入1700万的宣传费用。6月29日，片方在北京万国城百老汇电影中心举行首映。7月7日~8日，片方在北京、上海等地举办了数场首映宣传活动，数名日语版配音演员出席活动（其中柿原彻也与山口理惠出席了上海的宣传活动，关俊彦出席了北京的宣传活动）。&lt;/p&gt;
&lt;p&gt;'We get old and get used to each other.&nbsp;We think alike.We read each others minds.&nbsp;We know what the other wants without asking.&nbsp;Sometimes we irritate each other a little bit.&nbsp;Maybe sometimes take each other for granted.&nbsp;But once in awhile, like today, I meditate on it and realise how lucky I am to share my life with the greatest woman I ever met.'
&lt;/p&gt;
&lt;p class="p1"&gt;123456789&lt;/p&gt;
&lt;p class="p2"&gt;123456789&lt;/p&gt;
&lt;p class="p3"&gt;123456789&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre>
</li>
</ol>
</li>
<li>
<p>超链接伪类</p>
<ol>
<li>
<p>a:hover{}   （鼠标悬浮颜色）</p>
</li>
<li>
<p>a:active{}   （鼠标按住未释放的颜色）</p>
</li>
<li>
<p>a:visited{}   (已访问)</p>
</li>
<li>
<p>a:link{}          (未访问)</p>
</li>
<li>
<p>text-shadow：阴影颜色、水平偏移、垂直偏移、阴影半径</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;超链接伪类&lt;/title&gt;
    &lt;style&gt;
      a{
            text-decoration: none;
            color: black;
      }
      a:hover{
            color: orange;

      }
      a:active{
            color: skyblue;
            font-size: 18px;
      }
      a:link{
            color: yellow;
      }
      a:visited{
            color: yellowgreen;
      }
      p:nth-last-of-type(1){
            text-shadow: 1px 1px skyblue;
      }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="#"&gt;
    &lt;img src="image/a.jpg" alt=""&gt;
&lt;/a&gt;
&lt;p&gt;&lt;a href="#"&gt;皮卡丘&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#"&gt;黄色&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#"&gt;电&lt;/a&gt;&lt;/p&gt;


&lt;/body&gt;
&lt;/html&gt;

</code></pre>
</li>
</ol>
</li>
<li>
<p>列表</p>
<ul>
<li>list-style:none; (去除列表前面的点)
<ol>
<li>noen ：去掉数字圆点</li>
<li>circle：空心圆</li>
<li>decimal：有序列表</li>
<li>square：正方形</li>
</ol>
</li>
</ul>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;列表&lt;/title&gt;
    &lt;link rel="stylesheet" href="Css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="nav"&gt;
&lt;h2 class="tit1e"&gt; 全部商品分类&lt;/h2&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;图书&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt; 音像&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt; 数字商品&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt; 家用电器&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;手机&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;数码&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;电脑&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#" &gt;办公&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;服饰鞋帽&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;个护化妆&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;服饰鞋帽&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;个护化妆&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;服饰鞋帽&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;个护化妆&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;服饰鞋帽&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;个护化妆&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;服饰鞋帽&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;a href="#"&gt;个护化妆&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<pre><code class="language-css">.nav{
    width: 300px;
    background: cornflowerblue;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: skyblue;
}

ul {
    background: cornflowerblue;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: orange;
    text-decoration: underline;
}

</code></pre>
</li>
<li>
<p>背景</p>
<ul>
<li>backgroud-image：url（""）;
<ul>
<li>默认全部平铺</li>
<li>backgroud-repeat：repeat-x；（水平平铺）</li>
<li>backgroud-repeat：repeat-y；（垂直平铺）</li>
<li>backgroud-repeat：no-repeat；（不平铺）</li>
</ul>
</li>
</ul>
<pre><code class="language-css">    div{
      width: 900px;
      height: 700px;
      border: 1px solid skyblue;
      background-image: url("image/a.jpg");
    }
    .class1{
      background-repeat: repeat-x;
    }
    .class2{
      background-repeat: repeat-y;
    }
    .class3{
      background-repeat: no-repeat;
    }
</code></pre>
</li>
<li>
<p>渐变</p>
<ul>
<li>网站：渐变案例网站</li>
<li>径向渐变、圆形渐变</li>
<li>网站直接粘贴</li>
</ul>
</li>
</ul>
</li>
</ol>
<hr>
<ol>
<li>
<h4 id="盒子模型">盒子模型</h4>
<ul>
<li>外边距（margin）
<ul>
<li>body有默认外边距8</li>
<li>妙用（居中）：<code>margin: 0 auto;</code>
<ul>
<li>前提条件：块元素，块元素有宽度</li>
</ul>
</li>
</ul>
</li>
<li>内边距（padding）</li>
</ul>
</li>
<li>
<h4 id="边框">边框</h4>
<ul>
<li>边框的粗细</li>
<li>边框的样式</li>
<li>边框的颜色</li>
<li>简写：border：边框粗细、边框样式、边框颜色；
<ul>
<li>solid：实线</li>
<li>dashed：虚线</li>
</ul>
</li>
<li>内外边距计算方式
<ul>
<li>margin+border+padding+内容宽度</li>
</ul>
</li>
</ul>
<pre><code class="language-css">*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#app {
    width: 300px;
    border: 1px solid skyblue;
}
h2{
    font-size: 18px;
    background: yellowgreen;
    text-align: center;
    line-height: 30px;
    color: white;
}
form {
    background: skyblue;
}

div:nth-of-type(1) input {
    border: 1px solid black;
}

div:nth-of-type(2) input {
    border: 1px dashed black;
}
</code></pre>
</li>
<li>
<p>圆角边框</p>
<ul>
<li>border-radius：左上 右上 右下 左下</li>
<li>可以用px也可以用%表示</li>
</ul>
</li>
<li>
<p>阴影</p>
<ul>
<li>盒子阴影：box-shadow: 1px 1px 100px yellow;</li>
</ul>
</li>
<li>
<p>浮动</p>
<ul>
<li>
<p>标准文档流</p>
<ul>
<li>块级元素：独占一行</li>
<li>行级元素：不独占一行，可以包含在块级元素中</li>
</ul>
</li>
<li>
<p>display</p>
<ul>
<li>Block:块元素</li>
<li>inline：行内元素</li>
<li>Inline-block:即是块元素，也是行内元素</li>
<li>none：消除</li>
</ul>
</li>
<li>
<p>float</p>
<ul>
<li>浮动会重新排版</li>
<li><code>clear：both；</code>清除浮动(俩侧不允许有浮动)</li>
</ul>
</li>
<li>
<p>父级元素塌陷</p>
<ul>
<li>
<p>父级元素设置高度超过所有浮动的高（不建议使用）</p>
</li>
<li>
<p>增加空的div,清除浮动</p>
</li>
<li>
<p>overflow</p>
<ul>
<li>在父级元素增加overfloat属性</li>
<li>Hidden:隐藏</li>
</ul>
</li>
<li>
<p>父类添加一个伪类(最好的方式)</p>
<pre><code class="language-css">#father:after{
content: '';
display: block;
clear: both;
}
</code></pre>
</li>
<li>
<p>区别</p>
<ul>
<li>display：方向不可以控制</li>
<li>float：浮动起来会脱离文档流，所以要解决父级边框塌陷的问题</li>
</ul>
</li>
</ul>
</li>
<li>
<p>定位</p>
<ul>
<li>
<p>相对定位</p>
<ul>
<li>
<p>相对于自己原来的位置进行指定的偏移</p>
</li>
<li>
<p>相对定位仍然在标准文档流中</p>
</li>
<li>
<p>原来的位置会被保留</p>
</li>
<li>
<pre><code class="language-css">position: relative;
top: 20px;
left: 20px;
</code></pre>
</li>
</ul>
</li>
<li>
<p>绝对定位</p>
<ul>
<li>
<p>基于xxx定位</p>
</li>
<li>
<p>没有父级元素定位的前提下，相对于浏览器定位</p>
</li>
<li>
<p>要相对于父级元素需要给父级增加相对定位</p>
</li>
<li>
<p>不保留原来的位置</p>
</li>
<li>
<p>在父级元素范围内偏移</p>
<pre><code class="language-css">position: absolute;
top: 20px;
left: 20px;
</code></pre>
</li>
</ul>
</li>
<li>
<p>固定定位</p>
<ul>
<li>不论怎么都在原来的位置</li>
<li><code>postion:fixed</code>固定定位</li>
</ul>
</li>
<li>
<p>z-index</p>
<ul>
<li>层级最小0</li>
<li>一般设置999（最高）</li>
</ul>
</li>
<li>
<p>opacity</p>
<ul>
<li>透明度设置</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/shi-yao/p/15135838.html

查看完整版本: Css学习