css详细笔记

人间凡尔赛

已于 2022-08-20 18:52:53 修改

阅读量646

点赞数

分类专栏：见习工程师文章标签： css css3 前端

于 2022-08-19 01:14:38 首次发布

本文链接：https://blog.csdn.net/m0_53142039/article/details/125961274

版权

见习工程师专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

如何学习

CSS是什么
CSS怎样用
CSS选择器（重点+难点）
美化页面（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
页面动画 (特效效果)

1.什么是CSS

Cascade Style Sheet 层叠级联样式表
表现HTML或XHTML文件样式的计算机语言。
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

发展史

CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离。
CSS2.1 融入了更多高级的用法，如浮动，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。

由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势

1.1 CSS的基本语法

首先讲解CSS的基本语法结构，由选择器和声明构成
然后对照具体的样式详细讲解语法，强调声明必须在{ }中
最后说明基本W3C的规范，每条声明后的;都要写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   规范,<style> 编写css的代码,
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
        }

        <style>
            h1{
                color:green;
            }
        </style>
    -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1>相信光的人不会怕黑暗</h1>
</body>
</html>

在这里插入图片描述

1.2 引入CSS方式

行内样式
使用style属性引入CSS样式

 <h1 style="color:red">style属性的应用</h1>
 <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表
CSS代码写在的

<style> 
h1{
  color: green; 
}
 </style>

外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式 :

1.链接式（使用的最多）
使用标签链接外部样式表，并讲解各参数的含义，标签必须放在标签中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">

</head>

2. 导入式
使用@import导入外部样式表

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

链接式与导入式的区别

标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。

CSS样式优先级

行内样式>内部样式表>外部样式表
就近原则：越接近标签的样式优先级越高

2.选择器

2.1CSS基本选择器

标签选择器
HTML标签作为标签选择器的名称
…
、
、

 <style>
        h1{
            color:antiquewhite;
        }
    </style>

类选择器
一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .s1{
          color: rgba(79, 159, 215, 0.667);
      }
      .s2{
        color: antiquewhite;
      }
      .s3{
        color:brown;
      }
  </style>
</head>
<body>
    <h1 class="s1">精彩人生</h1>
    <p class="s2">
        既然选择远方，当不负青春，砥砺前行。
    </p>
    <p class="s3">
           青春由磨砺而出彩，人生因奋斗而升华！
    </p>
</body>
</html>

在这里插入图片描述

ID选择器
ID选择器的名称就是HTML中标签的ID名称，ID全局唯一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        h1{
            color:violet;
        }
      .s1{
          color: rgba(21, 241, 65, 0.667);
      }
      .s2{
        color: antiquewhite;
      }
      .s3{
        color:brown;
      }

      #id{
        color:yellow
      }
  </style>
</head>
<body>
    <h1 class="s1" id="id">精彩人生</h1>
    <p class="s2">
        既然选择远方，当不负青春，砥砺前行。
    </p>
    <p class="s3">
           青春由磨砺而出彩，人生因奋斗而升华！
    </p>
</body>
</html>

在这里插入图片描述

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
基本选择器的优先级
ID选择器>类选择器>标签选择器

2.2 高级选择器

2.2.1 层次选择器

后代选择器
在某个元素的后面，祖爷爷爷爷爸爸你
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

