CSS

如何学习

css是什么
css怎么用（快速入门）
css选择器
美化页面（文字，阴影，超链接，列表渐变…）
盒子模型
浮动
定位
页面动画（特效）

什么是css

Cascading Style Sheet层叠级联样式表
CSS：表现（美化页面）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

发展史

CSS1、0
CSS2、0：DIV（快）+CSS，HTML与CSS结构分离的思想，页面变得更加简单，SEO
CSS2、1：浮动，定位
CSS3、0：圆角边框、阴影、动画…游览器兼容

快速入门

练习格式：

创建文件夹

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <link rel="stylesheet" href="css/style.css">
        <!-- style语法：编写每一个css代码时，建议使用分号隔开 选择器{ 语句1; 语句2; 语句3; } -->
    </head>
    <body>
      <h1>今天也要加油哦</h1>
    </body>
</html>

h1{
   
    color: crimson;
}

建议使用分开来书写

CSS优势

网页结构表现分离，可以实现复用
内容与表现分离
样式十分丰富
建立使用独立于HTML的CSS文件
利用SEO，容易被搜索引擎收录

CSS的3种导入样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!-- 内部样式-->
    <style> h1{
     color: cyan; } </style>
    <link rel="stylesheet" href="CSS/style.css">
  </head>
  <body>
    <!--优先级，就近原则-->
    <!--行内样式：在标签元素中编写CSS即可-->
    <h1 style="color: red">我是一个标题</h1>
  </body>
</html>

链接式：

 <link rel="stylesheet" href="CSS/style.css">

/*外部样式*/
h1{
   
    color: cornflowerblue;
}

导入式：是CSS2、1特殊的方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style> @import url("CSS/style.css"); </style>
  </head>
  <body>
    <h1>我是样式</h1>
  </body>
</html>

选择器

基本选择器

标签选择器： 选择标签：标签{}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 标签选择器 -->
    <style> h1,h2{
     color: crimson; background: coral; border-radius: 10px; } p{
     font-size: 100px; } </style>
  </head>
  <body>
    <h1>学java</h1>
    <h2>学CSS</h2>
    <p>跟着狂神</p>
  </body>
</html>

类选择器： class ，选择所有属性一致的标签，跨类名。 .class{}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 类选择器: .class{} 好处，可以多个标签归类，选择同一个样式，实现标签的服用 -->
    <style> .yt{
     color: crimson; background: coral; border-radius: 10px; } .sex{
     color: blue; background: yellowgreen; border-radius: 10px; } </style>
  </head>
  <body>
    <h1 class="yt">标题</h1>
    <h2 class="sex">标题2</h2>
    <p class="yt">woshi1</p>
  </body>
</html>

id选择器： id 不能同名， #id{}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> /* id选择器： #id名字{} 选择器的优先级： id > class > 标签 */ #yt{
     color: chocolate; } .style1{
     color: #872222; } h1{
     color: cyan; } </style>
  </head>
  <body>
    <h1 id="yt">我是</h1>
    <h1 class="style1">yt</h1>
    <h1 class="style1">来自</h1>
    <h1>中国</h1>
  </body>
</html>

id选择器 > 类选择器 > 标签选择器

层次选择器

后代选择器： 在选择的元素后面的所以元素

<!-- 后代选择器：在某个元素的所有后代， --> */ body p{
   
    color: coral;
}

子选择器： 选择元素的下一代（就一代）

body>p{
   
    color: coral;
}

相邻兄弟选择器：（下面的那一个兄弟）

.style1 + p{
   
    color: #307b52;
    background: chocolate;
}

通用兄弟选择器： 当前选择的向下所所有的兄弟

.style1~p{
   
    color: #307b52;
    background: chocolate;
}

<p>学java</p>
<p class="style1">学java</p>
<p>学java</p>
<p>学java</p>
<h1>我是</h1>
<ul>
    <li>
        <p>学</p>
    </li>
    <li>
        <p>学</p>
    </li>
    <li>
        <p>学</p>
    </li>
</ul>
<p>学java</p>
<p>学java</p>
<p>学java</p>

结构伪类选择器

选择第一个

/*选择ul下li的第一个*/
ul li:first-child{
   
    background: chocolate;
}

选择最后一个

/*选择ul下li的最后一个*/
ul li:last-child{
   
    background: cornflowerblue;
}

这个是选择当前p元素的父级元素，选中父级元素的第一个并且是当前元素才生效（顺序）

