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

.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;
}

posted @ 2021-07-23 00:28 拒绝平庸* 阅读(40) 评论(0) 编辑收藏举报

刷新页面返回顶部

拒绝平庸

CSS

CSS