<!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>Document</title>
    <style>
        body p{
            background:darkmagenta
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p >p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
</body>
</html>

在这里插入图片描述

子选择器一代儿子

 body>p{
            background:darkmagenta
        }

在这里插入图片描述

相邻兄弟选择器
只有一个，相邻兄弟元素（向下）

在这里插入图片描述

<!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>Document</title>
    <style>
        
        .active + p{
            background:darkmagenta
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
</body>
</html>

通用兄弟选择器
== 选中子一代当前元素的向下所以兄弟元素==

.active~p{ 
   background: yellow; 
}

在这里插入图片描述

2.3 结构伪类选择器

//ul 第一个元素
  ul li:first-child{
           background-color: aquamarine;
        }
        // ul 最后一个元素
   ul li:last-child{
           background-color:blue;
        }

在这里插入图片描述

/*选中p1；定位到父元素，选择当前的第一个元素
 选择当前p元素的父级元素，选中父级元素的第一个，并且才生效，顺序复效
选择父级元素p 的第n个元素*/
 p:nth-child(1){
    background-color:#aff;
  }
  /*选中父元素下的p元素的第二个，按照类型  
  选择父元素内具有指定类型的第n个元素*/
  P:nth-of-type(1){
    background-color: rgb(225, 26, 36);
  }

在这里插入图片描述

小结

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

2.4 属性选择器

E[attr=val]属性选择器‘

      存在id属性的元素
            a[]{}
           a[id]{
                background-color: yellow;
            }
            等同
             a[id=first]{
                background-color: yellow;
            }

在这里插入图片描述

E[attr=val]属性选择器*
** = 包含这个元素*

     
     a[class*=link]{
            background-color: red;
         }

在这里插入图片描述

E[attr^=val]属性选择器
^= 以这个开头

     a[href^=https]{
            background-color: red;
         }

在这里插入图片描述

E[attr$=val]属性选择器
$= 以这个结尾

 a[href$=jpg]{
            background-color: red;
         }

在这里插入图片描述

选择器小结

在这里插入图片描述

3.CSS的作用及字体样式

3.1 < span>标签

< span>标签的作用：能让某几个文字或者某个词语凸显出来，从而添加对应的样式！
在这里插入图片描述
语法：

 <p>好好学习，<span>天天向上</span></p>

3.2 字体样式

3.2.1字体类型 font-family

/* 一个字体族名和一个通用字体族名 */
font-family: "Gill Sans Extrabold", sans-serif;

在这里插入图片描述
同时设置中文和英文时，计算机如何识别中英文不同类型

p{font-family:Verdana,"楷体";} 
body{font-family: "Times New Roman", "楷体";}

3.2.2 字体大小 font-size

单位
px（像素）
em、rem、cm、mm、pt、pc

h1{font-size:24px;} 
h2{font-size:16px;} 
h3{font-size:2em;} 
span{font-size:12pt;}
strong{font-size:13pc;}

3.2.3字体风格 font-style

normal、italic和oblique
可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;//字体倾斜角度

3.2.4字体的粗细 font-weight


font-weight: normal; 
font-weight: bold; 
font-weight: lighter; 
font-weight: bolder;

normal
正常粗细。与400等值。
bold
加粗。与700等值。
lighter
比从父元素继承来的值更细（字体内的粗细值范围）。
bolder
比从父元素继承来的值更粗（字体内的粗细值范围）

字体属性 font
字体属性的顺序：`字体风格→字体粗细→字体大小→字体类型` 

p span{ 
  font:oblique bold 12px "楷体"; 
}

3.3文本样式

3.3.1 文本颜色color

RGB
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8; 
color:#EEFF66;
color:rgb(0,255,255); 
color:rgba(0,0,255,0.5);

在这里插入图片描述

3.3.2 排版文本段落

水平对齐方式：text-align属性
start
如果内容方向是左至右，则等于left，反之则为right。
end
如果内容方向是左至右，则等于right，反之则为left。
left
行内内容向左侧边对齐。
right
行内内容向右侧边对齐。
center
行内内容居中。
justify
文字向两侧对齐，对最后一行无效。
justify-all
和 justify 一致，但是强制使最后一行两端对齐。
在这里插入图片描述
首行缩进：text-indent：em或px
行高：line-height：px

3.3.3 文本修饰和垂直对齐

文本装饰：text-decoration属性

.under {
  text-decoration: underline red;//红色下划线
}

.over {
  text-decoration: wavy overline lime;//波浪线
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;// a 链接自带下划线，none 去掉下划线
}

.underover {
  text-decoration: dashed underline overline;
}

.blink {
  text-decoration: blink;
}


<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This
 <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.
 </p>
<p class="underover">
This text has lines above <em>and</em> below it.
</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.
</p>

在这里插入图片描述
垂直对齐方式：vertical-align属性：middle、top、bottom

3.3.4 超链接伪类和文本阴影

       a{
            text-decoration:none;
        }
        /*鼠标悬停未点击的样式*/
        a:hover{
         
            color:blue;
            font-size: 50px;
        }
        /*鼠标点击还没释放的样式*/
        a:active{
            color:rgb(249, 253, 0);
        }
        /*未点击访问时超链接的样式*/
        a:link{
            color:red;
        }
        /*访问后的样式*/
        a:visited{
            background-color:springgreen
        }/*文字阴影*/
        #price{
            text-shadow: 14px 10px 20px rgb(246, 18, 151);
        }
        
 <a href="https://www.manongbook.com/java/356.html"><img src="../../imagle/码出高效.jpg" alt=""> </a> 
   <p>
    <a href>码出高效：Java开发手册</a>
   </p> 
    <p>
        <a href="">京东商城</a>
    </p>
    <p><a href="">购买纸质书</a> 
    </p> 
      <p id="price"> 82.90元</p>

在这里插入图片描述
设置伪类顺序：a:link–>a: visited–> a: hover --> a: active

3.3.5 列表样式

list-style-type
list-style-image
list-style-position
list-style

 div li{
       list-style: disc;// 实心圆
        }

在这里插入图片描述

  div li{
        list-style: circle; //空心圆
        }

在这里插入图片描述

div li{
      list-style: square; // 实心正方形
    }

在这里插入图片描述

 div li{
            list-style: decimal; 
     }

在这里插入图片描述

 div li{
            list-style: none;//去掉前缀 
        }


  <style>
        h1{
           color: red;
        }
        div li{
            list-style: none; 
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            color: #000;
        }  
    </style>

<body>
    <h1 class="title">
        主题市场
    </h1>
    <div>
        <li>
            <a href="#">女装</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">内衣</a>
        </li>
        <li>
            <a href="#">男装</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">运动户外</a>
        </li>
        <li>
            <a href="#">女鞋</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">男鞋</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">男鞋</a>
        </li>
        <li>
            <a href="#">美妆</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">个人护理</a>
        </li>
        <li>
            <a href="#">腕表</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">眼镜</a>
        </li>
        <li>
            <a href="#">手机</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">数码</a>
        </li>
        <li>
            <a href="#">零食</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">茶酒</a>
            <span>/</span> 
            <a href="https://sports.tmall.com/">进口食品</a>
        </li>
    </div>
    </body>

3.3.6 背景样式

设置背景图像
background-image属性
background-repeat属性

  <style>

        div{
            width: 800px;
            height: 400px;
            border: 1px solid red;
            background-image: url(../../imagle/下.png);
            background-repeat:repeat-x;
        }
        .d1{
            background-image: url(../../imagle/下.png);
            background-repeat:repeat-x;
        }
        .d2{
            background-image: url(../../imagle/下.png);
            background-repeat:repeat-y;
        }
        .d3{
            background: red url(../../imagle/下.png)  300px 200px no-repeat ;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>

no-repeat : 不铺开，只显示一次
repeat-x，repeat-y 只沿一个方向平铺

背景定位：background-position属性
Xpx Ypx : 表示水平位置和垂直位置单位：px
X% Y% ：使用百分比表示背景的位置

X，Y方向键：

水平：left ，center， right
垂直：top，center ，bottom

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

在这里插入图片描述
背景属性：background属性（背景样式简写）
背景颜色 background-color

 .d3{ 
    background: red url(../../imagle/下.png)  300px 200px no-repeat ;
        }

在这里插入图片描述

3.3.7 CSS渐变样式

网站推荐：http://color.oulu.me/
这个网站有自定义的渐变色模板，可直接引用。

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

  body{
       background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }

在这里插入图片描述

兼容Webkit内核的浏览器
-webkit-linear-gradient ( position, color1, color2,…)

小结

在这里插入图片描述

4. 盒子模型

4.1什么是盒子模型

讲解盒子模型及属性，并说明边框、外边框和内边框都是四个边，最后介绍盒子模型的立体结构。
在这里插入图片描述

盒子模型总尺寸= border + padding + margin + 内容宽度

4.2 边框

border简写

  border:1px solid #3a6587; 
  border: 1px dashed red;

粗细 + 样式 + 颜色
同时设置4个边框颜色时，顺序为上右下左详细讲解分别上、下、左、右各边框颜色的不同设置方式，及属性值的顺序
其中样式有多种：

边框样式 border-style
none
hidden
dotted
dashed
solid
double

在这里插入图片描述

边框粗细 border-width
边框的粗细，也可以分上下左右分别设置，以及可以简化边框设置

4.3 内外边距

外边距 margin

margin-top
margin-right
margin-bottom
margin-left

	/* 分别对每个外框设置大小*/
           margin-top: 1px ;
            margin-right : 2px ;
            margin-bottom : 2px ;
            margin-left : 1px ;

在这里插入图片描述

 /* 上右下左的顺时针方向设置*/
      margin :3px 5px 7px 4px; 
      margin :8px;/*默认四条边都是 8px*/
      margin :3px 10px;

在这里插入图片描述

  margin :3px 5px 7px;

在这里插入图片描述

外边距的妙用：网页居中对齐

margin:0px auto;

在这里插入图片描述

内边距 padding

padding-left
padding-right
padding-top
padding-bottom

   padding-left:10px;
   padding-right: 5px;
   padding-top: 20px; 
   padding-bottom:8px; 

等同于 
    padding:20px 5px 8px 10px ;

在这里插入图片描述

4.4圆角边框

四个属性值按顺时针排列

border-radius: 20px 10px 50px 30px;

在这里插入图片描述
利用border-radius属性制作圆形的两个要点

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
   width: 100px;
   height: 100px;
   border: 4px solid red;
   border-radius: 50%;
    }

使用border-radius制作特殊图形：半圆形

    <style>
        div{
            background: red;
            margin: 30px;
            
        }
        div:nth-of-type(1){
            width: 50px;
            height: 100px;
            border-radius:50px 0 0 50px ;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:  50px 50px 0 0;
        }
        div:nth-of-type(3){
            width: 100px;
            height: 50px;
            border-radius:  0 0 50px 50px;
        }
        div:nth-of-type(4){
            width: 50px;
            height:100px;
            border-radius:  0 50px 50px  0;
        }
    </style>
 
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

在这里插入图片描述

4.5盒子阴影

 div{
           border:2px solid red;
            margin: 30px;
            box-shadow:inset 3px 3px 10px #06c/*内阴影 x轴位移阴影水平位移量 y轴  阴影模糊半径*/
        }
        div:nth-of-type(1){
            width: 50px;
            height: 100px;
            border-radius:50px 0 0 50px ;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:  50px 50px 0 0;
        }
        div:nth-of-type(3){
            width: 100px;
            height: 50px;
            border-radius:  0 0 50px 50px;
        }
        div:nth-of-type(4){
            width: 50px;
            height:100px;
            border-radius:  0 50px 50px  0;
        }

在这里插入图片描述

补box-sizing 内容

content-box
设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽
在这里插入图片描述
如果你加上外边框和内边框，则会溢出。

border-box
如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值
在这里插入图片描述

小结

在这里插入图片描述

5.浮动

5.1 标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
标准文档流组成

块级元素（block）独占一行
< h1> < h6> < p> < div> 列表
内联元素（inline）不独占一行
< span>、< a>、< img/>、< strong>...

5.2 display

display: none;
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。
在这里插入图片描述
display:inline;
一个常见的例子是为实现水平菜单而生成行内的

元素：

display:block;

display:inline-block;
行内块元素，元素既有内联元素的特性，也有块元素的特性。
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

5.3 浮动 float

左浮动 float:left;
```
.lay01 {  
      border:1px #F00 dashed;
     float:left;
  }
  .lay02 {
   border:1px #00F dashed;
   float:left;
 }
 .lay03 { 
  border:1px #060 dashed;
  float:left;
  } 
```
右浮动float:right;

默认值。元素不动，显示在文本出现的位置。float: none；
```
 .lay01 {  
      border:1px #F00 dashed;
     float:right;
  }
  .lay02 {
   border:1px #00F dashed;
   float:none;
 }
 .lay03 { 
  border:1px #060 dashed;
  float:none;
  } 
```
5.4 边框塌陷

我们可以看到如果内容设置宽度和浮动后，边框塌陷了

首先熟悉一下clear属性：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
  使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
== 使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。==
1. 在父元素添加 overflow: auto;来解决此问题：或者hidden属性值，这个值在网页中经常使用，通常与< div>宽度结合使用设置< div>自动扩展高度，或者隐藏超出的内容（溢出处理）
```
.father{
       border: 1px solid red; overflow: auto/hidden;
        }
```
2. 父级添加伪类after
```
.cl:after{ 
 content: ''; /*在clear类后面添加内容为空*/
 display: table; /*把添加的内容转化为块元素*/ 
 clear: both; /*清除这个元素两边的浮动*/ }
```
3. 浮动元素后面加空div
用一个无标签块元素撑开高度
```
  .clear{
       clear: both; margin: 0; padding: 0; 
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="lay01"><img src="../imagle/码出高效.jpg" alt=""></div>
        <div class="lay02"><img src="../imagle/下.png" alt=""></div>
        <div class="lay03"><img src="../imagle/右.png" alt=""></div>
        <div class="clear"></div>
    </div>
```
5.5 补overflow 内容
```
        overflow: scroll;/*scroll 溢出的内容用滚轮显示*/
```
```
            overflow: visible;/*内容会超过盒子呈现*/
```
```
        overflow: hidden;/*内容被修剪，其他内容不可见*/
        overflow: auto;/*如果内容被修建，内容会显示滚动条查看*/ 
```
小结

【清除浮动，防止父级边框塌陷的四种方法】
1. 浮动元素后面加空div
  简单，空div会造成HTML代码冗余
2. 设置父元素的高度
  简单，元素固定高会降低扩展性
3. 父级添加overflow属性
  简单，下拉列表框的场景不能用
4. 父级添加伪类after
  写法比上面稍微复杂一点，但是没有副作用，推荐使用
6、定位

会使用position定位网页元素
有五个不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
  position: static;
  静态定位的元素不受 top、bottom、left 和 right 属性的影响。它始终根据页面的正常流进行定位。
6.1 相对定位relative

position: relative;
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

相对定位元素的规律
1. 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
2. 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
3. 设置相对定位的盒子原来的位置会被保留下来
```
  #two {
            position: relative;
            top: 20px;
            left: 20px;
            background: blue;
          }
```
6.2绝对定位 absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
1. 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
2. 元素位置发生偏移后，它原来的位置不会被保留下来
3. 设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
```
 #three {
            position: absolute;
            background-color: rgb(57, 32, 220);
            top: 20px;
            left: 20px;
         }
       /*元素位置发生偏移后，它原来的位置不会被保留下来*/
```
6.3 固定定位 fixed

固定定位与绝对定位相似，“One” 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。
```
  #one {
            position: fixed;
            top: 80px;
            left: 10px;
          }
```
固定定位的特性
1. 相对浏览器窗口来定位
  偏移量不会随滚动条的移动而移动
2. 固定定位的使用场景
  一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
6.4 z-index属性

z-index值大的层位于其值小的层上方

网页元素透明度

opacity：x ，x值为0~1
filter: alpha(opacity=x) ，x值为0~100，越小越透明
```
/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */
```
小结

人间凡尔赛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css详细笔记

Cascade Style Sheet 层叠级联样式表表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。讲解盒子模型及属性，并说明边框、外边框和内边框都是四个边，最后介绍盒子模型的立体结构。盒子模型总尺寸= border + padding + margin + 内容宽度。...
复制链接

扫一扫