/*这个是选择当前p元素的父级元素，选中腹肌元素的第一个并且是当前元素才生效 （顺序）*/
p:nth-child(1){
   
    background: #dca621;
}

选择父元素，下p元素的第一个，（类型）

/*选择父元素，下p元素的第一个， （类型）*/
p:nth-of-type(1){
   
    background: crimson;
}

鼠标移上去会变为下面的设定

/*鼠标移上去会变为下面的设定*/
a:hover{
   
    background: coral;
}

<a href="">点击我</a>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ul>

属性选择器

属性选择器（常用）
属性名 [属性名=属性值 (正则表达式)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <style> .start a{
     float: left; display: block; color: darkgrey; background: cornflowerblue; border-radius: 10px; margin-right: 10px; height: 50px; width: 50px; text-align: center; text-decoration: none; font: bold 20px/50px Arial; } /*属性选择器（常用） 属性名 [属性名=属性值 (正则表达式)] =绝对等于 *=包含 ^=以这个开头 $=以这个结尾 */ /*选择id=first的属性*/ a[id="first"]{
     background: chocolate; } /*选择class*=active*/ a[class*="active"]{
     background: #237b20; } /*选择以http开头的*/ a[href^="http"]{
     background: chocolate; } /*选择以jpg结尾的*/ a[href$=jpg]{
     background: cyan; } </style>
</head>
<body class="start">
<a href="http://www.baidu.com" class="link item first" id="first">1</a>
<a href="image/1.jpg" class="Link active">2</a>
<a href="image/2.png" class="Link item ">3</a>
<a href="image/3.png" class="Link item ">4</a>
<a href="image/4.png" class="Link active">5</a>
<a href="image/5.png" class="Link ">6</a>
<a href="image/26.png" class="Link ">7</a>
<a href="image/7.png" class="Link">8</a>
<a href="image/8.png" class="Link">9</a>
<a href="image/9.png" class="Link">10</a>
</body>
</html>

在这里插入图片描述

=绝对等于
*=包含
^=以这个开头
$=以这个结尾

美化网页

为什么要美化网页

有效的传递网页信息
美化网页，页面漂亮，才能吸引用户
凸显页面主题
提高用户体验

字体样式

span标签：重点突出的字，用span套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> span{
     font-size: 30px; color: chocolate; } </style>
</head>
<body>
我是：<span>重点突出这里</span>
</body>
</html>

font-family ; 字体;
font-size: 大小;
font-weight: 粗细:
font: 斜体粗细大小样式;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style> body{
     font-family: 楷体; } h1{
     font: oblique bolder 30px 新宋体; } p{
     font-size: 15px; font-weight: bold; } </style>
</head>
<body>
<h1>大海；我的随风迁徙的自由（四）</h1>
<p>　那一次回来后，我们有很长一段时间没有去看海。

    在没看海和不听琴的日子里，我就又沉湎于我的那些纷杂交错冥想不明的事。

    时代是个怎样递变的东西。昨天我还痴狂迷恋的物事，今天就过时得恍如隔世。我们能留住什么，应该留住什么。所有赞美和歌咏爱情的永恒与纯真都那样动人心弦，那为何不让我们世代传承下去？是否也会害怕厌倦和不愿承担自己自相矛盾的盟誓？

    人类长得让人沮丧，又短得令人感伤。
</p>
    <p>我在一本俗不可耐的网络文学杂志上看到这样一句话——“6500万年前，最后一只死去的恐龙，它心里在想些什么呢？”——时，不禁哈哈大笑。这悲哀的家伙；更悲哀的是，生活了1点6亿年的恐龙竟然不会发明一台掌中电脑来记载自己的毁灭！

    不过还好，现在总算还有个人为它叹息，多少也算是安慰。只是这叹息要等六千五百万年之久，未免太长了，所以这家伙还是不幸呀！

    所以，活着就是快乐！活着就是最好！</p>

    <p>是呀，活着最好。开心最好。还是你最好……

        真的，每次看到你，我多疲惫的心都会快乐起来。你每一个蹦跳的声音和眼神，你每一次不经意的动情呈现和显露，我伸手触及和拥搂你的每一寸肌肤的温润和颤栗，都那样深深嵌入我的心底，那样让我热泪盈眶。

        是呀，那我还想什么呢。我们把人类的进步交给科学家，把所有的享乐模式交给创造博士，我们只要依照程序提示按动键钮罗盘就可尽情快乐。

        为什么不这样呢！
    </p>
    <p>在雨中看大海，只有你和我。我在你的伞下伟岸地站立着。迷茫的海面飘扬白色的水花；整片天地浑沌着。我们在感受那份大自然的清凉与喧嚣的寂静。

        为什么不这样呢？

        很多事情一旦结合，就会慢慢习惯，包括侵略、社变、生活和情感。包括你和我。

        其实我早知道，我并不适合你。我并不了解你；我对你所说的一切和所写的这一切，都只是我个人单方面的自以为是的浮夸表现和滑稽可笑的无知炫耀。我并不太懂你，就像你不太懂我一样。

        就像你的琴声。我已不再厌倦你的琴声，但我还是不懂五音六律，不知和声复调。我知道我不是那个能在你轻扬微抑声中堆积风花雪月情感的人。你的悲伤里不会有我；我走不进你流琴风笛的唏嘘哀怨中，你强把我置于其中只会阻滞你灵台感性的流泄。但是我们却结合了。你不说，我也不说。

        坐在长满杂草的山冈上，雪青色的婆绒花星星点点散落四周。转头俯瞰连绵起伏着浪潮的海岸延绵到远方，你在下面的海岸边远远地站着，站成一个小白点，有时又四下窜动。长线般的海水涌上沙滩。眼前是一片茫茫的汪洋，正值春末的草色衬着流云抺过的天蓝，幽远得让人有点迷乱。

        在海边，我已习惯和你一同坐着。
    </p>
    <p>海和爱情是永远歌颂不完的主题。你说。

        我说：不，快了！

        你侧过头来看着我。

        我装作看远处眼睛一动也不动。

        社会不过演绎如此轮回。上天太残忍，给了我们求生的本能，让我们不得不一代又一代走同样的路，犯同样的错，挣扎同样的挣扎。

        这个年代我们又该怎样挣扎？我们是否应该生活得更有理想和美感？在这个金粉银饰、利欲至上的浮幻年代，我们是否还要矫情自己的成瘾成性，未来是否不再有令人神往憧憬的希望？世界只会越来越炫丽而妖艳而靡废，再推倒重来。那我还有什么可抵触？我的离经背道又能彰显凸现多少个性和意义？

        空虚的不是我们这一代，而是未来。</p>


</body>
</html>

文本样式

颜色：单词，RGB，RGBA
文本对齐方式：text-align:center
首行缩进：text-indent:2em;
行高：line-height: 30px;
装饰：text-decoration: underlinie
文本图片水平对齐：vertical-align:middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> /* 文本样式： 颜色： 单词， RGB RGBA */ h1{
     /*color: #ff3324;*/ /*color: rgb(25, 72, 120);*/ color: rgba(18, 182, 18,0.5); } .first{
     text-indent: 2em; } .first2{
     /*居中*/ text-align: center; /*行高*/ line-height: 20px; /*高度*/ height: 60px; /* !*上划线*! text-decoration: overline; !*下划线*! text-decoration: underline; !* 中划线*! text-decoration: line-through;*/ } img,span{
     vertical-align: middle; } </style>
</head>
<body>
<p>
    <img src="image/1.jpg" alt="没有找到">
    <span>水平对齐</span>
</p>
<h1>大海；我的随风迁徙的自由（四）</h1>
<p class="first">那一次回来后，我们有很长一段时间没有去看海。

    在没看海和不听琴的日子里，我就又沉湎于我的那些纷杂交错冥想不明的事。

    时代是个怎样递变的东西。昨天我还痴狂迷恋的物事，今天就过时得恍如隔世。我们能留住什么，应该留住什么。所有赞美和歌咏爱情的永恒与纯真都那样动人心弦，那为何不让我们世代传承下去？是否也会害怕厌倦和不愿承担自己自相矛盾的盟誓？

    人类长得让人沮丧，又短得令人感伤。</p>
<p class="first2">我在一本俗不可耐的网络文学杂志上看到这样一句话——“6500万年前，最后一只死去的恐龙，它心里在想些什么呢？”——时，不禁哈哈大笑。这悲哀的家伙；更悲哀的是，生活了1点6亿年的恐龙竟然不会发明一台掌中电脑来记载自己的毁灭！

    不过还好，现在总算还有个人为它叹息，多少也算是安慰。只是这叹息要等六千五百万年之久，未免太长了，所以这家伙还是不幸呀！

    所以，活着就是快乐！活着就是最好！ </p>
</body>
</html>

超链接伪类

鼠标悬停状态：a:hover{} （正常情况下只用这个）
鼠标按住不放：a:active{}
未访问：a:link{}
已访问：a:visited{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> a{
     text-decoration: none; color: #100a07; } /*鼠标放上去时候的状态（常用）*/ a:hover{
     font-size: 60px; color: cornflowerblue; } /* 鼠标按住不放的状态*/ a:active{
     color: darkgreen; } /*鼠标未访问的状态*/ a:link{
     color: deeppink; } /*鼠标已访问的状态*/ a:visited{
     color: #d20f0f; } </style>
</head>
<body>
<p>
    <img src="image/1.jpg" alt="没有找到">
</p>
<p>
    <a href="" class="first">码出高效：java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p>99.9</p>
</body>
</html>

阴影

text-shadow：颜色水平上下模糊

p{
   
    text-shadow: chocolate 10px 10px 5px;
}

文本练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宝藏</title>
    <link rel="stylesheet" href="CSS/style1.css">
</head>
<body>
<div id="nav">
    <h1>全部商品分类</h1>
    <ul>
        <li><a href="#">图书</a>&nbsp&nbsp<a href="#">音箱</a>&nbsp&nbsp<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp&nbsp<a href="#">手机</a>&nbsp&nbsp<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp&nbsp<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp&nbsp<a href="#">家装</a>&nbsp&nbsp<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp&nbsp<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp&nbsp<a href="#">钟表</a>&nbsp&nbsp<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp&nbsp<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp&nbsp<a href="#">旅行</a>&nbsp&nbsp<a href="#">充值</a>&nbsp&nbsp<a href="#">票务/a></li>
    </ul>
</div>

</body>
</html>

#nav{
   
    width: 300px;
    background: #908c8c;
}
h1{
   
    color: red;
    text-indent: 1em;
    background: bisque;
    font-weight: bold;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
}
/* list-style:none 去掉 circle空心圆 decimal数字 square正方形 */
ul li{
   
    list-style: none;
}
a{
   
    text-decoration: none;
    font-size: 14px;
    text-indent: 1em;
    color: #100a07;
}
a:hover{
   
    color: #e76d10;
    text-decoration: underline;
}

背景及渐变

背景
总的：background: chocolate url(“image/2.jpg”) 10px 10px no-repeat;
分开来：
- background-image:url(“image/2.jpg”) ; 背景
- background-repeat: repeat-x; 平铺方式
- background-position: 100px 100px; 背景位置
- backgrounf-attachmen：fixed; 背景是否固定，固定了就不会被滚动条拉走
渐变

推荐一个调渐变的网站：https://www.grabient.com/

background-color: #85FFBD;
background-image: linear-gradient(302deg, #85FFBD 0%, #FFFB7D 100%)

盒子模型

什么是盒子

margin:外边距
padding：内边距
border：边框

border边框

粗细：
样式：
颜色：
border: 2px solid blue;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> /*开发中会有默认的外边距和内边距,我们一般初始化为0*/ /**{*/ /* padding: 0px;*/ /* margin: 0px;*/ /*}*/ #box {
     border: 1px solid coral; width: 300px; } h1 {
     size: 18px; line-height: 30px; margin-top: 0px; margin-bottom: 10px; } form {
     background: #33cbbe; } form div:nth-of-type(1) input {
     border: 2px solid blue; } form div:nth-of-type(2) input {
     border: 2px solid #aa0d4b; margin-left: 16px; } form div:nth-of-type(3) input {
     border: 2px solid #a0a0c4; margin-left: 16px; } </style>
    </head>
    <body>
        <div id="box">
            <h1>会员登录</h1>
            <form action="#">
                <div>
                    <span>用户名：</span>
                    <input type="text" name="text">
                </div>
                <div>
                    <span>密码：</span>
                    <input type="passwordt" name="pas">
                </div>
                <div>
                    <span>邮箱：</span>
                    <input type="email" name="email">
                </div>
            </form>
        </div>
    </body>
</html>

外边距及盒子居中

盒子居中：margin：0 auto；

/*盒子居中*/
margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<style> #box {
     border: 1px solid coral; width: 300px; /*盒子居中*/ margin: 0 auto; } h1 {
     /*外边距 不包含颜色*/ margin: 0px; /*内边距： 内边距包含颜色*/ padding: 10px; line-height: 30px; background: #33cbbe; } form {
     background: #33cbbe; } </style>
	</head>
    <body>
        <div id="box">
            <h1>会员登录</h1>
            <form action="#">
                <div>
                    <span>用户名：</span>
                    <input type="text" name="text">
                </div>
                <div>
                    <span>密码：</span>
                    <input type="passwordt" name="pas">
                </div>
                <div>
                    <span>邮箱：</span>
                    <input type="email" name="email">
                </div>
            </form>
        </div>
    </body>
</html>

圆角边框

border-radius : 左上右上右下左下（顺时针）
圆角的=圆圈的半径

<style> /*border-radius : 左上 右上 右下 左下（顺时针） 圆角的=圆圈的半径 */ div{
     width: 100px; height: 100px; background: red; border-radius: 50px 50px 50px 50px; } </style>

盒子阴影：box-shadow: 水平上下模糊程度颜色;\

div{
   
   width: 300px;
    margin: 0 auto;
}
img{
   
    border-radius: 200px;
    box-shadow: 10px 10px 300px red;
}

浮动

display

块级元素：独占一行

div     p       h1-h6    列表

行内元素：不占一行

span    a    img

行内元素可以被包含在块级元素当中，反之则不能

/* dispaly： inline 变成行内元素 black 变成块级元素 inline-block 是块级元素，但是可以内联在一行*/
div{
   
    width: 100px;
    height: 120px;
    border: 1px solid red;
    display: block;
}
span{
   
    width: 100px;
    height: 120px;
    border: 1px solid yellowgreen;
    display: inline-block;
}

float

div{
   
    margin: 5px;
    padding: 5px;
}
.father{
   
    border:1px solid red;
}
.layer1{
   
    border:1px solid #14443e;
    display: inline-block;
    float: left;
}
.layer2{
   
    border:1px solid #1b078d;
    display: inline-block;
    float: left;
}
.layer3{
   
    border:1px solid #47af55;
    display: inline-block;
    float: left;
}
.layer4{
   
    border:1px solid #47af55;
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    float: left;
}

解决塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{
     margin: 5px; padding: 5px; } .father{
     border:1px solid red; /*height: 800px;*/ /*overflow: hidden;*/ /*超过的增加滚动条*/ /*overflow: scroll;*/ } .father:after{
     content: ""; display: block; clear: both; } .layer1{
     border:1px solid #14443e; display: inline-block; float: left; } .layer2{
     border:1px solid #1b078d; display: inline-block; float: left; } .layer3{
     border:1px solid #47af55; display: inline-block; float: left; } /* clear: right 右侧不允许有浮动 left 左侧不允许有浮动 both 两侧不允许有浮动 none */ .layer4{
     border:1px solid #47af55; display: inline-block; font-size: 18px; line-height: 30px; float: left; clear: both; } .layer5{
     clear: both; } </style>
</head>
<body>
<div class="father">
    <div class="layer1"><img src="image/2.jpg" alt=""></div>
    <div class="layer2"><img src="image/3.jpg" alt=""></div>
    <div class="layer3"><img src="image/4.jpg" alt=""></div>
    <div class="layer4">浮动的元素可以左浮动，也可以由浮动</div>
<!-- <div class="layer5"></div>-->
</div>
</body>
</html>

clear right 右侧不允许有浮动
clear left 左侧不允许有浮动
clear both 两侧不允许有浮动
clear none

border:1px solid #47af55;
display: inline-block;
font-size: 18px;
line-height: 30px;
float: left;
/*clear: both;*/

解决方案

增加父级元素的高度

.father{
   
    border:1px solid red;
    height: 800px;
}

在父类中增加一个空div子类标签，清除浮动。

<div class="layer5"></div> .layer5{
   
    clear: both;
}

在父类中增加overflow: hidden;
超过的增加滚动条
overflow: scroll;

border:1px solid red;
/*height: 800px;*/
/*overflow: hidden;*/
/*超过的增加滚动条*/
overflow: scroll;

在父类中添加一个伪类：after{content：‘’ ； diaplay:block; clear:both; }

.father:after{
   
    content: "";
    display: block;
    clear: both;
}

小结

浮动元素后面增加空div，简单，代码中尽量避免空div。
设置父元素的高度，简单，元素假设有了固定的高度，就会被限制。
overflow，简单，下拉的一些场景避免使用。
父类添加一个伪类： after（推荐），写法稍微复杂一点，但是没有副作用，推荐使用！

对比

display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父类边框崩塌的问题。

定位

相对定位

相对定位：position: relative 相对于自己原来的位置进行偏移
相对定位的时候，依然保留原来的位置，原来的位置会保留。
left
top
right
bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{
     margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{
     border: 1px solid red; padding: 0; } #lay1{
     background: chocolate; border: 1px dashed #0a0808; /* 相对定位：position: relative相对于自己原来的位置进行偏移 相对定位的时候，依然保留原来的位置，原来的位置会保留。 left top right bottom */ position: relative; top: -20px; left:20px; } #lay2{
     background: #2ecddc; border: 1px dashed #0a0808; } #lay4{
     background: #33cd43; border: 1px dashed #0a0808; position: relative; right: -20px; bottom: -20px; } </style>
</head>
<body>
<div id="father">
    <div id="lay1">第一个盒子</div>
    <div id="lay2">第二个盒子</div>
    <div id="lay4">第三个盒子</div>
</div>
</body>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .box{
     height: 300px; width: 300px; border: 2px solid red; padding: 5px; } a{
     text-decoration: none; display: block; height: 100px; width: 100px; line-height: 100px; font-size: 15px; text-align: center; color: cornsilk; background: #ff24cf; } a:hover{
     background: cornflowerblue; } .a2, .a4{
     position: relative; top: -100px; left: 200px; } .a5{
     position: relative; top: -300px; left: 100px; } </style>
</head>
<body>
<div class="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

绝对定位

position：absolute
定位：基于xxx定位，上下左右

没有父级的前提下，相对于浏览器定位

假设父级元素存在定位，我们通常会相对于父级元素进行偏移

在父级元素范围内内移动

相对于父级或者游览器定位，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{
     margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{
     border: 1px solid red; padding: 0; position: relative; } #lay1{
     background: chocolate; border: 1px dashed #0a0808; position:absolute; top: 20px; right: 20px; } #lay2{
     background: #2ecddc; border: 1px dashed #0a0808; } #lay4{
     background: #33cd43; border: 1px dashed #0a0808; } </style>
</head>
<body>
<div id="father">
    <div id="lay1">第一个盒子</div>
    <div id="lay2">第二个盒子</div>
    <div id="lay4">第三个盒子</div>
</div>
</body>
</html>

固定定位

position：fixied
就是相对于游览器定位，怎么滚都不会移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body{
     height: 1000px; } div:nth-of-type(1){
     height: 50px; width: 50px; /*绝对定位*/ position: absolute; right: 50px; bottom: 50px; background: coral; } div:nth-of-type(2){
     height: 50px; width: 50px; /*固定定位*/ position: fixed; right: 25px; bottom: 25px; background: cornflowerblue; } </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index和opcity

图层：

z-index默认为0，最高无限，只有定位了的才能用，没有定位的不能使用
opcity透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/wd.jpg" alt=""></li>
        <li class="tip1">狂神指导课</li>
        <li class="tip2"></li>
        <li>时间：2021-3-22</li>
    </ul>
</div>

</body>
</html>

#content{
   
    padding: 0px;
    margin: 0px;
    width: 380px;
    border: 1px solid red;
    font-size: 12px;
    line-height: 25px;
}
ul,li{
   
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#content ul{
   
    position: relative;
}
.tip1,.tip2{
   
    position: absolute;
    top:216px;
    height: 25px;
    width: 380px;
}
.tip1{
   
    color: cornsilk;
    /*z-index: 50;*/
}

.tip2{
   
    background: #11130f;
    opacity: 0.5;
}

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/114422.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

CSS基础知识

CSS

什么是css

发展史

快速入门

CSS的3种导入样式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器

美化网页

为什么要美化网页

字体样式

文本样式

超链接伪类

阴影

文本练习

背景及渐变

盒子模型

什么是盒子

border边框

外边距及盒子居中

圆角边框

浮动

display

float

解决方案

对比

定位

相对定位

练习

绝对定位

固定定位

z-index和opcity

发表回复

CSS基础知识

CSS

什么是css

发展史

快速入门

CSS的3种导入样式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器

美化网页

为什么要美化网页

字体样式

文本样式

超链接伪类

阴影

文本练习

背景及渐变

盒子模型

什么是盒子

border边框

外边距及盒子居中

圆角边框

浮动

display

float

解决方案

对比

定位

相对定位

练习

绝对定位

固定定位

z-index和opcity

相关推荐

电商网站的商品详情页系统架构

MySql多库查询及连表查询[通俗易懂]

【8大编程语言的适用领域】先别着急选语言学编程，先看它们能干嘛「建议收藏」

2.在Ubuntu中安装 PyCharm的步骤[通俗易懂]

什么是Web Service(SOAP)？

android vlc 中文字幕,解决Android版vlc中文乱码问题

发表回复